/* ──────────────────────────────────────────────────────────
   Swift Grid — Design Tokens
   Single source of truth for colors, typography, spacing,
   radii, shadows, and motion. Consumed by base.css and both
   theme layers (theme-front.css / theme-back.css).
   ────────────────────────────────────────────────────────── */

:root {
  /* Brand palette (dark-first) */
  --sg-dark:         #0B1218;
  --sg-dark-light:   #131E29;
  --sg-dark-lighter: #1A2835;

  /* Accents */
  --sg-purple:       #776AF8;
  --sg-purple-rgb:   119 106 248;
  --sg-green:        #21C277;
  --sg-green-rgb:    33 194 119;
  --sg-blue:         #2766F8;
  --sg-blue-rgb:     39 102 248;

  /* Neutrals / text */
  --sg-text:         #FFFFFF;
  --sg-text-muted:   rgba(255, 255, 255, 0.70);
  --sg-text-subtle:  rgba(255, 255, 255, 0.50);
  --sg-text-faint:   rgba(255, 255, 255, 0.40);

  /* Borders / surfaces */
  --sg-border:       rgba(255, 255, 255, 0.08);
  --sg-border-soft:  rgba(255, 255, 255, 0.05);

  /* Typography */
  --sg-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sg-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'Menlo', monospace;

  /* Radii */
  --sg-radius-sm:  6px;
  --sg-radius-md:  10px;
  --sg-radius-lg:  16px;
  --sg-radius-xl:  24px;

  /* Shadows / glows */
  --sg-shadow-glow-purple: 0 0 40px -10px rgba(119, 106, 248, 0.60);
  --sg-shadow-glow-green:  0 0 40px -10px rgba(33, 194, 119, 0.55);
  --sg-shadow-glow-blue:   0 0 40px -10px rgba(39, 102, 248, 0.55);

  /* Motion */
  --sg-ease-out:  cubic-bezier(.22, 1, .36, 1);
  --sg-dur-fast:  180ms;
  --sg-dur-base:  320ms;
  --sg-dur-slow:  640ms;

  /* Per-theme accent — overridden by [data-theme] below */
  --sg-accent:      var(--sg-purple);
  --sg-accent-rgb:  var(--sg-purple-rgb);
}

/* Front theme = V4 illustrated — purple-forward, warm glow */
[data-theme="front"] {
  --sg-accent:      var(--sg-purple);
  --sg-accent-rgb:  var(--sg-purple-rgb);
  --sg-selection:   rgba(119, 106, 248, 0.40);
}

/* Back theme = V2 terminal — green-forward, scanline vibe */
[data-theme="back"] {
  --sg-accent:      var(--sg-green);
  --sg-accent-rgb:  var(--sg-green-rgb);
  --sg-selection:   rgba(33, 194, 119, 0.35);
}