/* ───────────────────────────────────────────────────────────
   andrewwolhuter.com — design tokens
   Subset of the Andrew Wolhuter Design System (colors_and_type.css).
   Hex values are AUTHORITATIVE and LOCKED. Do not invent colours.
   ─────────────────────────────────────────────────────────── */

/* ─── FONT FACES (subset that ships with the site) ─────────── */
@font-face { font-family:"Quanta Grotesk Pro"; font-weight:300; font-style:normal; src:url("fonts/QuantaGroteskPro-Light.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Quanta Grotesk Pro"; font-weight:400; font-style:normal; src:url("fonts/QuantaGroteskPro-Regular.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Quanta Grotesk Pro"; font-weight:400; font-style:italic; src:url("fonts/QuantaGroteskPro-Italic.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Quanta Grotesk Pro"; font-weight:500; font-style:normal; src:url("fonts/QuantaGroteskPro-Medium.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Quanta Grotesk Pro"; font-weight:700; font-style:normal; src:url("fonts/QuantaGroteskPro-Bold.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Quanta Grotesk Pro"; font-weight:800; font-style:normal; src:url("fonts/QuantaGroteskPro-ExtraBold.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Quanta Grotesk Pro"; font-weight:900; font-style:normal; src:url("fonts/QuantaGroteskPro-Black.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Quanta Grotesk Pro"; font-weight:900; font-style:italic; src:url("fonts/QuantaGroteskPro-BlackItalic.otf") format("opentype"); font-display:swap; }

@font-face { font-family:"Poppins"; font-weight:300; font-style:normal; src:url("fonts/Poppins-Light.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-weight:400; font-style:normal; src:url("fonts/Poppins-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-weight:400; font-style:italic; src:url("fonts/Poppins-Italic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-weight:500; font-style:normal; src:url("fonts/Poppins-Medium.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-weight:600; font-style:normal; src:url("fonts/Poppins-SemiBold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-weight:700; font-style:normal; src:url("fonts/Poppins-Bold.ttf") format("truetype"); font-display:swap; }

/* ─── TOKENS (locked) ──────────────────────────────────────── */
:root{
  --aw-black:#202020; --aw-yellow:#FED403; --aw-stone:#F9F7F6; --aw-white:#FFFFFF;
  --andrewon-violet:#6F3DFF;
  --aw-ink-900:#202020; --aw-ink-700:#3A3A3A; --aw-ink-500:#6B6B6B;
  --aw-ink-300:#B8B5B2; --aw-ink-200:#DEDAD7; --aw-ink-100:#ECE8E5;

  --fg-1:var(--aw-black); --fg-2:var(--aw-ink-700); --fg-3:var(--aw-ink-500);
  --fg-on-dark:var(--aw-white); --fg-on-yellow:var(--aw-black);
  --bg-page:var(--aw-stone); --bg-panel:var(--aw-white);
  --bg-invert:var(--aw-black); --bg-accent:var(--aw-yellow);
  --accent:var(--aw-yellow); --border:var(--aw-ink-200); --divider:var(--aw-ink-100);

  --font-display:"Quanta Grotesk Pro","Archivo","Helvetica Neue",system-ui,sans-serif;
  --font-body:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;

  --fs-hero:clamp(64px,8vw,128px); --fs-display:clamp(48px,5.5vw,88px);
  --fs-h1:clamp(40px,4vw,64px); --fs-h2:clamp(28px,2.6vw,40px); --fs-h3:20px;
  --fs-lead:22px; --fs-body:16px; --fs-small:14px; --fs-eyebrow:12px;

  --lh-display:0.92; --lh-heading:1.05; --lh-body:1.55; --lh-tight:1.2;
  --tracking-hero:-0.02em; --tracking-display:0; --tracking-heading:0.01em;
  --tracking-body:0; --tracking-eyebrow:0.14em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  --radius-0:0; --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-pill:999px;
  --bw-hair:1px; --bw-rule:2px; --bw-bold:4px;

  --shadow-1:0 1px 2px rgba(32,32,32,0.06),0 2px 8px rgba(32,32,32,0.04);
  --shadow-2:0 4px 16px rgba(32,32,32,0.08),0 1px 3px rgba(32,32,32,0.06);
  --shadow-3:0 12px 36px rgba(32,32,32,0.12);
  --shadow-yellow:0 4px 0 var(--aw-yellow);

  --ease-out:cubic-bezier(0.22,0.61,0.36,1);
  --ease-snap:cubic-bezier(0.2,0.9,0.25,1.4);
  --dur-fast:150ms; --dur-base:240ms; --dur-slow:400ms;

  /* motion intensity multiplier — driven by the Tweaks panel (1 = full) */
  --motion:1;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg-page); color:var(--fg-1);
  font-family:var(--font-body); font-size:var(--fs-body);
  line-height:var(--lh-body); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }

.aw-hero{ font-family:var(--font-display); font-weight:900; font-size:var(--fs-hero);
  line-height:var(--lh-display); letter-spacing:var(--tracking-hero); text-transform:uppercase; margin:0; }
.aw-display{ font-family:var(--font-display); font-weight:900; font-size:var(--fs-display);
  line-height:var(--lh-display); letter-spacing:var(--tracking-display); text-transform:uppercase; margin:0; }
h1,.aw-h1{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h1);
  line-height:var(--lh-heading); letter-spacing:var(--tracking-heading); text-transform:uppercase; margin:0; }
h2,.aw-h2{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2);
  line-height:var(--lh-heading); letter-spacing:var(--tracking-heading); text-transform:uppercase; margin:0; }
h3,.aw-h3{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-h3); line-height:var(--lh-tight); margin:0; }
.aw-lead{ font-family:var(--font-body); font-weight:400; font-size:var(--fs-lead); line-height:1.4; color:var(--fg-2); }
p,.aw-body{ font-family:var(--font-body); font-weight:400; font-size:var(--fs-body); line-height:var(--lh-body); }
.aw-small{ font-size:var(--fs-small); color:var(--fg-2); }
.aw-eyebrow{ font-family:var(--font-body); font-weight:600; font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--fg-2); }
.aw-anchor{ font-family:var(--font-display); font-weight:800; font-style:italic; font-size:var(--fs-display);
  line-height:var(--lh-display); letter-spacing:var(--tracking-display); text-transform:uppercase; }
.aw-rule{ display:inline-block; width:64px; height:var(--bw-rule); background:var(--accent); margin:var(--space-3) 0 var(--space-4); }
.aw-rule--lg{ width:120px; height:var(--bw-bold); }