/* ============================================================
   NOVA — Design Tokens
   Framework-agnostic CSS custom properties.
   Single source of truth for color, type, spacing, effects.
   Ported verbatim from the canonical React theme
   (react/src/index.css + theme/tokens.ts) so the HTML build
   and the React build share one palette.

   Identity: dark modern SaaS / HUD. Deep-slate base, vivid
   amber-orange accent, green status signals, glassmorphism,
   heavy italic-uppercase display type, mono technical labels.
   ============================================================ */

:root {
  /* ---- Primary — amber / vivid orange (the signature accent) ---- */
  --primary-50: #fffbeb;
  --primary-100: #fef3c7;
  --primary-200: #fde68a;
  --primary-300: #fcd34d;
  --primary-400: #fbbf24;
  --primary-500: #f59e0b;
  --primary-600: #d97706;
  --primary-700: #b45309;
  --primary-800: #92400e;
  --primary-900: #78350f;
  --primary-950: #451a03;

  /* ---- Surfaces — deep slate (not pure black, has depth) ---- */
  --surface-50: #f8fafc;
  --surface-100: #f1f5f9;
  --surface-200: #e2e8f0;
  --surface-300: #cbd5e1;
  --surface-400: #94a3b8;
  --surface-500: #64748b;
  --surface-600: #475569;
  --surface-700: #334155;
  --surface-800: #1e293b;
  --surface-900: #0f172a;
  --surface-950: #020617;

  /* ---- Accents (status + variety) ---- */
  --accent-blue: #60a5fa;
  --accent-purple: #a855f7;
  --accent-green: #22c55e;
  --accent-cyan: #06b6d4;
  --accent-red: #ef4444;

  /* ---- Semantic surface aliases (page canvas) ---- */
  --bg: #020617;            /* body canvas */
  --panel: #1e293b;         /* card / raised surface (surface-800) */
  --panel-alt: #0f172a;     /* section --alt (surface-900) */
  --panel-deep: #0f1623;    /* terminal / live-feed rows */

  /* ---- Glass effects ---- */
  --glass-light: rgba(255, 255, 255, 0.1);
  --glass-default: rgba(15, 23, 42, 0.6);
  --glass-dark: rgba(2, 6, 23, 0.8);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* ---- Line work ---- */
  --line: #334155;          /* surface-700 */
  --line-light: #475569;    /* surface-600 */
  --line-faint: #1e293b;    /* surface-800 */

  /* ---- Text ---- */
  --text: #f1f5f9;          /* surface-100 */
  --text-strong: #ffffff;
  --text-muted: #94a3b8;    /* surface-400 */
  --text-dim: #64748b;      /* surface-500 */
  --text-faint: #475569;    /* surface-600 */

  /* ---- Signature gradients ---- */
  --accent-gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
  --accent-gradient-bright: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  --deco-line: linear-gradient(90deg, transparent, rgba(245,158,11,.5), transparent);
  --glow-radial-nova:
    radial-gradient(ellipse at 50% 0%, transparent 0%, var(--surface-950) 70%),
    radial-gradient(circle at 12% 22%, rgba(245,158,11,.15) 0%, transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(99,102,241,.10) 0%, transparent 32%),
    radial-gradient(circle at 80% 20%, rgba(6,182,212,.08) 0%, transparent 26%);

  /* ---- Glow shadows ---- */
  --glow-sm: 0 0 20px rgba(245,158,11,.30);
  --glow-md: 0 0 40px rgba(245,158,11,.40);
  --glow-lg: 0 0 60px rgba(245,158,11,.35);
  --glow-success: 0 0 20px rgba(34,197,94,.30);
  --glow-danger: 0 0 20px rgba(239,68,68,.30);
  --glow-cyan: 0 0 20px rgba(6,182,212,.30);
  --shadow-glass: 0 8px 32px 0 rgba(0,0,0,.37);

  /* ---- Typography ---- */
  --font-display: "Archivo", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", Consolas, monospace;

  /* ---- Layout ---- */
  --container: 80rem;       /* 1280px */
  --container-narrow: 48rem;
  --radius: .75rem;         /* Nova = soft rounded */
  --radius-sm: .375rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --hairline: 1px;

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 500ms;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* ---- Signature parallelogram (HUD shape language) ---- */
  --skew-clip: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%);

  /* ---- HUD grid background pattern ---- */
  --grid-pattern: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23334155' stroke-width='0.5' opacity='0.4'%3E%3Cpath d='M80 0H0V80'/%3E%3C/g%3E%3C/svg%3E");
}