/* ============================================================
   Growth Science Capital — Colors & Type
   ============================================================
   Human-first, AI-enabled. A darker, professional foundation
   with warm gold accents and organic, lighter "stage" surfaces
   for content. Sans-only — no serifs.
   ============================================================ */

/* ---------- Webfonts ---------- */
/* Display + UI: Sora (geometric, modern, slightly humanist)
   Body & UI: Inter Tight (highly legible workhorse, tighter than Inter)
   Mono: JetBrains Mono (data, code, ticker treatments) */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Jost:wght@300;400;500;600;700&display=swap');

:root {
  /* ============================================================
     COLOR — Brand
     ============================================================ */

  /* Gold — sampled from the logo gradient. Goes from a deeper
     antique bronze to a soft champagne highlight. Use sparingly. */
  --gold-900: #5a4115;   /* deep bronze, hover/press on gold buttons */
  --gold-800: #7a5a22;   /* antique gold, dark gold accents on light bg */
  --gold-700: #9a7530;   /* mid bronze */
  --gold-600: #b8903f;   /* primary "GSC gold" — readable on dark */
  --gold-500: #c9a35a;   /* the brand gold — main accent */
  --gold-400: #d8b974;   /* warm champagne */
  --gold-300: #e6cf95;   /* highlight gold — illuminated edge */
  --gold-200: #f0dfb5;   /* pale champagne — soft surfaces */
  --gold-100: #f8eed6;   /* faintest gold tint — page wash */

  /* Brand gold gradient — directly from the logo */
  --gold-gradient: linear-gradient(135deg, #8a6a2b 0%, #c9a35a 35%, #e6cf95 55%, #b8903f 80%, #7a5a22 100%);
  --gold-gradient-soft: linear-gradient(135deg, #b8903f 0%, #d8b974 50%, #9a7530 100%);
  --gold-sheen: linear-gradient(180deg, #e6cf95 0%, #c9a35a 50%, #8a6a2b 100%);

  /* ============================================================
     COLOR — Ink (the dark foundation)
     ============================================================ */
  /* Deep, slightly warm near-blacks. Not pure #000 — we want
     warmth that pairs with gold and feels human, not clinical. */
  --ink-1000: #07080a;   /* deepest — page background on dark mode */
  --ink-950:  #0c0e11;   /* default dark surface */
  --ink-900:  #131619;   /* raised surface on dark */
  --ink-850:  #1a1e22;   /* card on dark */
  --ink-800:  #21262b;   /* hover card on dark */
  --ink-700:  #2c3137;   /* divider on dark */
  --ink-600:  #3b4148;   /* heavy border on dark */
  --ink-500:  #525960;   /* tertiary text on dark */
  --ink-400:  #767e86;   /* secondary text on dark */
  --ink-300:  #a0a8b0;   /* muted body on dark */
  --ink-200:  #c8cdd2;   /* body on dark */
  --ink-100:  #e6e9ec;   /* high-emphasis on dark */
  --ink-50:   #f4f5f6;   /* near-white for headings on dark */

  /* ============================================================
     COLOR — Bone (the lighter, organic stage)
     ============================================================ */
  /* Warm off-whites & paper tones for "lighter sections with
     organic aspects". Not cold grey — slight warm cast. */
  --bone-50:  #faf8f3;   /* page wash, warmest */
  --bone-100: #f4f1ea;   /* soft paper */
  --bone-200: #ebe6dc;   /* card on light */
  --bone-300: #ddd6c8;   /* subtle border on light */
  --bone-400: #b8b0a0;   /* hairline / divider on light */
  --bone-500: #8a8275;   /* tertiary text on light */
  --bone-600: #5e574c;   /* secondary text on light */
  --bone-700: #3d382f;   /* body on light */
  --bone-800: #25221c;   /* heading on light */
  --bone-900: #15140f;   /* near-black warm */

  /* ============================================================
     COLOR — Semantic
     ============================================================ */
  /* Muted, sophisticated — never neon. Earth-tuned. */
  --success-600: #4f7a52;   /* moss */
  --success-500: #6b9670;
  --success-100: #e3ece3;

  --warning-600: #b07a2a;   /* amber, harmonizes with gold */
  --warning-500: #d49845;
  --warning-100: #f4e7d0;

  --danger-600:  #9a3b2f;   /* burnt sienna */
  --danger-500:  #c25845;
  --danger-100:  #f1d9d2;

  --info-600:    #3a6680;   /* slate teal */
  --info-500:    #5587a4;
  --info-100:    #d8e3eb;

  /* ============================================================
     COLOR — Semantic tokens (use these in product code)
     ============================================================ */
  /* Default theme: DARK (the brand's primary mode). */
  --bg:           var(--ink-1000);
  --bg-raised:   var(--ink-900);
  --bg-card:     var(--ink-850);
  --bg-hover:    var(--ink-800);
  --bg-inverse:  var(--bone-50);

  --fg-1:        var(--ink-50);    /* primary text / headings */
  --fg-2:        var(--ink-200);   /* body */
  --fg-3:        var(--ink-400);   /* secondary / metadata */
  --fg-4:        var(--ink-500);   /* tertiary / labels */
  --fg-disabled: var(--ink-600);
  --fg-on-gold:  var(--ink-1000);  /* text sitting on gold */
  --fg-inverse:  var(--bone-800);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-1:      rgba(255, 255, 255, 0.10);
  --border-2:      rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.24);
  --border-gold:   var(--gold-600);

  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-400);
  --accent-press:  var(--gold-600);
  --accent-soft:   rgba(201, 163, 90, 0.12);

  --focus-ring:    var(--gold-400);

  /* ============================================================
     ELEVATION (shadows) — warm, not pure black
     ============================================================ */
  --shadow-xs:  0 1px 2px rgba(7, 8, 10, 0.40);
  --shadow-sm:  0 2px 6px rgba(7, 8, 10, 0.45), 0 1px 2px rgba(7, 8, 10, 0.30);
  --shadow-md:  0 8px 20px rgba(7, 8, 10, 0.45), 0 2px 6px rgba(7, 8, 10, 0.30);
  --shadow-lg:  0 18px 40px rgba(7, 8, 10, 0.55), 0 4px 12px rgba(7, 8, 10, 0.35);
  --shadow-xl:  0 32px 80px rgba(7, 8, 10, 0.65), 0 8px 20px rgba(7, 8, 10, 0.40);
  --shadow-gold-glow: 0 0 0 1px rgba(201, 163, 90, 0.35), 0 8px 28px rgba(184, 144, 63, 0.18);

  /* On light surfaces (bone), shadows soften and warm */
  --shadow-bone-sm: 0 1px 2px rgba(61, 56, 47, 0.06), 0 2px 6px rgba(61, 56, 47, 0.04);
  --shadow-bone-md: 0 6px 18px rgba(61, 56, 47, 0.08), 0 2px 6px rgba(61, 56, 47, 0.05);
  --shadow-bone-lg: 0 18px 40px rgba(61, 56, 47, 0.10), 0 4px 12px rgba(61, 56, 47, 0.06);

  /* Inner shadows — for inset surfaces (e.g. organic ridge edges) */
  --shadow-inner:    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-inner-lg: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.30);

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* ============================================================
     SPACING SCALE (4px base, modular)
     ============================================================ */
  --space-0:  0;
  --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:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --font-display: 'Sora', 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    'Inter Tight', 'Sora', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ============================================================
     TYPOGRAPHY — weights
     ============================================================ */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ============================================================
     TYPOGRAPHY — sizes (fluid optional via clamp)
     ============================================================ */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  64px;
  --text-7xl:  84px;
  --text-8xl:  112px;

  /* ============================================================
     TYPOGRAPHY — line heights
     ============================================================ */
  --lh-tight:   1.05;
  --lh-snug:    1.20;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;
  --lh-loose:   1.8;

  /* ============================================================
     TYPOGRAPHY — letter spacing
     ============================================================ */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.10em;   /* eyebrows */
  --tracking-widest:   0.18em;   /* "GROWTH SCIENCE" lockup */

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-slower: 520ms;

  /* ============================================================
     LAYERS
     ============================================================ */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;
}

/* ============================================================
   LIGHT THEME — apply via `.theme-light` or a section wrapper
   The brand defaults dark; light is the "lighter, organic stage"
   the brand also uses (paper / bone surfaces).
   ============================================================ */
.theme-light {
  --bg:          var(--bone-50);
  --bg-raised:   #fffefb;
  --bg-card:     #ffffff;
  --bg-hover:    var(--bone-100);
  --bg-inverse:  var(--ink-1000);

  --fg-1:        var(--bone-900);
  --fg-2:        var(--bone-700);
  --fg-3:        var(--bone-600);
  --fg-4:        var(--bone-500);
  --fg-disabled: var(--bone-400);
  --fg-on-gold:  var(--ink-1000);
  --fg-inverse:  var(--ink-50);

  --border-subtle: rgba(15, 14, 11, 0.05);
  --border-1:      rgba(15, 14, 11, 0.08);
  --border-2:      rgba(15, 14, 11, 0.14);
  --border-strong: rgba(15, 14, 11, 0.22);

  --accent:        var(--gold-700);
  --accent-hover:  var(--gold-600);
  --accent-press:  var(--gold-800);
  --accent-soft:   rgba(154, 117, 48, 0.10);

  --shadow-xs:  var(--shadow-bone-sm);
  --shadow-sm:  var(--shadow-bone-sm);
  --shadow-md:  var(--shadow-bone-md);
  --shadow-lg:  var(--shadow-bone-lg);
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply via class or @extend
   ============================================================ */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.display-1, h1.display, .h-display {
  font-family: var(--font-display);
  font-size: clamp(var(--text-5xl), 7vw, var(--text-8xl));
  font-weight: var(--weight-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.display-2 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 5.5vw, var(--text-7xl));
  font-weight: var(--weight-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h6, .h6 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  letter-spacing: var(--tracking-normal);
}

/* The "GROWTH SCIENCE" lockup style — for callouts, section heads */
.lockup {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Gold text — use for one or two words at most, never paragraphs */
.gold-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

/* Selection */
::selection {
  background: var(--gold-500);
  color: var(--ink-1000);
}