/* ==========================================================================
   WealthS marketing — base.css
   Design tokens (mirrored from src/shared/theme/tokens.ts), reset, typography.
   Light is the default; dark applies via prefers-color-scheme OR [data-theme].
   ========================================================================== */

:root {
  /* ---- Light palette (Option A — Modern Fintech) ---- */
  --canvas:           #F7F8FA;
  --surface:          #FFFFFF;
  --surface-elevated: #F1F3F6;
  --surface-sunken:   #ECEEF1;
  --ink:              #0F1419;
  --ink-muted:        #5C6470;
  --ink-subtle:       #8B939F;
  --ink-inverse:      #FFFFFF;
  --accent:           #2D7A5A;
  --accent-ink:       #FFFFFF;
  --accent-soft:      #E4F1EA;
  --accent-soft-border:#C9E2D5;
  --positive:         #2D7A5A;
  --positive-soft:    #E4F1EA;
  --negative:         #C0463E;
  --negative-soft:    #FBE5E3;
  --warning:          #B07A1F;
  --warning-soft:     #FBEFD9;
  --info:             #3A5DBF;
  --info-soft:        #E3E9F8;
  --rule:             #E5E8EC;
  --overlay:          rgba(15, 20, 25, 0.45);

  /* ---- Brand constants (theme-independent) ---- */
  --gold:             #FBBF24;
  --emerald-1:        #10B981;
  --emerald-2:        #047857;
  --violet-1:         #6E45E2;
  --violet-2:         #E14ECA;
  --grad-emerald: linear-gradient(135deg, #10B981 0%, #047857 100%);
  --grad-splits:  linear-gradient(135deg, #6E45E2 0%, #E14ECA 100%);

  /* Splits accent (light) — used on splits.html and the Splits section */
  --splits-accent:      #6E45E2;
  --splits-accent-soft: #EFE8FF;
  --splits-accent-border:#DBCBFF;

  /* ---- Scales ---- */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 12px; --space-lg: 16px;
  --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 72px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;

  --shadow-low:  0 1px 3px rgba(15,20,25,.05);
  --shadow-mid:  0 6px 18px rgba(15,20,25,.08);
  --shadow-high: 0 18px 48px rgba(15,20,25,.14);

  --motion-fast: 150ms; --motion-base: 220ms; --motion-slow: 320ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  --maxw: 1120px;

  /* color-scheme hint for native form controls / scrollbars */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:           #0B0D10;
    --surface:          #15181D;
    --surface-elevated: #1C1F25;
    --surface-sunken:   #20242B;
    --ink:              #F4F5F7;
    --ink-muted:        #9099A6;
    --ink-subtle:       #6B7280;
    --ink-inverse:      #0B0D10;
    --accent:           #3FB07F;
    --accent-ink:       #07120D;
    --accent-soft:      #1B2C24;
    --accent-soft-border:#25382E;
    --positive:         #3FB07F;
    --positive-soft:    #1B2C24;
    --negative:         #F47267;
    --negative-soft:    #2F1D1B;
    --warning:          #E0A848;
    --warning-soft:     #2B2316;
    --info:             #7FA0EE;
    --info-soft:        #1A2336;
    --rule:             #232830;
    --overlay:          rgba(0,0,0,.55);
    --splits-accent:      #8B6BE8;
    --splits-accent-soft: #251E3A;
    --splits-accent-border:#34294E;
    --shadow-low:  0 1px 3px rgba(0,0,0,.4);
    --shadow-mid:  0 6px 18px rgba(0,0,0,.5);
    --shadow-high: 0 18px 48px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

/* Manual override wins over the media query */
[data-theme="dark"] {
  --canvas:           #0B0D10;
  --surface:          #15181D;
  --surface-elevated: #1C1F25;
  --surface-sunken:   #20242B;
  --ink:              #F4F5F7;
  --ink-muted:        #9099A6;
  --ink-subtle:       #6B7280;
  --ink-inverse:      #0B0D10;
  --accent:           #3FB07F;
  --accent-ink:       #07120D;
  --accent-soft:      #1B2C24;
  --accent-soft-border:#25382E;
  --positive:         #3FB07F;
  --positive-soft:    #1B2C24;
  --negative:         #F47267;
  --negative-soft:    #2F1D1B;
  --warning:          #E0A848;
  --warning-soft:     #2B2316;
  --info:             #7FA0EE;
  --info-soft:        #1A2336;
  --rule:             #232830;
  --overlay:          rgba(0,0,0,.55);
  --splits-accent:      #8B6BE8;
  --splits-accent-soft: #251E3A;
  --splits-accent-border:#34294E;
  --shadow-low:  0 1px 3px rgba(0,0,0,.4);
  --shadow-mid:  0 6px 18px rgba(0,0,0,.5);
  --shadow-high: 0 18px 48px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--motion-base) var(--ease), color var(--motion-base) var(--ease);
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---- Typography helpers ---- */
.display { font-size: clamp(36px, 6vw, 60px); font-weight: 700; letter-spacing: -1.5px; line-height: 1.04; }
.h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.8px; line-height: 1.1; }
.h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.4px; line-height: 1.15; }
.h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; }
.lead { font-size: clamp(16px, 2.2vw, 20px); color: var(--ink-muted); line-height: 1.55; }
.overline {
  font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--accent);
}
.muted { color: var(--ink-muted); }
.tabnum { font-variant-numeric: tabular-nums; }

/* ---- Layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: clamp(56px, 9vw, 104px); }
.section--tight { padding-block: clamp(40px, 6vw, 64px); }
.center { text-align: center; }
.stack-sm > * + * { margin-top: var(--space-md); }
.stack > * + * { margin-top: var(--space-lg); }
.hidden { display: none !important; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  padding: 5px 12px; border-radius: var(--radius-pill);
}

.section-head { max-width: 680px; margin-inline: auto; }
.section-head.left { margin-inline: 0; }