/* ═══════════════════════════════════════════════════════════
   TOKENS.CSS — Design tokens for ATLAS HUD
   Single source of truth for all visual values
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Palette ── */
  --c-bg-deep:    #040815;
  --c-bg-base:    #061022;
  --c-neon:       #00f2ff;
  --c-neon-2:     #00b6ff;
  --c-green:      #38ff9c;
  --c-amber:      #ffcf3c;
  --c-red:        #ff3c3c;
  --c-violet:     #8a5bff;

  /* ── UI Surfaces (dark default) ── */
  --ui-surface:       rgba(10, 16, 30, .68);
  --ui-surface-2:     rgba(10, 16, 30, .52);
  --ui-surface-solid: rgba(10, 16, 30, .86);
  --ui-glass:         rgba(7, 14, 28, .72);
  --ui-glass-2:       rgba(7, 14, 28, .52);

  /* ── Borders ── */
  --ui-border:        rgba(0, 242, 255, 0.14);
  --ui-border-strong: rgba(0, 242, 255, 0.22);

  /* ── Text ── */
  --ui-text:     rgba(255, 255, 255, .92);
  --ui-text-2:   rgba(255, 255, 255, .72);
  --ui-text-dim: rgba(255, 255, 255, .56);

  /* ── Accent ── */
  --ui-accent:   rgba(0, 242, 255, .92);
  --ui-accent-2: rgba(0, 182, 255, .70);

  /* ── Shadows ── */
  --ui-shadow:      0 18px 60px rgba(0, 0, 0, .45);
  --ui-shadow-soft: 0 10px 26px rgba(0, 0, 0, .30);
  --ui-glow:        0 0 0 1px rgba(0, 242, 255, .10), 0 0 28px rgba(0, 242, 255, .08);
  --ui-glow-strong: 0 0 0 1px rgba(0, 242, 255, .24), 0 0 70px rgba(0, 242, 255, .16);

  /* ── Focus ── */
  --ui-focus: 0 0 0 3px rgba(0, 242, 255, 0.18), 0 0 0 1px rgba(0, 242, 255, 0.26) inset;

  /* ── Radius ── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ── Blur ── */
  --ui-blur: blur(16px);

  /* ── Typography ── */
  --font-ui:    'Rajdhani', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-title: 'Orbitron', var(--font-ui);
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Layout ── */
  --topbar-h:      46px;
  --topbar-h2:     40px;
  --side-w-left:   clamp(260px, 24vw, 340px);
  --side-w-right:  clamp(280px, 26vw, 360px);
  --layout-gap:    12px;

  /* ── Safe area ── */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* ── Map HUD bar ── */
  --hudbar-top:   10px;
  --hudbar-w:     min(520px, calc(100% - 24px));
  --hudbar-pad-y: 4px;
  --hudbar-pad-x: 8px;

  /* ── Geoman toolbar ── */
  --pm-top:   72px;
  --pm-right: 14px;
  --pm-btn:   42px;
  --pm-gap:   10px;
  --pm-pad:   8px;
  --pm-maxh:  calc(100dvh - 190px);

  /* ── Sidebar handles ── */
  --sb-handle-w:       56px;
  --sb-handle-h:       104px;
  --sb-handle-visible: 34px;

  /* ── Component sizing ── */
  --btn-h:     36px;
  --btn-pad-x: 12px;
  --chip-h:    32px;

  /* ── Timing ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    .12s;
  --dur-normal:  .18s;
  --dur-slow:    .3s;
}

/* ── Light UI theme ── */
body.theme-hud[data-ui-theme="light"] {
  --ui-surface:       rgba(255, 255, 255, .72);
  --ui-surface-2:     rgba(255, 255, 255, .56);
  --ui-surface-solid: rgba(255, 255, 255, .86);
  --ui-glass:         rgba(255, 255, 255, .72);
  --ui-glass-2:       rgba(255, 255, 255, .56);

  --ui-border:        rgba(3, 35, 60, 0.14);
  --ui-border-strong: rgba(3, 35, 60, 0.22);

  --ui-text:     rgba(10, 14, 20, .92);
  --ui-text-2:   rgba(10, 14, 20, .70);
  --ui-text-dim: rgba(10, 14, 20, .52);

  --ui-accent:   rgba(0, 150, 190, .92);
  --ui-accent-2: rgba(0, 180, 220, .70);

  --ui-shadow:      0 18px 60px rgba(0, 0, 0, .18);
  --ui-shadow-soft: 0 10px 26px rgba(0, 0, 0, .12);
  --ui-glow:        0 0 0 1px rgba(0, 150, 190, .10), 0 0 24px rgba(0, 150, 190, .08);
}

/* ── Auto light (system preference) ── */
@media (prefers-color-scheme: light) {
  body.theme-hud:not([data-ui-theme="dark"]) {
    --ui-surface:       rgba(255, 255, 255, .72);
    --ui-surface-2:     rgba(255, 255, 255, .56);
    --ui-surface-solid: rgba(255, 255, 255, .86);
    --ui-glass:         rgba(255, 255, 255, .72);
    --ui-glass-2:       rgba(255, 255, 255, .56);

    --ui-border:        rgba(3, 35, 60, 0.14);
    --ui-border-strong: rgba(3, 35, 60, 0.22);

    --ui-text:     rgba(10, 14, 20, .92);
    --ui-text-2:   rgba(10, 14, 20, .70);
    --ui-text-dim: rgba(10, 14, 20, .52);

    --ui-accent:   rgba(0, 150, 190, .92);
    --ui-accent-2: rgba(0, 180, 220, .70);

    --ui-shadow:      0 18px 60px rgba(0, 0, 0, .18);
    --ui-shadow-soft: 0 10px 26px rgba(0, 0, 0, .12);
    --ui-glow:        0 0 0 1px rgba(0, 150, 190, .10), 0 0 24px rgba(0, 150, 190, .08);
  }
}

/* ── Selection ── */
body.theme-hud ::selection {
  background: color-mix(in srgb, var(--ui-accent) 25%, transparent);
}