/* =============================================================
   Tradzio Pro — Design Tokens
   "Deep-market terminal": navy surfaces, sky-cyan primary, mint
   reserved for profit, gold for premium accents. Palette + fonts
   ported from the botpocket app (Manrope + IBM Plex Mono).
   ============================================================= */

:root {
  color-scheme: dark;

  /* ---- Ink scale (cool blue-white ramp) --------------------- */
  --c-ink-900: #eef6ff;   /* brightest text in dark              */
  --c-ink-800: #d5e6f7;
  --c-ink-700: #b3ccdf;
  --c-ink-600: #8fadc6;
  --c-ink-500: #6f8fab;   /* muted body text                     */
  --c-ink-400: #4a7090;
  --c-ink-300: #33506b;
  --c-ink-200: #1d3450;
  --c-ink-100: #122843;
  --c-ink-050: #0a1628;
  --c-white:   #ffffff;

  /* Primary — sky cyan (botpocket --A) */
  --c-primary-700: #7dd3fc;
  --c-primary-600: #0ea5e9;
  --c-primary-500: #38b6ef;
  --c-primary-400: #7dd3fc;
  --c-primary-100: rgba(14, 165, 233, .14);

  /* Ink to set on top of cyan / accent gradients */
  --on-primary: #04131f;

  /* Steel — entry-tier accent (soft periwinkle blue) */
  --c-steel-600: #7fa8d8;
  --c-steel-500: #93b8e2;
  --c-steel-100: rgba(127, 168, 216, .14);
  --grad-steel: linear-gradient(135deg, #a9c8f0 0%, #5f86c0 100%);

  /* Accent — mint (markets / "up" / growth) (botpocket --G) */
  --c-accent-700: #4dffc4;
  --c-accent-600: #00e5a0;
  --c-accent-500: #1fecac;
  --c-accent-100: rgba(0, 229, 160, .13);

  /* Semantic */
  --c-up:   #00e5a0;
  --c-down: #ff4d6a;
  --c-warn: #f5b942;
  --c-up-soft:   rgba(0, 229, 160, .13);
  --c-down-soft: rgba(255, 77, 106, .15);

  /* ---- Surfaces (deep navy) --------------------------------- */
  --bg:           #050d1a;
  --bg-2:         #060f1f;     /* secondary backdrop band         */
  --bg-elev:      #0a1628;     /* solid card fallback (panel)     */
  --bg-sunken:    #040a14;
  --surface-line: rgba(14, 165, 233, .16);
  --surface-line-strong: rgba(14, 165, 233, .30);

  /* Glass layers (use with backdrop-filter) */
  --glass:        rgba(14, 165, 233, .05);
  --glass-2:      rgba(14, 165, 233, .085);
  --glass-border: rgba(14, 165, 233, .12);
  --glass-blur:   16px;

  --text:         #e2f0ff;
  --text-muted:   #7fa0bd;
  --text-subtle:  #4a7090;

  /* ---- Gradients -------------------------------------------- */
  --grad-primary: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 48%, #0284c7 100%);
  --grad-primary-soft: linear-gradient(135deg, #7dd3fc 0%, #0ea5e9 100%);
  --grad-gold-deep: linear-gradient(135deg, #ffd98a 0%, #f5b942 100%);
  --grad-emerald: linear-gradient(135deg, #00e5a0 0%, #0ea5e9 100%);
  --grad-hero:
    radial-gradient(900px 520px at 82% -8%, rgba(14, 165, 233, .20), transparent 60%),
    radial-gradient(760px 480px at 2% 8%, rgba(0, 229, 160, .10), transparent 58%),
    radial-gradient(640px 640px at 50% 120%, rgba(14, 165, 233, .10), transparent 60%);
  --grad-sheen:   linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  --grad-text:    linear-gradient(120deg, #eef6ff 0%, #8fb2d6 100%);

  /* ---- Typography ------------------------------------------- */
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex 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,.4), 0 1px 2px rgba(0,0,0,.35);
  --sh-md: 0 14px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --sh-lg: 0 30px 70px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.45);
  --sh-glow:    0 10px 36px rgba(14, 165, 233, .34);
  --sh-glow-up: 0 12px 40px rgba(0, 229, 160, .30);
  --glow-ring:  0 0 0 1px rgba(14, 165, 233, .08), 0 0 40px rgba(14, 165, 233, .14);

  /* ---- 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 — soft steel-blue, sky accents, high contrast
   (mirrors botpocket's light vars)
   ============================================================= */
[data-theme="light"] {
  color-scheme: light;

  --c-ink-900: #0d1c2e;
  --c-ink-800: #16293d;
  --c-ink-700: #223c53;
  --c-ink-600: #35526d;
  --c-ink-500: #4f6d88;
  --c-ink-400: #7089a1;
  --c-ink-300: #9db2c7;
  --c-ink-200: #c4d3e3;
  --c-ink-100: #dde7f2;
  --c-ink-050: #eef3fa;

  --c-primary-700: #075985;
  --c-primary-600: #0284c7;
  --c-primary-500: #0ea5e9;
  --c-primary-400: #38bdf8;
  --c-primary-100: #d5ecfa;

  --on-primary: #ffffff;

  --c-steel-600: #4f6d96;
  --c-steel-500: #5f7fa6;
  --c-steel-100: #e2e9f3;
  --grad-steel: linear-gradient(135deg, #8ba1c0 0%, #4f6d96 100%);

  --c-accent-700: #018f66;
  --c-accent-600: #06a878;
  --c-accent-500: #0cbd88;
  --c-accent-100: #d6f5ea;

  --c-up:   #06a878;
  --c-down: #e23a5a;
  --c-warn: #c98a12;
  --c-up-soft:   #dcf6ee;
  --c-down-soft: #fde3e8;

  --bg:           #dde5f5;
  --bg-2:         #e2eaf6;
  --bg-elev:      #f4f7fd;
  --bg-sunken:    #d3ddf0;
  --surface-line: rgba(0, 80, 160, .15);
  --surface-line-strong: rgba(0, 80, 160, .28);

  --glass:        rgba(244, 247, 253, .7);
  --glass-2:      rgba(244, 247, 253, .85);
  --glass-border: rgba(0, 80, 160, .12);

  --text:         #1a2a3a;
  --text-muted:   #47607a;
  --text-subtle:  #5a7a95;

  --grad-primary: linear-gradient(135deg, #38bdf8 0%, #0284c7 55%, #075985 100%);
  --grad-primary-soft: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  --grad-gold-deep: linear-gradient(135deg, #e0aa3e 0%, #c98a12 100%);
  --grad-emerald: linear-gradient(135deg, #06a878 0%, #0284c7 100%);
  --grad-hero:
    radial-gradient(1100px 560px at 82% -10%, rgba(2, 132, 199, .14), transparent 60%),
    radial-gradient(880px 500px at 4% 8%, rgba(6, 168, 120, .08), transparent 56%),
    radial-gradient(600px 600px at 50% 120%, rgba(2, 132, 199, .06), transparent 60%);
  --grad-sheen:   linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  --grad-text:    linear-gradient(120deg, #1a2a3a 0%, #223c53 100%);

  --sh-xs: 0 1px 2px rgba(12,28,46,.06);
  --sh-sm: 0 2px 8px rgba(12,28,46,.07), 0 1px 2px rgba(12,28,46,.05);
  --sh-md: 0 10px 30px rgba(12,28,46,.1), 0 2px 6px rgba(12,28,46,.05);
  --sh-lg: 0 24px 60px rgba(12,28,46,.15), 0 6px 14px rgba(12,28,46,.07);
  --sh-glow:    0 12px 40px rgba(2, 132, 199, .24);
  --sh-glow-up: 0 12px 40px rgba(6, 168, 120, .22);
  --glow-ring:  0 0 0 1px rgba(12,28,46,.05), 0 10px 30px rgba(2, 132, 199, .1);
}