/* ============================================================
   SIGNA — tokens.css
   ALL CSS custom properties. Dark mode is the default.
   Light overrides live in theme.css under [data-theme="light"].
   ============================================================ */
:root {
  /* Duolingo-inspired brand accents: Feather Green + sky blue. */
  --accent: #58CC02;
  --accent-hover: #89E219;
  --accent-2: #1CB0F6;
  --accent-2-hover: #57C8FF;
  --on-accent: #0B1D00;
  --on-accent-2: #06283D;
  --on-warning: #332500;
  --glow: rgba(88, 204, 2, 0.24);
  --success: #58CC02;
  --warning: #FFC800;
  --error: #FF4B4B;
  --accent-soft: rgba(88, 204, 2, 0.14);
  --accent-border: rgba(88, 204, 2, 0.42);
  --success-soft: rgba(88, 204, 2, 0.15);
  --warning-soft: rgba(255, 200, 0, 0.16);
  --error-soft: rgba(255, 75, 75, 0.15);
  --accent-2-soft: rgba(28, 176, 246, 0.15);

  /* Dark mode surfaces (default) */
  --bg: #131F24;
  --surface: #1F2A30;
  --surface-elevated: #26353D;
  --border: #37464F;
  --text-primary: #F1F7FB;
  --text-secondary: #A9BCC6;
  --text-muted: #7F96A3;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  --toggle-bg: #26353D;
  --toggle-border: rgba(88, 204, 2, 0.48);
  --camera-bg: #0B1418;
  --dot: rgba(255, 255, 255, 0.055);

  /* Typography */
  --font-display: "Syne", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Spacing (4px base) */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-5: 20px;  --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* Radii */
  --radius-sm: 8px;   --radius-md: 12px;  --radius-lg: 16px;
  --radius-xl: 20px;  --radius-2xl: 24px; --radius-full: 999px;

  /* Motion — nothing over 800ms */
  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-inout: ease-in-out;
  --dur-fast: 120ms; --dur: 220ms; --dur-slow: 600ms;

  /* Layout */
  --topbar-h: 62px;
  --sidebar-w: 264px;
  --siggy-w: 284px;
  --bottomnav-h: 64px;
  --content-max: 1240px;
}