/* ============================================================
   KONDOROSI ZOLTAN — DESIGN TOKENS v1.0
   Premium Portfolio Design System
   Inspired by: Apple, Linear, Stripe, Arc, Nothing
   ============================================================ */

:root {
  /* ── Page ──────────────────────────────────────── */
  --page-bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-overlay: rgba(255, 255, 255, 0.72);
  --surface-glass: rgba(255, 255, 255, 0.55);
  --surface-dark: #0F172A;
  --surface-dark-raised: #1E293B;

  /* ── Text ──────────────────────────────────────── */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;
  --text-accent: #2563EB;

  /* ── Accent ────────────────────────────────────── */
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-light: #DBEAFE;
  --accent-subtle: rgba(37, 99, 235, 0.06);
  --accent-glow: rgba(37, 99, 235, 0.15);

  /* ── Borders ───────────────────────────────────── */
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-subtle: #F1F5F9;
  --border-glass: rgba(255, 255, 255, 0.18);

  /* ── Shadows ───────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.14);
  --shadow-glow: 0 0 40px rgba(37, 99, 235, 0.12);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 8px 40px rgba(15, 23, 42, 0.10);

  /* ── Radius ────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── Typography ────────────────────────────────── */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 2rem;       /* 32px */
  --text-4xl: 2.5rem;     /* 40px */
  --text-5xl: 3.25rem;    /* 52px */
  --text-6xl: 4rem;       /* 64px */
  --text-hero: clamp(2.5rem, 5vw, 4.5rem);
  --text-hero-editorial: clamp(2.25rem, 4.6vw, 3.75rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.06em;

  /* ── Spacing ───────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-section: clamp(80px, 10vw, 140px);

  /* ── Layout ────────────────────────────────────── */
  --max-width: 1200px;
  --max-narrow: 720px;
  --max-wide: 1400px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-height: 64px;

  /* ── Transitions ───────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* ── Z-index ───────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}