/* ═══════════════════════════════════════════
   DESIGN TOKENS
   Anas Ben Yahia Portfolio
═══════════════════════════════════════════ */

:root {

  /* ──────────────── COLOR ──────────────── */

  /* Backgrounds */
  --c-bg:           #050505;
  --c-bg-surface:   #0c0c0c;
  --c-bg-elevated:  #131313;
  --c-bg-card:      rgba(255,255,255,0.025);

  /* Text */
  --c-text-primary:   #FFFFFF;
  --c-text-secondary: rgba(255,255,255,0.60);
  --c-text-ghost:     rgba(255,255,255,0.28);
  --c-text-micro:     rgba(255,255,255,0.20);

  /* Borders */
  --c-border:       rgba(255,255,255,0.07);
  --c-border-hover: rgba(255,255,255,0.14);
  --c-border-focus: rgba(255,255,255,0.30);

  /* Accent — warm sand/off-white, very restrained */
  --c-accent:       #E8DFD0;
  --c-accent-soft:  rgba(232,223,208,0.08);
  --c-accent-glow:  rgba(232,223,208,0.04);

  /* Brand */
  --c-available:    #7DEFA1;      /* Subtle green for availability */

  /* ──────────────── TYPOGRAPHY ──────────────── */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale */
  --text-hero:    clamp(52px, 9vw, 120px);
  --text-display: clamp(36px, 5.5vw, 72px);
  --text-h2:      clamp(28px, 3.5vw, 48px);
  --text-h3:      clamp(20px, 2vw, 28px);
  --text-body-lg: clamp(16px, 1.2vw, 18px);
  --text-body:    15px;
  --text-small:   13px;
  --text-micro:   11px;

  /* Weights */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* Line heights */
  --lh-tight:   0.92;
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:   -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.15em;

  /* ──────────────── SPACING ──────────────── */

  --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:   80px;
  --space-10:  120px;
  --space-11:  160px;

  /* ──────────────── LAYOUT ──────────────── */

  --container-max: 1360px;
  --container-pad: clamp(24px, 5vw, 80px);

  /* Grid */
  --grid-cols: 12;
  --grid-gap:  clamp(16px, 2vw, 32px);

  /* ──────────────── ANIMATION ──────────────── */

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-magnetic: cubic-bezier(0.23, 1, 0.32, 1);

  --dur-fast:   200ms;
  --dur-med:    400ms;
  --dur-slow:   600ms;
  --dur-slower: 900ms;

  /* ──────────────── RADIUS ──────────────── */

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ──────────────── Z-INDEX ──────────────── */

  --z-blob:       0;
  --z-content:    1;
  --z-nav:        100;
  --z-overlay:    200;
  --z-cursor:     999;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-med:    0ms;
    --dur-slow:   0ms;
    --dur-slower: 0ms;
  }
}