/* ==========================================================================
   Base Styles — Offmind POC
   Reset, typography, and utility classes.
   ========================================================================== */

/* ── Google Fonts ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── CSS Reset ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text);
  background-color: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* ── Typography Classes ─────────────────────────────────────────────────── */
.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

.body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

.small {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

.tiny {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}

/* ── Layout Utilities ───────────────────────────────────────────────────── */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.flex-1      { flex: 1; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.gap-xs   { gap: var(--space-xs); }
.gap-sm   { gap: var(--space-sm); }
.gap-md   { gap: var(--space-md); }
.gap-base { gap: var(--space-base); }
.gap-lg   { gap: var(--space-lg); }
.gap-xl   { gap: var(--space-xl); }
.gap-2xl  { gap: var(--space-2xl); }
.gap-3xl  { gap: var(--space-3xl); }

/* ── Sizing Utilities ───────────────────────────────────────────────────── */
.w-full { width: 100%; }

/* ── Text Utilities ─────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-muted  { color: var(--text-muted); }
.text-light  { color: var(--text-light); }
.font-medium   { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold     { font-weight: var(--fw-bold); }

/* ── Color Utilities ────────────────────────────────────────────────────── */
.text-primary { color: var(--primary); }
.text-accent  { color: var(--accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error   { color: var(--error); }
.text-info    { color: var(--info); }

.bg-primary       { background-color: var(--primary); }
.bg-primary-light { background-color: var(--primary-light); }
.bg-accent        { background-color: var(--accent); }
.bg-success       { background-color: var(--success); }
.bg-success-light { background-color: var(--success-light); }
.bg-warning       { background-color: var(--warning); }
.bg-warning-light { background-color: var(--warning-light); }
.bg-error         { background-color: var(--error); }
.bg-error-light   { background-color: var(--error-light); }
.bg-surface       { background-color: var(--surface); }

/* ── Visibility Utilities ───────────────────────────────────────────────── */
.hidden  { display: none !important; }
.visible { visibility: visible; }

/* ── Spacing Utilities ──────────────────────────────────────────────────── */
.p-xs   { padding: var(--space-xs); }
.p-sm   { padding: var(--space-sm); }
.p-md   { padding: var(--space-md); }
.p-base { padding: var(--space-base); }
.p-lg   { padding: var(--space-lg); }
.p-xl   { padding: var(--space-xl); }

.px-base { padding-left: var(--space-base); padding-right: var(--space-base); }
.px-lg   { padding-left: var(--space-lg);   padding-right: var(--space-lg); }
.px-xl   { padding-left: var(--space-xl);   padding-right: var(--space-xl); }

.py-sm   { padding-top: var(--space-sm);   padding-bottom: var(--space-sm); }
.py-base { padding-top: var(--space-base); padding-bottom: var(--space-base); }
.py-lg   { padding-top: var(--space-lg);   padding-bottom: var(--space-lg); }

.mt-sm   { margin-top: var(--space-sm); }
.mt-base { margin-top: var(--space-base); }
.mt-lg   { margin-top: var(--space-lg); }
.mt-xl   { margin-top: var(--space-xl); }
.mt-2xl  { margin-top: var(--space-2xl); }

.mb-sm   { margin-bottom: var(--space-sm); }
.mb-base { margin-bottom: var(--space-base); }
.mb-lg   { margin-bottom: var(--space-lg); }
.mb-xl   { margin-bottom: var(--space-xl); }

/* ── Scrollbar Hiding (for horizontal scroll containers) ────────────────── */
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.scroll-x::-webkit-scrollbar {
  display: none;
}

.scroll-x {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ── Screen Container (mobile-first wrapper) ────────────────────────────── */
.screen {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  padding-bottom: 80px; /* space for bottom nav */
}

/* ── Screen Transition ──────────────────────────────────────────────────── */
.screen-content {
  animation: fadeIn var(--transition-base) ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}