/* avihayzanetti.ai design tokens. Direction A: dark editorial, amber accent, Fraunces + Inter.
   Approved 2026-04-20; web spec written 2026-10-01. Prefixes: c color, f font, fs size, sp space,
   r radius, sh shadow, dur/ease motion, z layer. Legacy site variables are untouched. */

@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-roman.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-italic.woff2") format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
/* Metric-matched fallbacks so the swap does not shift layout. */
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.4%;ascent-override:90.2%;descent-override:22.5%;line-gap-override:0%}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia");size-adjust:100%;ascent-override:97%;descent-override:25%;line-gap-override:0%}

:root{
  color-scheme:dark;

  /* color */
  --c-bg:#0a0a0b;
  --c-raised:#111114;
  --c-card:#16161b;
  --c-border:rgba(244,239,230,.08);
  --c-border-strong:rgba(244,239,230,.18);
  --c-ink:#f4efe6;
  --c-body:#a8a39a;
  --c-faint:#8a857c;          /* corrected from #6b675f (3.5:1) to 5.4:1 on --c-bg */
  --c-amber:#e8b65a;
  --c-amber-hover:#f5d79a;
  --c-amber-glow:rgba(232,182,90,.18);
  --c-on-amber:#0a0a0b;
  --c-danger:#e85a5a;
  --c-success:#7dd881;

  /* font families */
  --f-display:"Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif;
  --f-body:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* type scale, fluid from 375 px to 1100 px */
  --fs-h1:clamp(40px,23.45px + 4.414vw,72px);
  --fs-h2:clamp(28px,21.8px + 1.655vw,40px);
  --fs-h3:clamp(21px,19.45px + .414vw,24px);
  --fs-lede:clamp(18px,16.97px + .276vw,20px);
  --fs-body:clamp(16.5px,16.1px + .11vw,17.5px);
  --fs-small:14px;
  --fs-eyebrow:clamp(12px,11.6px + .11vw,13px);
  --fs-numeral:clamp(36px,25.6px + 2.76vw,56px);
  --lh-display:1.05;
  --lh-heading:1.15;
  --lh-body:1.65;
  --lh-lede:1.55;
  --track-display:-.02em;
  --track-eyebrow:.16em;
  --measure:64ch;

  /* spacing, 4 to 128 */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;
  --sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;
  --section-y:clamp(64px,44px + 5.4vw,112px);
  --gutter:20px;
  --container:1120px;
  --reading:720px;

  /* radius */
  --r-sm:8px;--r-md:12px;--r-pill:999px;

  /* elevation: one soft level, plus the amber focus halo */
  --sh-1:0 24px 60px -24px rgba(0,0,0,.65);
  --sh-focus:0 0 0 4px rgba(232,182,90,.28);

  /* motion */
  --dur-1:160ms;--dur-2:240ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* layers */
  --z-base:1;--z-raised:10;--z-bar:100;--z-dock:200;--z-overlay:300;

  /* breakpoints (media queries cannot read variables; kept here as the single reference): 480, 768, 1100 */
  --bp-sm:480px;--bp-md:768px;--bp-lg:1100px;

  /* focus ring */
  --focus-ring:2px solid var(--c-amber);
  --focus-offset:3px;
}

@media (min-width:768px){:root{--gutter:32px}}