/* ============================================================
   Design Tokens — Mostafa Nagy Portfolio
   ============================================================ */

:root {

  /* ── Colour ────────────────────────────────────────────────── */

  --bg:          #F3F0E9;    /* warm parchment */
  --bg-2:        #EAE6DC;    /* section alt */
  --bg-dark:     #1D3B4A;    /* dark petrol — inverted sections */
  --bg-dark-2:   #152D39;    /* deeper petrol */

  --ink:         #1A1816;    /* near-black, warm */
  --ink-2:       #5C5852;    /* secondary */
  --ink-3:       #67635D;    /* lightest text colour — 4.8:1 on --bg, 4.3:1 on --bg-2; do not lighten (WCAG AA) */
  --ink-inv:     #F3F0E9;    /* on dark bg */
  --ink-inv-2:   #9DBFCC;    /* muted on dark bg — 6:1 on --bg-dark */

  --accent:      #1D3B4A;    /* dark petrol */
  --accent-h:    #152D39;    /* hover state */
  --accent-lt:   #E3EDF1;    /* pale tint */

  --rule:        #D4CFCA;    /* border / divider */
  --rule-lt:     #E0DBD3;    /* lighter rule */

  /* ── Typography ────────────────────────────────────────────── */

  --serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:   'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Type Scale ─────────────────────────────────────────────── */

  --t-hero:    clamp(2.625rem, 4.5vw + 0.75rem, 5.25rem);
  --t-display: clamp(1.875rem, 2.5vw + 0.5rem,  3rem);
  --t-xl:      clamp(1.375rem, 1.25vw + 0.25rem, 1.875rem);
  --t-lg:      1.25rem;
  --t-md:      1.5rem;
  --t-base:    1rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-label:   0.75rem;     /* 12px floor — no text below this size */

  /* ── Spacing — 4px base grid ────────────────────────────────── */

  --s-1:   0.25rem;
  --s-2:   0.5rem;
  --s-3:   0.75rem;
  --s-4:   1rem;
  --s-5:   1.25rem;
  --s-6:   1.5rem;
  --s-8:   2rem;
  --s-10:  2.5rem;
  --s-12:  3rem;
  --s-16:  4rem;
  --s-20:  5rem;
  --s-24:  6rem;
  --s-32:  8rem;

  /* ── Radius ─────────────────────────────────────────────────── */

  --radius-sm: 2px;
  --radius:    4px;

  /* ── Layout ─────────────────────────────────────────────────── */

  --max-w:       1280px;
  --max-w-text:  680px;
  --gutter:      clamp(1.5rem, 4vw, 3rem);
  --nav-h:       72px;
  --tap-target:  44px;       /* minimum touch-target size for interactive components */

  /* ── Motion ─────────────────────────────────────────────────── */

  --ease-f:   150ms ease;
  --ease:     240ms ease;
  --ease-s:   480ms cubic-bezier(0.22, 0, 0.12, 1);

}