/* ============================================================
   VADAWEB STUDIO — Design Tokens
   Colors · Typography · Spacing · Shadows · Motion
   ============================================================ */

/* Fonts loaded via <link> in HTML — no @import needed */

:root {

  /* ── Background ──────────────────────────────────────── */
  --bg-canvas:      #050e1a;
  --bg-surface:     #0a1628;
  --bg-surface-2:   #0f1e36;

  /* ── Foreground ──────────────────────────────────────── */
  --fg-1: #f0f4f8;
  --fg-2: #a8b8cc;
  --fg-3: #6d8ea8;   /* was #637a92 — lifted to 5.6:1 (WCAG AA) */
  --fg-4: #7494ae;   /* was #3d5068 — lifted to 6.1:1 (WCAG AA) */

  /* ── Cyan / Teal spectrum ─────────────────────────────── */
  --cyan-300:  #67f0db;
  --cyan-400:  #43c5d1;
  --cyan-500:  #2db8c8;
  --teal-400:  #29d3ae;
  --teal-500:  #1fb89a;

  /* ── Navy ────────────────────────────────────────────── */
  --navy-900:  #071222;
  --navy-950:  #040d18;

  /* ── Stroke / borders ────────────────────────────────── */
  --stroke-1: rgba(255,255,255,0.07);
  --stroke-2: rgba(255,255,255,0.13);

  /* ── Gradients ───────────────────────────────────────── */
  --gradient-vada:      linear-gradient(135deg, #51ebc9 0%, #43c5d1 45%, #1968b6 100%);
  --gradient-vada-soft: linear-gradient(135deg, rgba(81,235,201,0.12) 0%, rgba(25,104,182,0.18) 100%);

  /* ── Typography ──────────────────────────────────────── */
  --font-sans:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;

  --lh-base:  1.65;
  --lh-tight: 1.15;

  /* ── Spacing ─────────────────────────────────────────── */
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* ── Border radius ───────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.60), 0 4px 12px rgba(0,0,0,0.35);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.07);
  --glow-cyan:    0 0 0 1px rgba(67,197,209,0.25), 0 8px 32px -8px rgba(67,197,209,0.45);

  /* ── Motion ──────────────────────────────────────────── */
  --dur-fast: 0.18s;
  --dur-base: 0.28s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}