/* ============================================================
   CAROZO MEDIA — DESIGN TOKENS  (single source of truth)
   Concept: editorial monograph · warm ink-black + antique brass
   Architecture: PRIMITIVES (raw values) → SEMANTIC (role aliases).
   Components reference SEMANTIC tokens, never raw primitives.
   ============================================================ */
:root{
  /* ---------- PRIMITIVES ---------- */

  /* Warm ink ramp (the canvas) */
  --ink-900:#0C0A07;   /* base background  */
  --ink-800:#15120C;   /* raised surface   */
  --ink-700:#1A160E;   /* paper panel      */
  --ink-600:#1E1A12;   /* elevated surface */

  /* Bone ramp (the ink we write with) */
  --bone-100:#F4EFE3;  /* primary text     */
  --bone-200:#DCD5C4;  /* secondary text   */
  --bone-400:#A89F8B;  /* muted text       */
  --bone-500:#9A9079;  /* faint text       */

  /* Antique brass ramp (the single accent) */
  --brass-300:#D6B273; /* bright/hover     */
  --brass-500:#B68A4E; /* accent           */
  --brass-700:#7A5C2E; /* deep/border      */

  /* Hairline ink (borders on dark) */
  --hair-1:rgba(244,239,227,.08);
  --hair-2:rgba(244,239,227,.17);
  --hair-3:rgba(244,239,227,.34);

  /* Type families */
  --ff-display:'Fraunces',Georgia,'Times New Roman',serif;
  --ff-grotesque:'Mona Sans',system-ui,-apple-system,sans-serif;

  /* Modular type scale — 1.25 (major third), fluid via clamp.
     Use --step-* for new work; legacy rules keep their own clamps. */
  --step--1:clamp(.78rem,.76rem + .1vw,.85rem);
  --step-0 :clamp(1rem,.96rem + .2vw,1.0625rem);   /* body 16–17 */
  --step-1 :clamp(1.2rem,1.1rem + .5vw,1.4rem);
  --step-2 :clamp(1.5rem,1.3rem + 1vw,1.95rem);
  --step-3 :clamp(1.9rem,1.5rem + 2vw,2.7rem);
  --step-4 :clamp(2.4rem,1.7rem + 3.5vw,3.8rem);
  --step-5 :clamp(3rem,1.8rem + 6vw,5.3rem);
  --step-6 :clamp(3.6rem,1.5rem + 10vw,7.4rem);    /* masthead */

  /* Spacing scale — 4px base, geometric */
  --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;   --space-7:3rem;   --space-8:4rem;
  --space-9:6rem;   --space-10:8rem;  --space-11:11rem;

  /* Radius — sharp editorial; minimal, intentional */
  --radius-0:0px; --radius-1:2px; --radius-pill:999px; --radius-round:50%;

  /* Shadow — restrained, warm */
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 18px 50px -18px rgba(0,0,0,.7);
  --shadow-plate:0 40px 120px -28px rgba(0,0,0,.85);

  /* Motion */
  --dur-1:.18s; --dur-2:.32s; --dur-3:.5s; --dur-4:.8s; --dur-5:1.2s;
  --ease-out:cubic-bezier(.22,.9,.24,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  /* Layout */
  --measure:65ch;            /* readable line length */
  --gutter:max(56px, env(safe-area-inset-left));
  --bp-sm:520px; --bp-md:880px; --bp-lg:1100px; --bp-xl:1400px;

  /* Z-index scale */
  --z-base:1; --z-overlay:10; --z-nav:100; --z-fixed-ui:9995;
  --z-grain:9997; --z-drawer:9998; --z-cursor:99999; --z-skip:100000;

  /* ---------- SEMANTIC (role) ALIASES ----------
     These names are what components use. Remap here to retheme. */
  --bg:var(--ink-900);
  --bg-soft:var(--ink-800);
  --paper:var(--ink-700);
  --bg-elev:var(--ink-600);

  --ivory:var(--bone-100);
  --ivory-soft:var(--bone-200);
  --muted:var(--bone-400);
  --muted-soft:var(--bone-500);

  --gold:var(--brass-500);
  --gold-bright:var(--brass-300);
  --gold-deep:var(--brass-700);

  --line:var(--hair-1);
  --line-soft:var(--hair-2);
  --line-strong:var(--hair-3);

  --font-display:var(--ff-display);
  --font-body:var(--ff-grotesque);
  --font-ui:var(--ff-grotesque);

  /* Friendly role names for new components */
  --color-surface:var(--bg);
  --color-surface-raised:var(--bg-soft);
  --color-text:var(--ivory);
  --color-text-muted:var(--muted);
  --color-accent:var(--gold);
  --color-accent-hover:var(--gold-bright);
  --color-border:var(--line-soft);
}