/* 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);
  --color-overlay:      rgba(255, 255, 255, 0.9); /* modal/dialog/sheet backdrops */

  /* Text */
  --color-ink:       var(--900-gray);  /* main text */
  --color-ink-muted: var(--600-gray);  /* subdued / secondary */
  --color-ink-soft:  var(--400-gray);  /* de-emphasized secondary, between muted and faint */
  --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;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-5xl: 96px;
  --spacing-6xl: 128px;
  --spacing-7xl: 192px;

  /* 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;

  /* Fixed height for every hero-styled card (.activity-section--hero,
     .join-card — app.css), shared so the activity page and the join
     carousel size their card identically instead of each deriving it from
     viewport height or sibling content. 584px is the fullest hero card's
     own natural (unstretched) content height, measured by rendering every
     row at once — illustration, a multi-time "+N" badge, location with an
     address line, a notes line, .activity-hero-spacer at its 64px floor,
     and a populated status/actions pair — and reading its rendered height
     (583.5px, rounded up). Recompute (render that same fullest-card
     combination unconstrained and read its height) if any row's own
     height, margin, or the spacer's floor changes — as they did earlier
     this session (.activity-hero-when's gap 27px→32px, the spacer's floor
     64px→80px→back to 64px). */
  --hero-card-h: 584px;

  /* 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);
  --space-6: var(--spacing-2xl);
  --space-7: var(--spacing-3xl);
  --space-8: var(--spacing-4xl);
  --space-9: var(--spacing-5xl);
  --space-10: var(--spacing-6xl);
  --space-11: var(--spacing-7xl);
  --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 — SemiBold (600) */
.t-serif-sb-20 { font-family: var(--font-serif); font-size: 20px; line-height: 28px; font-weight: 600; }

/* 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; }
.t-serif-italic-36-loose { font-family: var(--font-serif); font-size: 36px; line-height: 44px; font-weight: 400; font-style: italic; }

/* 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: 20px; 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-22 { font-family: var(--font-sans); font-size: 22px; line-height: 26px; 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; }

/* 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; }
.t-sans-bold-24 { font-family: var(--font-sans); font-size: 24px; line-height: 28px; font-weight: 700; }