:root{
  --white:#fff;
  --black:#0a0a0a;
  --ink-950:#0a0a0a;
  --ink-900:#171717;
  --ink-800:#262626;
  --ink-700:#404040;
  --ink-600:#525252;
  --ink-500:#6e6e6e;
  --ink-400:#a3a3a3;
  --ink-300:#d4d4d4;
  --ink-200:#e6e6e6;
  --ink-100:#f2f2f2;
  --ink-50:#f8f8f8;
  --surface:#fafafa;
  --paper:#fff;

  /* ---------- Safe areas (iPhone notch / home indicator) ---------- */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);

  /* ---------- Icon sizing system (consistent across every screen) ---------- */
  --icon-2xs:14px;
  --icon-xs:16px;
  --icon-sm:18px;
  --icon-md:20px;
  --icon-lg:24px;
  --icon-btn:clamp(40px,4.4vw,44px);

  /* ---------- Fluid text wrapping ---------- */
  --text-wrap:balance;
  --text-wrap-pretty:pretty;

  --text:var(--ink-900);
  --text-muted:var(--ink-600);
  --text-faint:var(--ink-400);
  --border:1px solid var(--ink-200);
  --border-strong:1px solid var(--ink-300);
  --border-dark:1px solid var(--ink-800);

  --on-dark:rgba(255,255,255,.92);
  --on-dark-muted:rgba(255,255,255,.62);
  --on-dark-faint:rgba(255,255,255,.4);

  --error:#b3261e;
  --error-soft:#fbeceb;
  --success:#1f7a45;
  --success-soft:#eaf6ef;
  --warning:#9a5b0a;

  --font-sans:"Thmanyah Sans","Segoe UI",Tahoma,Arial,sans-serif;
  --font-display:"Thmanyah Display","Thmanyah Sans","Segoe UI",Tahoma,sans-serif;

  --display-xl:clamp(4rem,11vw,10.5rem);
  --display-lg:clamp(3.25rem,8vw,8.5rem);
  --display-md:clamp(2.75rem,6vw,7rem);
  --display-sm:clamp(2.25rem,4.5vw,4.5rem);
  --display-xs:clamp(1.6rem,3vw,2.75rem);

  --text-xl:clamp(1.125rem,1.5vw,1.375rem);
  --text-lg:clamp(1rem,1.3vw,1.1875rem);
  --text-base:1rem;
  --text-sm:.875rem;
  --text-xs:.78rem;
  --text-2xs:.66rem;
  --text-fluid-sm:clamp(.78rem,1.2vw,.875rem);
  --text-fluid-base:clamp(.92rem,1.4vw,1.06rem);

  --lh-tight:1.05;
  --lh-display:1.08;
  --lh-body:1.7;
  --lh-base:1.6;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  --space-xs:var(--space-1);
  --space-sm:var(--space-2);
  --space-md:var(--space-4);
  --space-lg:var(--space-6);
  --space-xl:var(--space-12);

  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 10px 30px -12px rgba(0,0,0,.14);
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.22);
  --shadow-focus:0 0 0 3px rgba(10,10,10,.16);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur-fast:120ms;
  --dur:200ms;
  --dur-med:320ms;
  --dur-slow:480ms;

  /* ---------- Container system ---------- */
  /* --gutter scales with the viewport; at 4K it stops growing so content
     stays centred instead of sprawling edge-to-edge. */
  --gutter:clamp(16px,5vw,56px);
  --shell:min(100% - var(--gutter)*2,1400px);
  --shell-wide:min(100% - var(--gutter)*2,1600px);
  --shell-narrow:min(100% - var(--gutter)*2,1000px);
  --shell-read:min(100% - var(--gutter)*2,720px);

  /* ---------- Fluid spacing ---------- */
  --section:clamp(64px,10vw,150px);
  --section-sm:clamp(44px,7vw,90px);
  --section-xs:clamp(28px,4.5vw,48px);
  --gap:clamp(16px,2vw,32px);

  --header-h:76px;
  --header-h-compact:58px;
  --header-h-mobile:60px;
  --bottom-nav-h:calc(60px + var(--safe-bottom));

  --z-header:100;
  --z-nav:120;
  --z-backdrop:250;
  --z-menu:300;
  --z-drawer:320;
  --z-modal:400;
  --z-toast:600;

  /* ---------- Content-driven grid column widths ----------
     Auto-fill with a minimum column width decides the column count from
     the space available (not the device name). These tiers merely tune the
     minimum card width so density lands at: 1 col @320, 2 @360-430,
     2-3 @tablet, 4 @desktop, 4-5 @wide — without cards exploding on 4K. */
  --grid-min:7.75rem;     /* <560px   → 2 cols @320 (mobile: two cards) */
  --grid-min-sm:11.5rem;  /* 560-767  → 2-3 cols (tablet portrait) */
  --grid-min-md:13.5rem;  /* 768-1099 → 3 cols (tablet) */
  --grid-min-lg:14rem;    /* 1100-1299 → 4 cols (laptop) */
  --grid-min-xl:16.25rem; /* 1300-1599 → 4 cols (desktop) */
  --grid-min-xxl:15.5rem; /* 1600+    → 5 cols on wide/4K */

  --maxw-content:36ch;

  --sans:var(--font-sans);
  --display:var(--font-display);
  --gray-100:var(--ink-50);
  --gray-200:var(--ink-100);
  --gray-300:var(--ink-300);
  --gray-500:var(--ink-500);
  --gray-700:var(--ink-700);
  --dark:#222;
  --ink:var(--ink-950);
}