/* ============================================================================
   Burgondy — Design Tokens (single source of truth)                0.1.197
   ----------------------------------------------------------------------------
   Anchored on the APP's palette (the agreed source of truth). Both the app
   (/app/) and the marketing site (root index.html + about/privacy/terms)
   <link> this file BEFORE their own CSS.

   Backgrounds are intentionally per-surface: the app shell stays a solid --bg;
   every marketing page AND the in-app plans overlay share --bg-canvas, so the
   plans screen reads as the same surface as the homepage in both places
   (0.1.433 — the old --bg -> --bg-bottom homepage gradient was retired then,
   and --bg-bottom deleted with it; recover from git if ever wanted). Everything
   else — brand color, borders, ink, radius, shadow, spacing, type — is shared.

   MIGRATION NOTE (0.1.197): this file is live, but the app's styles.css still
   defines its own :root, so where names overlap the app values still win for
   now (e.g. --muted stays #6b7280 app-wide until the rollout). The NEW tokens
   here (--radius-btn/-card, --shadow-card, spacing, type) are already in use by
   the migrated buttons + cards. Rolling the rest across is the next step.
   ============================================================================ */
:root {
  /* ── Brand & neutrals ────────────────────────────────────────────── */
  --burgundy:       #611A1E;   /* primary */
  --mustard:        #D29A41;   /* accent; "Most popular" tag. 0.1.443 - the app-scoped
                                  copy was deleted in 0.1.427 as orphaned, and the
                                  homepage kept its own --hp-mustard. The plans content
                                  is shared by the app AND pricing.html, so it needs a
                                  value both can see. --hp-mustard now aliases this. */
  --mustard-lt:     #D9BE93;   /* 0.1.456: soft mustard, fills the selected step-chip
                                  circle. Sampled from the owner's target and NOT a tint
                                  of --mustard (no single alpha over white reproduces it),
                                  so it is its own value, named like --green-lt. */
  --burgundy-hover: #4d1417;
  --bg:             #F9F6F7;   /* app solid background */
  --bg-canvas:      #F2F0EB;   /* marketing canvas + in-app plans overlay (0.1.433) */
  --white:          #ffffff;   /* cards / surfaces */
  --surface:        #f9fafb;   /* subtle raised surface */
  --hover:          #FAF6F7;
  --border:         #EFE4E8;   /* warm border */
  /* 0.1.444: the editorial column rules. Same values the homepage uses, moved here
     so the in-app plans overlay can draw them too -- --hp-rule/--hp-edge are scoped
     to .hp/.site-nav-host and are invisible from inside /app/. */
  --rule:           #DCD8D1;   /* hairline for the horizontal + vertical bars */
  --col-max:        1300px;    /* editorial column width; matches --hp-max */
  --col-edge:       max(0px, calc(50% - (var(--col-max) / 2)));
  --border2:        var(--border);   /* RETIRED (was #d1d5db) -> now = --border */
  --ink:            #111827;   /* primary text */
  --ink2:           #374151;   /* secondary text */
  --muted:          #6E6064;   /* warm brand muted */
  --dim:            #9ca3af;   /* faint text */

  /* ── Legacy aliases (existing app CSS still references these; migrate to --burgundy over time) ── */
  --teal:      var(--burgundy);
  --teal-lt:   #f5f5f5;
  --teal-mid:  #e5e5e5;
  --teal-dark: var(--burgundy-hover);
  --teal-dim:  #a0a0a0;

  /* ── Semantic ────────────────────────────────────────────────────── */
  --red:   #dc2626;  --red-lt:   #fef2f2;
  --green: #16a34a;  --green-lt: #f0fdf4;
  --amber: #d97706;  --amber-lt: #fffbeb;
  --blue:  #2563eb;  --blue-lt:  #eff6ff;

  /* ── Homepage-name aliases (so the shared home.css nav resolves in the app too) ── */
  --accent: var(--burgundy);
  --accent-hover: var(--burgundy-hover);
  --line: var(--border);
  --ink-soft: var(--ink2);
  --on-accent: var(--white);
  /* ── Button sizing (design-system) ── */
  --btn-h: 44px;
  --btn-fs: 14px;
  --btn-h-sm: 36px;
  --btn-fs-sm: 13px;
  --container-max: 1280px;
  --container-pad: 24px;
  --radius-md: 16px;

  /* ── Radius ──────────────────────────────────────────────────────── */
  --radius-card: 8px;
  --radius-btn:  4px;
  --radius-pill: 999px;
  --radius:      8px;    /* legacy alias = --radius-card */
  --radius-sm:   4px;    /* RETIRED (was 6px) -> button radius */

  /* ── Shadow (warm, burgundy-tinted) ──────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(70,32,42,.05);
  --shadow:      0 1px 3px rgba(70,32,42,.08), 0 1px 2px rgba(70,32,42,.06);
  --shadow-md:   0 4px 6px rgba(70,32,42,.07), 0 2px 4px rgba(70,32,42,.06);
  --shadow-lg:   0 14px 34px rgba(40,22,26,.20), 0 4px 10px rgba(40,22,26,.12);
  --shadow-card: 0 1px 2px rgba(70,32,42,.04), 0 8px 24px rgba(70,32,42,.06);

  /* ── Spacing scale (every value a multiple of 4px) ───────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 48px;  --space-10: 64px; --space-11: 80px; --space-12: 96px;
  --space-13: 128px;

  /* ── Type ────────────────────────────────────────────────────────── */
  --font-display: 'Prata', Georgia, serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  /* body / UI sizes (IBM Plex Sans) */
  --text-xs: 12px;  --text-sm: 13px;  --text-body: 14px;  --text-md: 16px;
  --text-lg: 20px;  --text-xl: 24px;
  /* display sizes (Prata) */
  --text-2xl: 32px; --text-3xl: 44px; --text-4xl: 56px;
}