/* ============================================================
   OakYield AI — Colors & Type Foundations
   Deep oak green + yield gold. Premium fintech / wealth copilot.
   Light + dark themes. All tokens are CSS custom properties.
   ============================================================ */

/* ---- Webfonts (loaded from Google Fonts CDN) ----
   Display serif : Spectral   (editorial, trustworthy, private-banking gravitas)
   UI sans       : Hanken Grotesk (warm humanist grotesque, great for data UI)
   Mono / figures: IBM Plex Mono (tabular financial figures, code)
   NOTE: served via CDN — see README "Fonts" if you need local .ttf files. */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================
   1. RAW COLOR SCALES  (brand-anchored ramps)
   ============================================================ */
:root {
  /* Oak Green — primary brand (700 = #1e4d2b, the logo green) */
  --oak-50:  #eff6f1;
  --oak-100: #d9ece0;
  --oak-200: #b3d8bd;
  --oak-300: #7fbb8f;
  --oak-400: #4f9a63;
  --oak-500: #357a46;
  --oak-600: #2a6238;
  --oak-700: #1e4d2b;   /* BRAND PRIMARY */
  --oak-800: #173d22;
  --oak-900: #122f1b;
  --oak-950: #0c2013;

  /* Yield Gold — secondary brand (600 = #c9a227, the logo gold) */
  --gold-50:  #fdf9ef;
  --gold-100: #f9f1de;
  --gold-200: #f3e5c2;
  --gold-300: #ebd494;
  --gold-400: #e0c266;
  --gold-500: #d4b13f;
  --gold-600: #c9a227;   /* BRAND GOLD */
  --gold-700: #a8851f;
  --gold-800: #8a6e18;
  --gold-900: #6b5512;
  --gold-950: #4a3a0c;

  /* Stone — warm neutral (faint green-gold cast, never cold grey) */
  --stone-0:   #ffffff;
  --stone-50:  #faf9f6;
  --stone-100: #f4f2ec;
  --stone-200: #e8e4da;
  --stone-300: #d6d0c2;
  --stone-400: #b3ab98;
  --stone-500: #8a8270;
  --stone-600: #6b6456;
  --stone-700: #4f4a40;
  --stone-800: #35322b;
  --stone-900: #211f1a;
  --stone-950: #14130f;

  /* Functional hues (kept distinct from brand green/gold) */
  --gain-light:  #1f9d57;  /* portfolio up   */
  --gain-dark:   #34c77b;
  --loss-light:  #c0362c;  /* portfolio down */
  --loss-dark:   #f06a60;
  --warn-light:  #b87514;  /* caution (amber, not brand gold) */
  --warn-dark:   #e0a23c;
  --info-light:  #2b6aa8;  /* neutral system info */
  --info-dark:   #5b9bd6;
}

/* ============================================================
   2. SEMANTIC TOKENS — LIGHT THEME (default)
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg:          var(--stone-50);   /* app canvas (warm ivory) */
  --surface-1:   var(--stone-0);    /* cards / panels */
  --surface-2:   var(--stone-100);  /* inset / subtle fill */
  --surface-3:   var(--stone-200);  /* deeper inset */
  --overlay:     rgba(20, 19, 15, 0.45);

  /* Foreground / text */
  --fg1: var(--stone-900);          /* primary text */
  --fg2: var(--stone-700);          /* secondary text */
  --fg3: var(--stone-500);          /* muted / captions */
  --fg-on-accent: var(--stone-50);  /* text on green/gold */

  /* Brand roles */
  --primary:        var(--oak-700);
  --primary-hover:  var(--oak-800);
  --primary-press:  var(--oak-900);
  --primary-soft:   var(--oak-50);   /* tinted bg behind primary content */
  --primary-border: var(--oak-100);
  --accent:         var(--gold-600); /* gold highlights, never large fills */
  --accent-hover:   var(--gold-700);
  --accent-soft:    var(--gold-100);

  /* Lines & borders */
  --border:        var(--stone-200);
  --border-strong: var(--stone-300);
  --ring:          color-mix(in oklch, var(--oak-700) 35%, transparent);

  /* Functional */
  --gain: var(--gain-light);
  --loss: var(--loss-light);
  --warn: var(--warn-light);
  --info: var(--info-light);
  --gain-soft: #e3f4ea;
  --loss-soft: #fbe7e5;

  /* Elevation (soft, warm-tinted — never pure black) */
  --shadow-xs: 0 1px 2px rgba(28, 38, 28, 0.06);
  --shadow-sm: 0 1px 3px rgba(28, 38, 28, 0.08), 0 1px 2px rgba(28, 38, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 38, 28, 0.08), 0 2px 4px rgba(28, 38, 28, 0.05);
  --shadow-lg: 0 12px 32px rgba(20, 30, 20, 0.12), 0 4px 8px rgba(20, 30, 20, 0.06);
  --shadow-xl: 0 24px 64px rgba(16, 26, 16, 0.18);

  --logo-ink: var(--oak-700);   /* wordmark color, full-color lockup */
}

/* ============================================================
   3. SEMANTIC TOKENS — DARK THEME
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #0c1410;             /* deep green-black canvas */
  --surface-1: #122019;            /* cards */
  --surface-2: #16271d;            /* inset */
  --surface-3: #1d3326;            /* deeper */
  --overlay:   rgba(0, 0, 0, 0.6);

  --fg1: #f1f3ee;
  --fg2: #c3ccc2;
  --fg3: #8b978a;
  --fg-on-accent: #0c1410;

  --primary:        var(--oak-400);  /* lifts off dark bg */
  --primary-hover:  var(--oak-300);
  --primary-press:  var(--oak-200);
  --primary-soft:   #16291d;
  --primary-border: #234a30;
  --accent:         var(--gold-500);
  --accent-hover:   var(--gold-400);
  --accent-soft:    #2a230f;

  --border:        #21362a;
  --border-strong: #2d4736;
  --ring:          color-mix(in oklch, var(--oak-400) 45%, transparent);

  --gain: var(--gain-dark);
  --loss: var(--loss-dark);
  --warn: var(--warn-dark);
  --info: var(--info-dark);
  --gain-soft: #11281c;
  --loss-soft: #2e1715;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.65);

  --logo-ink: var(--stone-50);
}

/* ============================================================
   4. TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans:  "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (1.250 major-third, 16px base) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  1.875rem;  /* 30 */
  --text-3xl:  2.375rem;  /* 38 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  3.75rem;   /* 60 */

  --leading-tight: 1.12;
  --leading-snug:  1.28;
  --leading-normal:1.55;
  --leading-relaxed:1.72;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* eyebrow / overline */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Radii — calm, slightly rounded; never pill-everything */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* Spacing (4px base) */
  --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;
}

/* ============================================================
   5. SEMANTIC TEXT CLASSES (optional helpers)
   ============================================================ */
.oy-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}
.oy-display {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.oy-h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.oy-h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
.oy-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.oy-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.oy-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.oy-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg3);
}
.oy-mono, .oy-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
.oy-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}