//static/css/01_tokens.css

@layer tokens {
  :root {
    --nav-h: 56px;

    /* Theme tokens (default: dark-ish) */
    --bg: #0b0f0d;
    --bg-elevated: rgba(255,255,255,.04);
    --surface: rgba(255,255,255,.06);

    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.65);

    --border: rgba(255,255,255,.10);

    --shadow-lg: 0 16px 45px rgba(0,0,0,.55);

    /* Toast accent */
    --accent: rgba(120, 255, 190, 0.85);
    --accent-border: rgba(120, 255, 190, 0.18);
  }

  html[data-theme="light"]{
    --bg: #f7f6f2;
    --bg-elevated: rgba(0,0,0,.03);
    --surface: rgba(0,0,0,.04);

    --text: rgba(0,0,0,.88);
    --muted: rgba(0,0,0,.55);

    --border: rgba(0,0,0,.10);

    --shadow-lg: 0 16px 45px rgba(0,0,0,.18);

    --accent: rgba(30, 140, 90, 0.85);
    --accent-border: rgba(30, 140, 90, 0.20);
  }
}