/* tokens.css — single source of truth for all design tokens */

/* ── Primitive palette ───────────────────────────────────────────────────────
   Raw values from Figma. Never reference these directly in components —
   use the semantic aliases below. These are only here so the aliases have
   something to point at.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Yellow — brand primary, warm backgrounds */
  --white:                  #ffffff;
  --10-yellow:              #fffdfa;
  --10-yellow-translucent:  #fffdfaf2;
  --50-yellow:              #fffcf5;
  --50-yellow-translucent:  #fffcf5f2;
  --100-yellow:             #fff6e5;
  --100-yellow-translucent: #fff6e5f2;
  --200-yellow:             #ffeecc;
  --300-yellow:             #ffdd99;
  --400-yellow:             #fbcb6a;
  --500-yellow:             #fab938;
  --600-yellow:             #f9a806;
  --700-yellow:             #cc8800;
  --800-yellow:             #996600;
  --900-yellow:             #664400;

  /* Gray — ink, neutral */
  --100-gray:    #f3f3f2;
  --200-gray:    #e7e7e5;
  --300-gray:    #cfcec9;
  --400-gray:    #b7b6af;
  --500-gray:    #9e9c94;
  --600-gray:    #868479;
  --700-gray:    #6b6961;
  --800-gray:    #504f49;
  --900-gray:    #363530;
  --900-gray-15: #36353026;
  --900-gray-40: #36353066;
  --900-gray-70: #363530b2;

  /* Blue */
  --100-blue: #ecf4f9; --200-blue: #dde8ee; --300-blue: #bfd0d9;
  --400-blue: #9fb8c6; --500-blue: #859fad; --600-blue: #668799;
  --700-blue: #476f85; --800-blue: #2e556b; --900-blue: #1a3a4d;

  /* Green */
  --100-green: #f9f6ec; --200-green: #f1edda; --300-green: #e0d9b8;
  --400-green: #cdc498; --500-green: #b8ad7a; --600-green: #ac9d53;
  --700-green: #8f813d; --800-green: #6f632a; --900-green: #4c4419;

  /* Red */
  --100-red: #f9eeec; --200-red: #f1deda; --300-red: #e0beb8;
  --400-red: #cda198; --500-red: #bd8175; --600-red: #ac6253;
  --700-red: #8f4b3d; --800-red: #6f362a; --900-red: #4c2219;
}

/* ── Semantic aliases ────────────────────────────────────────────────────────
   These are what components reference. Swapping a primitive here updates
   every component at once.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --color-bg:           var(--white);
  --color-bg-warm:      var(--100-yellow);
  --color-surface:      var(--10-yellow-translucent);
  --color-surface-warm: var(--100-yellow-translucent);

  /* Text */
  --color-ink:       var(--900-gray);  /* main text */
  --color-ink-muted: var(--600-gray);  /* subdued / secondary */
  --color-ink-faint: var(--300-gray);  /* placeholders, disabled */

  /* Borders / dividers — hairline only, no border radius in this design */
  --color-border:     var(--900-gray-15);
  --color-border-mid: var(--900-gray-40);

  /* Accent */
  --color-accent:    var(--600-yellow);
  --color-accent-bg: var(--100-yellow);

  /* Status */
  --color-success:    var(--600-green);
  --color-success-bg: var(--100-green);
  --color-danger:     var(--600-red);
  --color-danger-bg:  var(--100-red);
  --color-info:       var(--600-blue);
  --color-info-bg:    var(--100-blue);

  /* Spacing — from Figma variables export */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  12px;
  --spacing-lg:  16px;
  --spacing-xl:  24px;
  --spacing-2xl: 32px;

  /* Typography */
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-sans:  'Karla', system-ui, sans-serif;

  /* Nav heights — DO NOT CHANGE: painstakingly debugged across all devices */
  --top-bar-h:    64px;
  --bottom-nav-h: 72px;

  /* Legacy space aliases — keep existing components working during migration.
     Remove each alias as its screen is rebuilt with --spacing-* tokens. */
  --space-1: var(--spacing-xs);
  --space-2: var(--spacing-sm);
  --space-3: var(--spacing-md);
  --space-4: var(--spacing-lg);
  --space-5: var(--spacing-xl);
  --radius:  0px;  /* no border radius in this design */
}

/* ── Text utility classes ────────────────────────────────────────────────────
   One class per Figma text style. Each bundles font-family, size, line-height,
   weight, and style. Figma "pt" maps 1:1 to CSS px for screen.

   Naming: t-{family}-{size}  /  t-{family}-{variant}-{size}
   ─────────────────────────────────────────────────────────────────────────── */

/* All Karla styles share letter-spacing: 0.05em (confirmed in Figma) */
[class*="t-sans"] {
  letter-spacing: 0.05em;
}

/* EB Garamond — Regular */
.t-serif-12 { font-family: var(--font-serif); font-size: 12px; line-height: normal; font-weight: 400; }
.t-serif-14 { font-family: var(--font-serif); font-size: 14px; line-height: normal; font-weight: 400; }
.t-serif-16 { font-family: var(--font-serif); font-size: 16px; line-height: normal; font-weight: 400; }
.t-serif-18 { font-family: var(--font-serif); font-size: 18px; line-height: normal; font-weight: 400; }
.t-serif-20 { font-family: var(--font-serif); font-size: 20px; line-height: 28px;   font-weight: 400; }
.t-serif-24 { font-family: var(--font-serif); font-size: 24px; line-height: normal; font-weight: 400; }
.t-serif-30 { font-family: var(--font-serif); font-size: 30px; line-height: 36px;   font-weight: 400; }

/* EB Garamond — Italic */
.t-serif-italic-16 { font-family: var(--font-serif); font-size: 16px; line-height: normal; font-weight: 400; font-style: italic; }
.t-serif-italic-18 { font-family: var(--font-serif); font-size: 18px; line-height: 24px;   font-weight: 400; font-style: italic; }
.t-serif-italic-20 { font-family: var(--font-serif); font-size: 20px; line-height: 25px;   font-weight: 400; font-style: italic; }
.t-serif-italic-24 { font-family: var(--font-serif); font-size: 24px; line-height: 32px;   font-weight: 400; font-style: italic; }
.t-serif-italic-30 { font-family: var(--font-serif); font-size: 30px; line-height: 40px;   font-weight: 400; font-style: italic; }
.t-serif-italic-36 { font-family: var(--font-serif); font-size: 36px; line-height: 36px;   font-weight: 400; font-style: italic; }

/* EB Garamond — Small Caps */
.t-serif-sc-18 { font-family: var(--font-serif); font-size: 18px; line-height: 24px; font-weight: 400; font-variant: small-caps; }
.t-serif-sc-20 { font-family: var(--font-serif); font-size: 20px; line-height: 24px; font-weight: 400; font-variant: small-caps; }

/* Karla — Regular (400) */
.t-sans-12 { font-family: var(--font-sans); font-size: 12px; line-height: 14px; font-weight: 400; }
.t-sans-14 { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.t-sans-16 { font-family: var(--font-sans); font-size: 16px; line-height: 18px; font-weight: 400; }
.t-sans-18 { font-family: var(--font-sans); font-size: 18px; line-height: 20px; font-weight: 400; }
.t-sans-20 { font-family: var(--font-sans); font-size: 20px; line-height: 24px; font-weight: 400; }
.t-sans-24 { font-family: var(--font-sans); font-size: 24px; line-height: 28px; font-weight: 400; }
.t-sans-30 { font-family: var(--font-sans); font-size: 30px; line-height: 36px; font-weight: 400; }

/* Karla — SemiBold (600) */
.t-sans-sb-16       { font-family: var(--font-sans); font-size: 16px; line-height: 18px; font-weight: 600; }
.t-sans-sb-16-loose { font-family: var(--font-sans); font-size: 16px; line-height: 25px; font-weight: 600; }
.t-sans-sb-18       { font-family: var(--font-sans); font-size: 18px; line-height: 20px; font-weight: 600; }
.t-sans-sb-20       { font-family: var(--font-sans); font-size: 20px; line-height: 20px; font-weight: 600; }

/* Karla — Bold (700) */
.t-sans-bold-14 { font-family: var(--font-sans); font-size: 14px; line-height: 25px; font-weight: 700; }
.t-sans-bold-18 { font-family: var(--font-sans); font-size: 18px; line-height: 20px; font-weight: 700; }