/* ============================================================
   DESIGN TOKENS — Qamar Zaka Portfolio
   ============================================================ */

:root {

  /* ── Colors ─────────────────────────────────────────────── */
  --bg:           #F5F5F2;
  --text:         #111111;
  --text-muted:   #686868;
  --accent:       #315CFF;
  --accent-hover: #2347E5;
  --accent-light: rgba(49, 92, 255, 0.08);
  --surface:      #FFFFFF;
  --border:       #E4E4E0;
  --border-dark:  #CECEC8;
  --success:      #16A34A;
  --error:        #DC2626;

  /* ── Spacing (4px base) ──────────────────────────────────── */
  --s-1:  0.25rem;   /*  4px */
  --s-2:  0.5rem;    /*  8px */
  --s-3:  0.75rem;   /* 12px */
  --s-4:  1rem;      /* 16px */
  --s-5:  1.25rem;   /* 20px */
  --s-6:  1.5rem;    /* 24px */
  --s-8:  2rem;      /* 32px */
  --s-10: 2.5rem;    /* 40px */
  --s-12: 3rem;      /* 48px */
  --s-16: 4rem;      /* 64px */
  --s-20: 5rem;      /* 80px */
  --s-24: 6rem;      /* 96px */

  /* ── Typography ──────────────────────────────────────────── */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(3rem,   6.5vw,  5.5rem);
  --fs-h1:      clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 3vw,   2.25rem);
  --fs-h3:      1.25rem;
  --fs-lg:      1.125rem;
  --fs-base:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  --ls-tight:  -0.03em;
  --ls-snug:   -0.02em;
  --ls-wide:    0.06em;
  --ls-wider:   0.12em;

  /* ── Border Radius ───────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-sm: 0 1px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --sh-lg: 0 8px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);
  --sh-xl: 0 16px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease:       cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --t-fast:     150ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --t-base:     250ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --t-slow:     400ms cubic-bezier(0.0, 0.0, 0.2, 1.0);

  /* ── Layout ──────────────────────────────────────────────── */
  --max-w:        1280px;
  --pad-x:        clamp(1.25rem, 5vw, 5rem);
  --section-py:   clamp(5rem, 10vw, 9rem);
  --nav-h:        72px;
}