/* ========================================================================
   tokens.css — design system tokens
   Evolves the existing SftS look:
     - Keep dark navy + electric cyan as primary
     - Promote three theme accents (tokenized=violet, stablecoins=green, dlt=orange)
     - Introduce real importance-tier semantic colors
   ======================================================================== */
:root {
  /* ---- Type scale (fluid) ---- */
  --text-xs:    clamp(0.72rem, 0.68rem + 0.20vw, 0.80rem);
  --text-sm:    clamp(0.85rem, 0.80rem + 0.25vw, 0.95rem);
  --text-base:  clamp(0.98rem, 0.94rem + 0.20vw, 1.06rem);
  --text-md:    clamp(1.10rem, 1.02rem + 0.40vw, 1.25rem);
  --text-lg:    clamp(1.30rem, 1.15rem + 0.75vw, 1.65rem);
  --text-xl:    clamp(1.65rem, 1.30rem + 1.50vw, 2.40rem);
  --text-2xl:   clamp(2.20rem, 1.50rem + 3.00vw, 3.40rem);
  --text-hero:  clamp(2.70rem, 1.60rem + 4.50vw, 4.60rem);

  /* ---- Spacing (4px scale) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Radius ---- */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-base: 200ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  /* ---- Layout widths ---- */
  --content-narrow: 680px;
  --content-default: 1080px;
  --content-wide: 1360px;
  --content-full: 100%;

  /* ---- Fonts ---- */
  --font-display: 'Cabinet Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
}

/* ============================================================
   DARK THEME — default for finance intelligence product
   ============================================================ */
:root, [data-theme="dark"] {
  /* Surfaces */
  --color-bg:               #07090f;
  --color-bg-grid:          rgba(0, 212, 255, 0.025);
  --color-surface:          #0d1018;
  --color-surface-2:        #131724;
  --color-surface-3:        #1a1f30;
  --color-surface-4:        #232a3e;
  --color-surface-elev:     #161c2c;
  --color-overlay:          rgba(7, 9, 15, 0.85);

  /* Text */
  --color-text:             #e8eaf2;
  --color-text-strong:      #ffffff;
  --color-text-muted:       #97a0b8;
  --color-text-faint:       #5d6680;
  --color-text-inverse:     #07090f;

  /* Borders & dividers */
  --color-divider:          #232a3e;
  --color-divider-strong:   #2f3852;
  --color-border:           #384260;

  /* Brand primary — electric cyan */
  --color-primary:          #2ddcff;
  --color-primary-strong:   #5ce5ff;
  --color-primary-deep:     #0099cc;
  --color-primary-soft:     rgba(45, 220, 255, 0.10);
  --color-primary-edge:     rgba(45, 220, 255, 0.32);

  /* Importance tiers */
  --color-tier-structural:  #2ddcff;   /* cyan glow */
  --color-tier-structural-bg: rgba(45, 220, 255, 0.10);
  --color-tier-material:    #ffb547;   /* warm amber */
  --color-tier-material-bg: rgba(255, 181, 71, 0.12);
  --color-tier-context:     #8a9cc4;   /* muted slate */
  --color-tier-context-bg:  rgba(138, 156, 196, 0.10);
  --color-tier-noise:       #5d6680;
  --color-tier-noise-bg:    rgba(93, 102, 128, 0.10);

  /* Theme accents */
  --color-theme-tokenized:  #a78bfa;   /* violet */
  --color-theme-stablecoins:#34d399;   /* green */
  --color-theme-dlt:        #fb923c;   /* orange */
  --color-theme-perimeter:  #14b8a6;   /* teal */

  /* Institution category colors */
  --color-cat-banks:        #2ddcff;
  --color-cat-asset:        #a78bfa;
  --color-cat-payments:     #34d399;
  --color-cat-exchanges:    #fb923c;
  --color-cat-regulators:   #f472b6;
  --color-cat-ecosystem:    #fbbf24;

  /* Status */
  --color-success:          #34d399;
  --color-warning:          #fbbf24;
  --color-error:            #f472b6;
  --color-info:             #2ddcff;

  /* Shadows */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-md:   0 6px 18px rgba(0, 0, 0, 0.40);
  --shadow-lg:   0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 28px rgba(45, 220, 255, 0.18);
  --shadow-glow-soft: 0 0 16px rgba(45, 220, 255, 0.10);

  color-scheme: dark;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] {
  --color-bg:               #f6f7fb;
  --color-bg-grid:          rgba(0, 102, 136, 0.04);
  --color-surface:          #ffffff;
  --color-surface-2:        #fafbfd;
  --color-surface-3:        #eef0f7;
  --color-surface-4:        #e1e5ef;
  --color-surface-elev:     #ffffff;
  --color-overlay:          rgba(246, 247, 251, 0.85);

  --color-text:             #1a1d28;
  --color-text-strong:      #07090f;
  --color-text-muted:       #5a6178;
  --color-text-faint:       #8b91a8;
  --color-text-inverse:     #ffffff;

  --color-divider:          #e1e5ef;
  --color-divider-strong:   #cdd2e0;
  --color-border:           #b9c0d2;

  --color-primary:          #0084a8;
  --color-primary-strong:   #006688;
  --color-primary-deep:     #004d66;
  --color-primary-soft:     rgba(0, 132, 168, 0.08);
  --color-primary-edge:     rgba(0, 132, 168, 0.28);

  --color-tier-structural:  #0084a8;
  --color-tier-structural-bg: rgba(0, 132, 168, 0.10);
  --color-tier-material:    #b8650f;
  --color-tier-material-bg: rgba(184, 101, 15, 0.10);
  --color-tier-context:     #5a6178;
  --color-tier-context-bg:  rgba(90, 97, 120, 0.08);
  --color-tier-noise:       #8b91a8;
  --color-tier-noise-bg:    rgba(139, 145, 168, 0.08);

  --color-theme-tokenized:  #6d28d9;
  --color-theme-stablecoins:#047857;
  --color-theme-dlt:        #c2410c;
  --color-theme-perimeter:  #0d9488;

  --color-cat-banks:        #0084a8;
  --color-cat-asset:        #6d28d9;
  --color-cat-payments:     #047857;
  --color-cat-exchanges:    #c2410c;
  --color-cat-regulators:   #be185d;
  --color-cat-ecosystem:    #b8650f;

  --color-success:          #047857;
  --color-warning:          #b8650f;
  --color-error:            #be185d;
  --color-info:             #0084a8;

  --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:   0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-md:   0 6px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg:   0 18px 40px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 20px rgba(0, 132, 168, 0.12);
  --shadow-glow-soft: 0 0 12px rgba(0, 132, 168, 0.06);

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg:               #f6f7fb;
    --color-surface:          #ffffff;
    --color-text:             #1a1d28;
    --color-text-muted:       #5a6178;
    --color-divider:          #e1e5ef;
    --color-primary:          #0084a8;
    color-scheme: light;
  }
}