/* Coff & Co 2026 - design tokens + self-hosted fonts.
   Ported from the demo's tokens/*.css (colors, typography, spacing) and styles.css.
   Family names match the demo so every ported style reads the same variables. */

/* ---- Fonts (WOFF2, Latin subset, font-display: swap) ----
   Bricolage Grotesque 400/700/800 and Architects Daughter 400 are OFL.
   GT America Mono: these are the TRIAL files from the demo (assets/fonts/*-Trial.otf).
   Grilli Type does not allow trial fonts on a live site: confirm or buy a GT America Mono web
   licence before go-live, or switch --font-mono to the fallback (Space Mono). See plan 9.4.
   The trial files only contain letters, digits, space, comma, hyphen and full stop, so - exactly
   as in the demo - every other character ($ & ( ) : / · [ ] etc.) renders in Space Mono (OFL),
   subset to those characters only. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bricolage-grotesque-400.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bricolage-grotesque-700.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bricolage-grotesque-800.woff2") format("woff2")}
@font-face{font-family:"Architects Daughter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/architects-daughter-400.woff2") format("woff2")}
@font-face{font-family:"GT America Mono Trial";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/gt-america-mono-400.woff2") format("woff2")}
@font-face{font-family:"GT America Mono Trial";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/gt-america-mono-500.woff2") format("woff2")}
@font-face{font-family:"GT America Mono Trial";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/gt-america-mono-700.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/space-mono-400.woff2") format("woff2");unicode-range:U+0020-002B,U+002F,U+003A-0040,U+005B-0060,U+007B-007E,U+00A0-00BF,U+00D7,U+00F7,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-mono-700.woff2") format("woff2");unicode-range:U+0020-002B,U+002F,U+003A-0040,U+005B-0060,U+007B-007E,U+00A0-00BF,U+00D7,U+00F7,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215}

:root{
  /* ---- Brand palette ---- */
  --blue:#0A3283;
  --pink:#E12D77;
  --red:#DA2524;
  --amber:#FFC100;
  --cream:#FFFBD5;
  --black:#000000;

  --paper:#FAFBF4;
  --cream-2:#FAF6CD;
  --ink-soft:#1E1E1E;
  --pink-bright:#E8347E;
  --scrim:rgba(0,0,0,0.5);

  --surface-hero:var(--blue);
  --surface-feature:var(--pink);
  --surface-warm:var(--red);
  --surface-showcase:var(--amber);
  --surface-light:var(--cream);
  --surface-dark:var(--black);
  --surface-card:var(--cream);

  --text-on-dark:var(--cream);
  --text-on-light:var(--black);
  --text-display-pink:var(--black);

  --badge-bg:var(--amber);
  --badge-text:var(--black);
  --pill-solid-bg:var(--black);
  --pill-solid-text:var(--cream);
  --ellipse-stroke:var(--cream);

  /* ---- Type ---- */
  --font-display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-hand:"Architects Daughter","Bricolage Grotesque",cursive;
  --font-mono:"GT America Mono Trial","Space Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-serif:"Bree Serif",ui-serif,Georgia,"Times New Roman",serif;

  --w-light:300;--w-regular:400;--w-medium:500;--w-semibold:600;--w-bold:700;--w-extrabold:800;

  --fs-mega:165px;--fs-section:148px;--fs-split:80px;--fs-footer:48px;--fs-card-h:52px;--fs-product:32px;
  --fs-body-lg:20px;--fs-body:18px;--fs-caption:16px;
  --track-display:-0.05em;--lh-display:1;--lh-card:0.9;--lh-body:1.3;

  /* ---- Layout + spacing ---- */
  --canvas:1920px;--section-h:1090px;--pad-x:80px;--grid-gutter:60px;
  --sp-1:4px;--sp-2:8px;--sp-3:10px;--sp-4:12px;--sp-5:20px;--sp-6:32px;--sp-7:40px;--sp-8:60px;
  --card-personality-w:402px;--card-personality-h:600px;--card-recipe-w:690px;--card-recipe-pad:40px 32px;--product-card-w:546.667px;
  --ellipse-tilt:-5deg;--card-fan:6deg;--badge-pad:4px 8px;--btn-underline:2px;

  /* ---- Motion ---- */
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-out-soft:cubic-bezier(0.22,1,0.36,1);
  --dur-reveal:0.7s;--dur-micro:0.25s;--stagger:0.08s;

  /* ---- Chrome ---- */
  --notice-h:36px;
  --nav-h:64px;
}