/* Syna shared design tokens — GENERATED, do not edit by hand.
 * Source of truth: syna-theme-kit/tokens/design-tokens.ts
 * Regenerate: node syna-theme-kit/scripts/generate-tokens-css.mjs <outFile>
 * Token contract version: 1.0.0 | 63 tokens
 *
 * Consumers (mobile-companion PWA, static demos) vendor this file as their
 * baseline token layer. When docked into a host that sets __SYNA_THEME_HOST__,
 * the live host CSS variables override these defaults and these become fallback.
 */
:root {

  /* spotlight */
  --spotlight-size: 400px;
  --spotlight-edge-size: 300px;
  --spotlight-intensity: 0.08;
  --spotlight-edge-intensity: 0.5;

  /* background */
  --bg-primary: #0e0c16;
  --bg-secondary: #151920;
  --bg-tertiary: #1e2329;
  --bg-tertiary-rgb: 30, 35, 41;
  --bg-elevated: #252a33;
  --bg-hover: #2a3040;

  /* glass */
  --glass-bg: rgba(30,35,45,0.65);
  --glass-bg-hover: rgba(40,45,55,0.7);
  --glass-border: rgba(77,232,255,0.2);
  --glass-border-hover: rgba(77,232,255,0.35);
  --glass-blur: 12px;
  --glass-opacity: 0.65;
  --glass-tint: rgba(77,232,255,0.03);
  --panel-bg: rgba(30,35,45,0.65);
  --panel-bg-hover: rgba(40,45,55,0.7);
  --panel-border: rgba(77,232,255,0.2);
  --panel-border-hover: rgba(77,232,255,0.35);
  --panel-surface: rgba(40,45,55,0.73);

  /* accent */
  --accent-cyan: #0dcaf0;
  --accent-purple: #6f42c1;
  --accent-pink: #e91e8c;
  --accent-indigo: #6366f1;
  --accent-blue: #3b82f6;
  --accent-teal: #14b8a6;
  --accent-cyan-rgb: 13, 202, 240;
  --accent-purple-rgb: 111, 66, 193;
  --accent-pink-rgb: 233, 30, 140;
  --accent-indigo-rgb: 99, 102, 241;
  --accent-blue-rgb: 59, 130, 246;
  --accent-teal-rgb: 20, 184, 166;

  /* glow */
  --glow-cyan: #4de8ff;
  --glow-purple: #a855f7;
  --glow-rose: #fb7185;
  --glow-amber: #fbbf24;
  --rainbow-gradient: linear-gradient(135deg, #4de8ff, #a855f7, #fb7185);

  /* motion */
  --rainbow-duration: 3s;

  /* text */
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  /* status */
  --status-success: #22c55e;
  --status-warning: #eab308;
  --status-error: #ef4444;
  --status-info: #3b82f6;

  /* button */
  --btn-primary-bg: #0dcaf0;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: transparent;
  --btn-outline-bg: transparent;

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(13,202,240,0.3);

  /* motion */
  --motion-fast: 150ms;
  --motion-normal: 300ms;
  --motion-slow: 500ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* typography */
  --font-heading: 'Orbitron', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-main: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="light"] {
  --spotlight-intensity: 0.06;
  --spotlight-edge-intensity: 0.4;
  --bg-primary: #f8f9fa;
  --bg-secondary: #e9ecef;
  --bg-tertiary: #dee2e6;
  --bg-tertiary-rgb: 222, 226, 230;
  --bg-elevated: #ffffff;
  --bg-hover: #e2e6ea;
  --glass-bg: rgba(255,255,255,0.7);
  --glass-bg-hover: rgba(255,255,255,0.8);
  --glass-border: rgba(0,0,0,0.1);
  --glass-border-hover: rgba(0,0,0,0.2);
  --glass-opacity: 0.7;
  --glass-tint: rgba(0,0,0,0.02);
  --panel-bg: rgba(255,255,255,0.7);
  --panel-bg-hover: rgba(255,255,255,0.8);
  --panel-border: rgba(0,0,0,0.1);
  --panel-border-hover: rgba(0,0,0,0.2);
  --panel-surface: rgba(255,255,255,0.78);
  --accent-cyan: #0891b2;
  --accent-purple: #7c3aed;
  --accent-pink: #db2777;
  --accent-indigo: #4f46e5;
  --accent-blue: #2563eb;
  --accent-teal: #0d9488;
  --accent-cyan-rgb: 8, 145, 178;
  --accent-purple-rgb: 124, 58, 237;
  --accent-pink-rgb: 219, 39, 119;
  --accent-indigo-rgb: 79, 70, 229;
  --accent-blue-rgb: 37, 99, 235;
  --accent-teal-rgb: 13, 148, 136;
  --glow-cyan: #06b6d4;
  --glow-purple: #8b5cf6;
  --glow-rose: #f43f5e;
  --glow-amber: #f59e0b;
  --rainbow-gradient: linear-gradient(135deg, #06b6d4, #8b5cf6, #f43f5e);
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --status-success: #16a34a;
  --status-warning: #ca8a04;
  --status-error: #dc2626;
  --status-info: #2563eb;
  --btn-primary-bg: #0891b2;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --shadow-glow: 0 0 10px rgba(8,145,178,0.15);
}