/* =============================================================
   Spreadnix — Design Tokens
   "Private trading desk": obsidian surfaces, champagne-gold
   primary, emerald reserved for profit. Dark is the brand
   experience; light is a warm ivory counterpart.
   ============================================================= */

:root {
  color-scheme: dark;

  /* ---- Ink scale (warm neutral ramp) ------------------------ */
  --c-ink-900: #f8f4ea;   /* brightest text in dark              */
  --c-ink-800: #ece5d4;
  --c-ink-700: #d8cdb4;
  --c-ink-600: #ada183;
  --c-ink-500: #8d8268;   /* muted body text                     */
  --c-ink-400: #67604b;
  --c-ink-300: #464030;
  --c-ink-200: #2f2a1f;
  --c-ink-100: #211d14;
  --c-ink-050: #14110b;
  --c-white:   #ffffff;

  /* Primary — champagne gold (private-desk luxury) */
  --c-primary-700: #f5d489;
  --c-primary-600: #e9bc55;
  --c-primary-500: #edc467;
  --c-primary-400: #f4d894;
  --c-primary-100: rgba(233, 188, 85, .13);

  /* Ink to set on top of gold / accent gradients */
  --on-primary: #221603;

  /* Steel — entry-tier accent (replaces the old indigo) */
  --c-steel-600: #a9bcd6;
  --c-steel-500: #b9c9df;
  --c-steel-100: rgba(169, 188, 214, .13);
  --grad-steel: linear-gradient(135deg, #d9e2ef 0%, #90a7c8 100%);

  /* Accent — emerald (markets / "up" / growth) */
  --c-accent-700: #4fe9a8;
  --c-accent-600: #2fe297;
  --c-accent-500: #3ce6a4;
  --c-accent-100: rgba(47, 226, 151, .13);

  /* Semantic */
  --c-up:   #2fe297;
  --c-down: #ff5d75;
  --c-warn: #ffb43d;
  --c-up-soft:   rgba(47, 226, 151, .13);
  --c-down-soft: rgba(255, 93, 117, .15);

  /* ---- Surfaces (smoked obsidian) ---------------------------- */
  --bg:           #0b0a08;
  --bg-2:         #0f0d0a;     /* secondary backdrop band         */
  --bg-elev:      #161310;     /* solid card fallback             */
  --bg-sunken:    #090806;
  --surface-line: rgba(244, 229, 199, .08);
  --surface-line-strong: rgba(244, 229, 199, .15);

  /* Glass layers (use with backdrop-filter) */
  --glass:        rgba(250, 240, 219, .04);
  --glass-2:      rgba(250, 240, 219, .065);
  --glass-border: rgba(244, 229, 199, .10);
  --glass-blur:   16px;

  --text:         #f3eee1;
  --text-muted:   #a99e85;
  --text-subtle:  #7c7460;

  /* ---- Gradients -------------------------------------------- */
  --grad-primary: linear-gradient(135deg, #f7dd9b 0%, #e8b649 48%, #c98f1f 100%);
  --grad-primary-soft: linear-gradient(135deg, #f5d489 0%, #e3a93c 100%);
  --grad-gold-deep: linear-gradient(135deg, #ffd277 0%, #ed8f1c 100%);
  --grad-emerald: linear-gradient(135deg, #3ce6a4 0%, #0fb8b0 100%);
  --grad-hero:
    radial-gradient(900px 520px at 82% -8%, rgba(233, 188, 85, .17), transparent 60%),
    radial-gradient(760px 480px at 2% 8%, rgba(47, 226, 151, .08), transparent 58%),
    radial-gradient(640px 640px at 50% 120%, rgba(201, 143, 31, .08), transparent 60%);
  --grad-sheen:   linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  --grad-text:    linear-gradient(120deg, #f6f1e3 0%, #cdbf9e 100%);

  /* ---- Typography ------------------------------------------- */
  --font-display: "Unbounded", "Onest", system-ui, sans-serif;
  --font-head: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.1rem;
  --fs-3xl:  2.7rem;
  --fs-4xl:  3.3rem;

  --lh-tight: 1.14;
  --lh-snug:  1.3;
  --lh-base:  1.65;

  /* ---- Spacing scale ---------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- Radius ----------------------------------------------- */
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadows + glows -------------------------------------- */
  --sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --sh-sm: 0 2px 10px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3);
  --sh-md: 0 14px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
  --sh-lg: 0 30px 70px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.4);
  --sh-glow:    0 10px 36px rgba(233, 188, 85, .32);
  --sh-glow-up: 0 12px 40px rgba(47, 226, 151, .30);
  --glow-ring:  0 0 0 1px rgba(244, 229, 199, .06), 0 0 40px rgba(233, 188, 85, .12);

  /* ---- Motion ----------------------------------------------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: 150ms;
  --t-med:  280ms;
  --t-slow: 520ms;

  /* ---- Layout ----------------------------------------------- */
  --container: 1200px;
  --header-h: 74px;
}

/* =============================================================
   Light theme — warm ivory, bronze accents, high contrast
   ============================================================= */
[data-theme="light"] {
  color-scheme: light;

  --c-ink-900: #1c160a;
  --c-ink-800: #2d2512;
  --c-ink-700: #45391f;
  --c-ink-600: #62543a;
  --c-ink-500: #837353;
  --c-ink-400: #a4967a;
  --c-ink-300: #c8bda5;
  --c-ink-200: #e2d9c5;
  --c-ink-100: #efe9da;
  --c-ink-050: #f8f4ea;

  --c-primary-700: #8a6210;
  --c-primary-600: #a87613;
  --c-primary-500: #b9851c;
  --c-primary-400: #d2a23c;
  --c-primary-100: #f3e7c9;

  --on-primary: #241803;

  --c-steel-600: #5d7396;
  --c-steel-500: #6e84a6;
  --c-steel-100: #e4eaf3;
  --grad-steel: linear-gradient(135deg, #8ba1c0 0%, #5d7396 100%);

  --c-accent-700: #0c8a60;
  --c-accent-600: #0fa172;
  --c-accent-500: #13b681;
  --c-accent-100: #d9f5e9;

  --c-up:   #0c9a6c;
  --c-down: #e4405e;
  --c-warn: #e09112;
  --c-up-soft:   #e0f7ed;
  --c-down-soft: #fde5ea;

  --bg:           #f7f3ea;
  --bg-2:         #f1ecdf;
  --bg-elev:      #fffdf7;
  --bg-sunken:    #efe9da;
  --surface-line: #e5dcc6;
  --surface-line-strong: #d4c8ab;

  --glass:        rgba(255, 253, 247, .7);
  --glass-2:      rgba(255, 253, 247, .85);
  --glass-border: rgba(255, 253, 247, .9);

  --text:         #1c160a;
  --text-muted:   #6c5f43;
  --text-subtle:  #978a6c;

  --grad-primary: linear-gradient(135deg, #e3b04b 0%, #c08a18 55%, #9e6e0e 100%);
  --grad-primary-soft: linear-gradient(135deg, #d2a23c 0%, #a87613 100%);
  --grad-gold-deep: linear-gradient(135deg, #d9a335 0%, #b06f10 100%);
  --grad-emerald: linear-gradient(135deg, #13b681 0%, #0e9490 100%);
  --grad-hero:
    radial-gradient(1100px 560px at 82% -10%, rgba(192, 138, 24, .14), transparent 60%),
    radial-gradient(880px 500px at 4% 8%, rgba(15, 161, 114, .08), transparent 56%),
    radial-gradient(600px 600px at 50% 120%, rgba(158, 110, 14, .06), transparent 60%);
  --grad-sheen:   linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  --grad-text:    linear-gradient(120deg, #1c160a 0%, #45391f 100%);

  --sh-xs: 0 1px 2px rgba(43,33,12,.06);
  --sh-sm: 0 2px 8px rgba(43,33,12,.06), 0 1px 2px rgba(43,33,12,.04);
  --sh-md: 0 10px 30px rgba(43,33,12,.09), 0 2px 6px rgba(43,33,12,.05);
  --sh-lg: 0 24px 60px rgba(43,33,12,.14), 0 6px 14px rgba(43,33,12,.06);
  --sh-glow:    0 12px 40px rgba(168, 118, 19, .26);
  --sh-glow-up: 0 12px 40px rgba(15, 161, 114, .22);
  --glow-ring:  0 0 0 1px rgba(43,33,12,.04), 0 10px 30px rgba(168, 118, 19, .10);
}