/* Forge Material and Supply — design tokens
   Single source of truth for color, type, and spacing.
   Also serves as the Phase 4 token artifact. Do not hard-code values elsewhere. */

/* Self-hosted fonts, Latin subset, SIL Open Font License (see fonts/OFL-*.txt) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/oswald-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/oswald-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/oswald-latin-700-normal.woff2") format("woff2")}

:root{
  /* Color */
  --forge-anvil-black:#0E1419;
  --forge-forge-iron:#1F2A33;
  --forge-bone:#F4F1EC;
  --forge-bright-white:#FFFFFF;
  --forge-texas-steel:#6B7280;
  --forge-embers-orange:#C44510;

  /* Derived color */
  --forge-rule-hairline:color-mix(in srgb, var(--forge-texas-steel) 30%, transparent);
  --forge-rule-hairline-dark:color-mix(in srgb, var(--forge-texas-steel) 40%, transparent);

  /* Semantic surface + ink */
  --surface-light:var(--forge-bone);
  --surface-panel:var(--forge-forge-iron);
  --surface-deep:var(--forge-anvil-black);
  --ink:var(--forge-anvil-black);
  --ink-secondary:var(--forge-texas-steel);
  /* Text-only tint of Texas Steel: 5.18:1 on Bone (AA). Texas Steel itself stays for numerals, rules, and large decorative use. Added 2026-09-21. */
  --forge-texas-steel-text:#5F6573;
  --ink-secondary-text:var(--forge-texas-steel-text);
  --ink-reverse:var(--forge-bone);
  --accent:var(--forge-embers-orange);

  /* Type families */
  --font-display:"Oswald","Arial Narrow",Impact,sans-serif;
  --font-text:"Inter","Helvetica Neue",Helvetica,sans-serif;

  /* Type scale — desktop */
  --fs-h1:56px;   --lh-h1:64px;
  --fs-h2:36px;   --lh-h2:44px;
  --fs-h3:22px;   --lh-h3:28px;
  --fs-body:17px; --lh-body:26px;
  --fs-label:14px;--lh-label:20px;
  --fs-spec-value:17px;
  --track-label:0.06em;

  /* Decorative numeral */
  --fs-numeral:120px;

  /* Wordmark cap height */
  --wordmark-cap-header:51.12px; /* 80px tall logo, subline renders at 10px. Approved by Thomas 2026-09-21 */
  --wordmark-cap-footer:22px;
  --wordmark-ratio:1.565; /* svg height = cap height x ratio */
  --header-height:112px;

  /* Layout */
  --content-max:1240px;
  --gutter:40px;
  --col-gap:24px;
  --space-section:120px;
  --measure:68ch;
  --measure-narrow:60ch;

  /* Kevin's portrait slot (About). Opened 2026-10-19 with images/kevin-smith.jpg (800x1000, 4:5). */
  --portrait-slot-width:200px;
  --portrait-slot-gap:40px;

  /* Controls */
  --control-height:52px;
  --control-pad-x:32px;
  --rule-weight:1px;
  --tick-width:12px;
  --focus-ring:2px;
  --focus-offset:2px;

  /* Motion */
  --dur-menu:150ms;
}

/* Tablet: 768–1199 */
@media (max-width:1199px){
  :root{
    --fs-h1:40px; --lh-h1:48px;
    --fs-h2:30px; --lh-h2:38px;
    --fs-numeral:88px;
    --space-section:80px;
    --gutter:40px;
  }
}

/* Mobile: below 768 */
@media (max-width:767px){
  :root{
    --fs-h1:32px; --lh-h1:40px;
    --fs-h2:26px; --lh-h2:34px;
    --fs-body:16px;
    --fs-spec-value:17px;
    --fs-numeral:56px;
    --space-section:56px;
    --gutter:24px;
    --control-height:48px;
    --wordmark-cap-header:38.34px; /* 60px tall logo on phones */
    --header-height:84px;
  }
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-menu:0ms;}
}