/* =============================================================
   PrimeSignals — Design Tokens
   "Private trading desk": obsidian surfaces, a crimson→blue
   brand gradient as primary, emerald reserved for profit. Dark
   is the brand experience; light is an 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 — crimson (the hot end of the brand gradient) */
  --c-primary-700: #ff9ab0;
  --c-primary-600: #ff3b6b;
  --c-primary-500: #ff5480;
  --c-primary-400: #ffa8bd;
  --c-primary-100: rgba(255, 59, 107, .13);

  /* Secondary — electric blue (the cold end of the brand gradient) */
  --c-blue-700: #9db8ff;
  --c-blue-600: #2f6bff;
  --c-blue-500: #4f81ff;
  --c-blue-400: #a8c0ff;
  --c-blue-100: rgba(47, 107, 255, .13);

  /* Ink to set on top of the brand gradient */
  --on-primary: #ffffff;

  /* Steel — entry-tier accent (cooled toward the brand blue) */
  --c-steel-600: #9fb4dd;
  --c-steel-500: #b1c3e6;
  --c-steel-100: rgba(159, 180, 221, .13);
  --grad-steel: linear-gradient(135deg, #d5e0f5 0%, #7d97cd 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, #ff3b5c 0%, #7d3ff2 52%, #2f6bff 100%);
  --grad-primary-soft: linear-gradient(135deg, #ff6a86 0%, #5b8bff 100%);
  --grad-gold-deep: linear-gradient(135deg, #ff2d55 0%, #1b4fd8 100%);
  --grad-emerald: linear-gradient(135deg, #3ce6a4 0%, #0fb8b0 100%);
  --grad-hero:
    radial-gradient(900px 520px at 82% -8%, rgba(255, 59, 92, .17), transparent 60%),
    radial-gradient(760px 480px at 2% 8%, rgba(47, 107, 255, .14), transparent 58%),
    radial-gradient(640px 640px at 50% 120%, rgba(125, 63, 242, .10), 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(255, 59, 107, .30), 0 10px 46px rgba(47, 107, 255, .22);
  --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(255, 59, 107, .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: #b3082f;
  --c-primary-600: #d61240;
  --c-primary-500: #e62552;
  --c-primary-400: #f2688b;
  --c-primary-100: #fde3ea;

  --c-blue-700: #133fae;
  --c-blue-600: #1b53d6;
  --c-blue-500: #2f6bff;
  --c-blue-400: #7fa2ff;
  --c-blue-100: #e2eafd;

  --on-primary: #ffffff;

  --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, #e01f47 0%, #7a3bd8 52%, #1b53d6 100%);
  --grad-primary-soft: linear-gradient(135deg, #e62552 0%, #2f6bff 100%);
  --grad-gold-deep: linear-gradient(135deg, #c8102e 0%, #12409e 100%);
  --grad-emerald: linear-gradient(135deg, #13b681 0%, #0e9490 100%);
  --grad-hero:
    radial-gradient(1100px 560px at 82% -10%, rgba(224, 31, 71, .12), transparent 60%),
    radial-gradient(880px 500px at 4% 8%, rgba(27, 83, 214, .10), transparent 56%),
    radial-gradient(600px 600px at 50% 120%, rgba(122, 59, 216, .07), 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(214, 18, 64, .22), 0 12px 44px rgba(27, 83, 214, .16);
  --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(214, 18, 64, .10);
}