/* ============================================================
   VOLA — Design Tokens
   Premium Light Theme · v1.0 · June 2026
   Source: "Vola — Design System Brief"
   ============================================================ */

/* ---- Fonts ---- */
/* Fraunces (display serif, optical-size axis), Inter (body/UI),
   JetBrains Mono (mono accents). Full Turkish glyph support. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&display=swap');

:root {
  /* ---------- Color — premium light ---------- */
  --bg:          #FAFAF7; /* warm off-white page background */
  --surface:     #FFFFFF; /* cards, nav (scrolled), fields */
  --ink:         #16181D; /* headlines, primary text */
  --ink-2:       #5A6068; /* secondary text, captions */
  --line:        #E8E8E4; /* hairline borders, dividers */
  --accent:      #1D4ED8; /* CTAs, links, highlights — deep cobalt */
  --accent-ink:  #16308F; /* accent hover / pressed */
  --accent-soft: #EEF2FE; /* accent tints: tags, icon backgrounds */
  --success:     #147D58;
  --error:       #B4232A;

  /* ---------- Typography ---------- */
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale (clamp: mobile → desktop) */
  --fs-display:  clamp(2.375rem, 1.30rem + 4.78vw, 4rem);   /* 38 → 64 */
  --fs-h1:       clamp(1.875rem, 1.35rem + 2.33vw, 2.75rem); /* 30 → 44 */
  --fs-h2:       clamp(1.5rem,   1.34rem + 0.71vw, 1.75rem); /* 24 → 28 */
  --fs-body-lg:  clamp(1.0625rem, 1.00rem + 0.28vw, 1.1875rem); /* 17 → 19 */
  --fs-body:     1rem;       /* 16 */
  --fs-caption:  0.8125rem;  /* 13 */
  --fs-label:    0.75rem;    /* 12 */

  --lh-display: 1.06;
  --lh-h1:      1.10;
  --lh-h2:      1.28;
  --lh-body-lg: 1.58;
  --lh-body:    1.625;

  --tracking-tight: -0.01em;  /* large sizes */
  --tracking-label:  0.08em;  /* mono uppercase labels */

  /* ---------- Spacing scale (px) ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10:128px;
  --space-11:160px;

  /* Section vertical padding: 128 desktop / 80 mobile */
  --section-pad: clamp(5rem, 3.5rem + 6.7vw, 8rem);

  /* ---------- Layout ---------- */
  --content-max: 1200px;
  --gutter: 24px;
  --margin-mobile: 24px;
  --margin-desktop: 64px;

  /* ---------- Radii ---------- */
  --radius-sm:  6px;   /* inputs, tags */
  --radius-md: 12px;   /* cards */
  --radius-pill: 999px;/* pills, buttons */

  /* ---------- Elevation ---------- */
  --shadow-0: none;                              /* hairline border only */
  --shadow-1: 0 8px 30px rgba(22,24,29,0.06);    /* card hover */

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;  /* hovers */
  --dur-base: 250ms;  /* reveals */
  --dur-slow: 400ms;  /* hero load */

  /* ---------- Geometric motif ---------- */
  --motif-accent: rgba(29,78,216,0.25);          /* --accent @ 25% */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}