/* ============================================================
   GOLDBAR DESIGN SYSTEM — Tokens
   Aesthetic: gold + cream on near-black, editorial
   Source of truth: source/goldy-ai/index.html (production app)
   Reconciled against the real :root block on 2026-05-17.
   ============================================================ */

/* --- Webfonts (Google Fonts substitutions; see README) --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- COLORS — Core ink (reconciled to production)
     The real product uses a neutral near-black `#0A0A0B` for bg
     and a slightly warmer `#16161A` for card surfaces. The warmer
     `#0F0D09` is kept as `--ink-paper` for brand-kit/print surfaces
     where the warm undertone reads better at large scale. */
  --ink-900: #0A0A0B;     /* page background — neutral near-black */
  --ink-paper: #0F0D09;   /* warm near-black — brand kit / print only */
  --ink-elev: #111113;    /* sidebar gradient stop, elevated bg */
  --ink-800: #16161A;     /* surface 1 — card, panel */
  --ink-750: #1C1C21;     /* surface 2 — hovered card */
  --ink-700: #22222A;     /* surface 3 — deep tab strip */
  --ink-600: #26262C;     /* hairline border on dark */
  --ink-550: #34343C;     /* strong border on dark, hover */
  --ink-500: #3a3530;     /* subtle dividers, muted brand caption */

  /* ---------- COLORS — Cream / paper ---------- */
  --cream-50:  #FBF8F1;   /* paper, light backgrounds */
  --cream-100: #F4EFE2;   /* primary fg on dark */
  --cream-200: #E8E1D0;   /* secondary fg on dark */
  --cream-300: #B8B2A4;   /* body copy on dark */

  /* ---------- COLORS — Stone / muted ---------- */
  --stone-500: #8A8378;   /* tertiary text, breakable URLs */
  --stone-600: #5C564E;   /* meta, captions on dark */
  --stone-700: #4a443d;
  --stone-800: #2a2620;

  /* ---------- COLORS — Gold (the brand) ---------- */
  --gold-50:  #FAF1D6;
  --gold-100: #EFD89A;
  --gold-200: #E2C57A;
  --gold-300: #D4B05E;
  --gold-400: #C9A961;    /* PRIMARY — brand gold, button fill, accent */
  --gold-500: #B8923D;    /* darker gold, hover */
  --gold-600: #9A7A2E;
  --gold-700: #6F5820;    /* deep antique */
  --gold-800: #4a3a18;

  /* Gold gradient — for the "minted" 3D look (logo-adjacent) */
  --gold-gradient: linear-gradient(180deg, #F5DC8A 0%, #D4AE4A 35%, #9A7626 65%, #E0BE5C 100%);
  --gold-gradient-soft: linear-gradient(180deg, #E2C57A 0%, #B8923D 100%);

  /* ---------- COLORS — Semantic (reconciled to production) ---------- */
  --success: #7FA67A;    /* var(--ok) in production source */
  --warning: #D4A567;    /* var(--warn) */
  --danger:  #C16E5A;    /* var(--danger) */
  --info:    #8BA9C5;    /* var(--info) */

  /* ---------- COLORS — Delegation zones (Goldy.ai)
     FIVE zones with directional pipeline flow:
        Genius (top rail, blue)
            ┗ stays. Don't delegate. Don't even consider it.
        Offload (danger red)
            → In flight: tasks you currently do but shouldn't
        Loading (warning amber)
            → In flight: SOP being built / training in progress
        Delegated (success green)
            ┗ Done: running without the founder. Only this zone
              counts toward the `hrs/week reclaimed` counter.
        Waste (bottom rail, muted)
            ┗ Drop entirely. Not worth delegating either.
     Map to the existing semantic tokens (not custom values) so the
     four pipeline states stay aligned with success/warning/danger. */
  --status-genius:    var(--info);       /* blue   */
  --status-offload:   var(--danger);     /* red    */
  --status-loading:   var(--warning);    /* amber  */
  --status-delegated: var(--success);    /* green  */
  --status-waste:     var(--stone-500);  /* muted  */

  /* ---------- COLORS — Functional ---------- */
  --bg:        var(--ink-900);
  --surface-1: var(--ink-800);
  --surface-2: #1C1C22;
  --border:    var(--ink-600);
  --hairline:  rgba(244, 239, 226, 0.08);

  --fg-1: var(--cream-100);   /* primary text */
  --fg-2: var(--cream-300);   /* secondary text */
  --fg-3: var(--stone-500);   /* tertiary text */
  --fg-4: var(--stone-600);   /* meta / captions */

  --accent:        var(--gold-400);
  --accent-hover:  var(--gold-500);
  --accent-ink:    var(--ink-700);  /* text-on-gold */

  /* ---------- TYPE — Families ---------- */
  --serif-display: 'Cormorant Garamond', 'Garamond', Georgia, serif;
  --sans:          'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono:          'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---------- TYPE — Scale (px-anchored) ---------- */
  --fs-display:  72px;
  --fs-h1:       46px;
  --fs-h2:       34px;
  --fs-h3:       26px;
  --fs-h4:       20px;
  --fs-body:     15px;
  --fs-small:    13px;
  --fs-caption:  11.5px;
  --fs-eyebrow:  11px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.18em;

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- RADII ---------- */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius:     14px;     /* canonical card radius in the product */
  --radius-lg:  18px;     /* brand-kit / email cards (matches Resend template) */
  --radius-xl:  24px;
  --radius-pill: 999px;   /* buttons */

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-3: 0 24px 60px rgba(0,0,0,0.5);
  --shadow-gold: 0 6px 24px rgba(201, 169, 97, 0.25);
  --inner-hairline: inset 0 1px 0 rgba(255,255,255,0.04);
  --inner-gold: inset 0 1px 0 rgba(255,235,180,0.5);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */
.t-display {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.t-h1 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.t-small {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.t-mono {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--fg-2);
}
.t-gold {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}