/* ==========================================================================
   onSpark — Colors & Type
   Source: Light Brandbook – onSpark (Rev 2), 2025 · Lil Horse Inc.
   ========================================================================== */

/* ---------- Fonts ----------
   Primary: Outfit (Google Fonts). Covers the full Outfit weight range.
   Body uses 400–500, display headlines use 600–800.
*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ================================================================
     COLOR TOKENS
     ================================================================ */

  /* Brand (from brandbook §16)
     Golden gradient: #BA8E35 → #E4D38B → #BA8E35 on navy #06101C  */
  --color-gold-deep:   #BA8E35;  /* Deep gold — primary brand */
  --color-gold:        #CFA24A;  /* Derived mid — hover / accents */
  --color-gold-light:  #E4D38B;  /* Light gold — highlight end of gradient */
  --color-gold-pale:   #F4E9C2;  /* Derived wash — soft fills */
  --color-ink:         #06101C;  /* Navy ink — primary dark */
  --color-ink-2:       #0C1A2B;  /* Slightly lighter ink for panels */
  --color-ink-3:       #132338;  /* Raised surface on dark */

  /* The signature brand gradient — use sparingly, for hero moments */
  --brand-gradient: linear-gradient(90deg, #BA8E35 0%, #E4D38B 50%, #BA8E35 100%);
  --brand-gradient-radial: radial-gradient(circle at 30% 30%, #E4D38B 0%, #BA8E35 45%, #06101C 100%);

  /* Neutrals — warm-neutral scale that sits naturally next to gold */
  --color-white:       #FFFFFF;
  --color-paper:       #FAF7F0;  /* Warm off-white — default page bg */
  --color-paper-2:     #F3EEE2;  /* Card / section alt */
  --color-sand:        #E7DFCE;  /* Dividers, subtle fills */
  --color-stone:       #B8B0A1;  /* Muted type on light */
  --color-slate:       #6B7280;  /* Secondary text */
  --color-graphite:    #2B2F36;  /* Body text on light */
  --color-black:       #000000;

  /* Semantic — derived, minimal palette */
  --color-success:     #3F8F5F;
  --color-warning:     #C98A1A;
  --color-danger:      #B23A48;
  --color-info:        #3A6DB2;

  /* ----- Semantic aliases (use these in UI code) ----- */
  --bg:              var(--color-paper);
  --bg-elevated:     var(--color-white);
  --bg-muted:        var(--color-paper-2);
  --bg-inverse:      var(--color-ink);

  --fg1:             var(--color-ink);       /* Primary text */
  --fg2:             var(--color-graphite);  /* Body text */
  --fg3:             var(--color-slate);     /* Secondary text */
  --fg-muted:        var(--color-stone);     /* Disabled / tertiary */
  --fg-inverse:      var(--color-paper);     /* Text on dark */
  --fg-brand:        var(--color-gold-deep);

  --border:          var(--color-sand);
  --border-strong:   #D9CFB8;
  --border-inverse:  rgba(228, 211, 139, 0.18);

  --accent:          var(--color-gold-deep);
  --accent-hover:    #A87D28;
  --accent-soft:     var(--color-gold-pale);

  /* ================================================================
     TYPE TOKENS
     ================================================================ */

  --font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;  /* same family, heavier weights */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Scale — fluid-ish, 1.25 ratio */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;
  --fs-6xl:   84px;
  --fs-display: 112px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;

  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.16em;  /* For the "ALL CAPS" tagline endings */

  /* ================================================================
     SHAPE / SPACE / ELEVATION
     ================================================================ */

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  --space-0: 0;
  --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;
  --space-24: 96px;
  --space-32: 128px;

  /* Shadows — soft, warm, never blue */
  --shadow-xs:  0 1px 2px rgba(12, 26, 43, 0.06);
  --shadow-sm:  0 2px 6px rgba(12, 26, 43, 0.06), 0 1px 2px rgba(12, 26, 43, 0.04);
  --shadow-md:  0 8px 20px rgba(12, 26, 43, 0.08), 0 2px 4px rgba(12, 26, 43, 0.04);
  --shadow-lg:  0 18px 40px rgba(12, 26, 43, 0.10), 0 4px 10px rgba(12, 26, 43, 0.04);
  --shadow-xl:  0 30px 60px rgba(12, 26, 43, 0.14), 0 8px 18px rgba(12, 26, 43, 0.06);
  --shadow-gold: 0 12px 40px rgba(186, 142, 53, 0.25);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 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: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ==========================================================================
   SEMANTIC TYPE STYLES
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--fg1);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display,
.h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

h3, .h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

h4, .h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

h5, .h5 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  font-weight: var(--fw-regular);
}

small, .small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg3);
}

.caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg3);
  letter-spacing: var(--tracking-wide);
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-brand);
}

/* Signature brandbook tagline style:
   "The world is changing" (sentence case) + "SO SHOULD YOU." (all caps) */
.tagline-cap {
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.925em;
}

/* Gradient-text utility — use on key headlines, never as body */
.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtle dark-surface inversion */
.on-ink {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4, .on-ink h5 { color: var(--color-paper); }
.on-ink p, .on-ink .body { color: rgba(250, 247, 240, 0.78); }