/* ============================================================
   tokens-ui.css — shared "glass spatial" design tokens
   (Satoshi + JetBrains Mono, cyan/violet, light/dark).
   Single source of truth for the homepage + dashboard so the
   two stay consistent. Loaded before home.css / dashboard.css.
   ============================================================ */

/* ===== TOKENS — dark (default) ===== */
:root {
  --bg:       #050608;
  --bg-2:     #0a0c10;
  --ink:      #ffffff;
  --ink-soft: #d4dae5;
  --muted:    #7a8599;
  --mute:     #4a5466;
  --line:     #1c222e;
  --line-2:   #2a3142;

  --accent:      #25aae1;
  --accent-soft: #5dc8f0;
  --cyan:        #25aae1;
  --violet:      #b08cff;
  --green:       #5fe3a8;
  --orange:      #f78c4d;
  --red:         #d96b6b;
  --on-accent:   #050608;

  --glass-bg:        rgba(12, 15, 21, 0.55);
  --glass-bg-strong: rgba(12, 15, 21, 0.78);
  --glass-border:    rgba(255, 255, 255, 0.06);
  --glass-border-hi: rgba(255, 255, 255, 0.12);
  --glass-top:       rgba(255, 255, 255, 0.06);
  --glass-bot:       rgba(0, 0, 0, 0.32);
  --glass-edge-cyan: rgba(37, 170, 225, 0.18);
  --glass-fill:      rgba(255, 255, 255, 0.025);
  --glass-fill-2:    rgba(255, 255, 255, 0.018);
  --accent-wash:     rgba(37, 170, 225, 0.08);

  --page-glow-1: rgba(37, 170, 225, .07);
  --page-glow-2: rgba(176, 140, 255, .055);
  --dot-1: rgba(255, 255, 255, .045);
  --dot-2: rgba(37, 170, 225, .04);

  --display-font: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:         "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:         "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --caption: 10.5px;
  --track-caption: 0.08em;

  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px;
  --sp-24:24px; --sp-32:32px; --sp-48:48px; --sp-64:64px;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 16px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --depth-1:
      0 1px 0 var(--glass-top) inset,
      0 1px 0 rgba(0,0,0,.35),
      0 4px 12px rgba(0,0,0,.35);
  --depth-2:
      0 1px 0 var(--glass-top) inset,
      0 8px 24px rgba(0,0,0,.42),
      0 22px 48px rgba(0,0,0,.32);
  --depth-glow-cyan:
      0 1px 0 var(--glass-top) inset,
      0 0 0 1px var(--glass-edge-cyan),
      0 0 24px rgba(37,170,225,0.15),
      0 12px 32px rgba(0,0,0,.5),
      0 32px 72px rgba(0,0,0,.4);
}

/* ===== TOKENS — light ===== */
:root[data-theme="light"] {
  --bg:       #f4f7fb;
  --bg-2:     #eaeff6;
  --ink:      #0d1520;
  --ink-soft: #34404f;
  --muted:    #5a6678;
  --mute:     #8b97a8;
  --line:     #e4e9f1;
  --line-2:   #d5dde8;

  --accent:      #0e7aa8;
  --accent-soft: #34bdf2;
  --cyan:        #0e7aa8;
  --violet:      #6b50e0;
  --green:       #15794c;
  --orange:      #c26a1f;
  --red:         #c2342f;
  --on-accent:   #ffffff;

  --glass-bg:        rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.90);
  --glass-border:    rgba(15, 23, 34, 0.09);
  --glass-border-hi: rgba(15, 23, 34, 0.16);
  --glass-top:       rgba(255, 255, 255, 0.7);
  --glass-bot:       rgba(15, 23, 34, 0.03);
  --glass-edge-cyan: rgba(14, 122, 168, 0.22);
  --glass-fill:      rgba(15, 23, 34, 0.02);
  --glass-fill-2:    rgba(15, 23, 34, 0.015);
  --accent-wash:     rgba(14, 122, 168, 0.08);

  --page-glow-1: rgba(14, 122, 168, .10);
  --page-glow-2: rgba(107, 80, 224, .07);
  --dot-1: rgba(15, 23, 34, .05);
  --dot-2: rgba(14, 122, 168, .05);

  --depth-1: 0 1px 3px rgba(15,23,34,.05), 0 4px 12px rgba(15,23,34,.05);
  --depth-2: 0 1px 4px rgba(15,23,34,.05), 0 10px 30px -10px rgba(15,23,34,.12);
  --depth-glow-cyan:
      0 0 0 1px var(--glass-edge-cyan),
      0 0 24px rgba(14,122,168,0.10),
      0 16px 40px -12px rgba(15,23,34,.14);
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* consistent keyboard focus ring (home + dashboard) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}