/* ============================================================
   VELÍN — Brand Tokens
   Premium Dark Command aesthetic (matches AIRace MasterPlan v2)
   Source of truth: VELIN_BRAND_PRODUCT_SPEC.md
   ============================================================ */

:root {
  /* --- Surfaces --- */
  --vln-bg:        #0A0E14; /* page background */
  --vln-panel:     #0F1621; /* card / panel */
  --vln-panel-2:   #111C2A; /* slightly raised panel */
  --vln-line:      #1E2A3A; /* borders / hairlines */
  --vln-line-soft: #17222F; /* softer dividers */

  /* --- Text --- */
  --vln-text:      #E6EDF3; /* primary text */
  --vln-muted:     #93A4B8; /* secondary text */
  --vln-faint:     #5E6E80; /* tertiary / captions */

  /* --- Brand accents --- */
  --vln-cyan:      #22D3EE; /* command-cyan — primary accent */
  --vln-cyan-deep: #0E7C90; /* darker cyan for gradients */
  --vln-amber:     #F5B301; /* ROI amber */
  --vln-green:     #34D399; /* positive / growth */

  /* --- Four elements (AI-team mascots) --- */
  --vln-fire:      #FF6A3D; /* Iskra 🔥 */
  --vln-air:       #7DD3FC; /* Větra 💨 */
  --vln-water:     #38BDF8; /* Volna 💧 */
  --vln-earth:     #34D399; /* Grán 🌍 */

  /* --- Typography --- */
  --vln-font-display: "Space Grotesk", "Unbounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vln-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --vln-font-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* --- Type scale (fluid) --- */
  --vln-fs-hero:   clamp(2.6rem, 6vw + 1rem, 5.2rem);
  --vln-fs-h2:     clamp(1.7rem, 2.4vw + 1rem, 2.8rem);
  --vln-fs-h3:     clamp(1.2rem, 1vw + 0.9rem, 1.5rem);
  --vln-fs-lead:   clamp(1.05rem, 0.6vw + 0.95rem, 1.35rem);
  --vln-fs-body:   1rem;
  --vln-fs-small:  0.875rem;
  --vln-fs-mono:   0.9rem;

  /* --- Spacing scale (8px grid) --- */
  --vln-s1: 0.5rem;   /*  8px */
  --vln-s2: 1rem;     /* 16px */
  --vln-s3: 1.5rem;   /* 24px */
  --vln-s4: 2rem;     /* 32px */
  --vln-s5: 3rem;     /* 48px */
  --vln-s6: 4rem;     /* 64px */
  --vln-s7: 6rem;     /* 96px */

  /* --- Radii --- */
  --vln-r-sm: 8px;
  --vln-r-md: 14px;
  --vln-r-lg: 22px;
  --vln-r-pill: 999px;

  /* --- Elevation / glow --- */
  --vln-shadow:      0 18px 48px rgba(0, 0, 0, 0.55);
  --vln-glow-cyan:   0 0 0 1px rgba(34, 211, 238, 0.35), 0 8px 40px rgba(34, 211, 238, 0.22);
  --vln-glow-amber:  0 0 0 1px rgba(245, 179, 1, 0.30), 0 8px 40px rgba(245, 179, 1, 0.18);

  /* --- Gradients / motif --- */
  --vln-grad-cyan:   linear-gradient(135deg, #22D3EE 0%, #0E7C90 100%);
  --vln-grad-panel:  linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 60%);
  --vln-grad-hero:   radial-gradient(1200px 600px at 70% -10%, rgba(34,211,238,0.16), transparent 60%),
                     radial-gradient(900px 500px at 10% 20%, rgba(245,179,1,0.06), transparent 55%);

  /* --- Layout --- */
  --vln-maxw: 1160px;
  --vln-gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- Motion --- */
  --vln-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vln-dur:  0.28s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --vln-dur: 0.001s; }
}