/* ==========================================================================
   JCRGS — Design tokens & fonts
   Concept A «Grandstand Grid» · gaúcho-modernist (crimson / graphite / teal)
   ========================================================================== */

/* ---- Self-hosted fonts (woff2, font-display: swap) --------------------- */
@font-face{
  font-family:"Archivo Black";
  src:url("../fonts/archivo-black-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-800.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}

/* ---- Tokens ----------------------------------------------------------- */
:root{
  /* Brand (TZ Section 4.1) */
  --crimson:#A11D2E;
  --crimson-d:#7E1524;
  --crimson-l:#C13246;
  --graphite:#16181D;
  --graphite-2:#22252D;
  --graphite-3:#2E323C;
  --teal:#1E8A8A;
  --teal-btn:#187C7C;   /* filled bg with white text — WCAG AA (4.98:1) */
  --teal-d:#166B6B;
  --teal-l:#2AA5A5;

  /* Surfaces */
  --bg:#F4F2EF;
  --bg-2:#ECE9E4;
  --surface:#FFFFFF;
  --surface-ink:#16181D;         /* dark surface */

  /* Ink / text */
  --ink:#16181D;
  --ink-2:#33353C;
  --muted:#5A5C63;
  --muted-2:#8A8C93;
  --on-dark:#F4F2EF;
  --on-dark-muted:#A9ABB2;

  /* Lines & borders */
  --line:rgba(22,24,29,.14);
  --line-2:rgba(22,24,29,.28);
  --line-dark:rgba(255,255,255,.16);

  /* Status */
  --ok:#1E8A55;
  --warn:#C9781E;
  --err:#C22E2E;

  /* Typography */
  --font-display:"Archivo Black",system-ui,sans-serif;
  --font-head:"Archivo","Archivo Black",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular","Consolas",monospace;

  /* Type scale (1.25) */
  --t-xs:.75rem;    /* 12 */
  --t-sm:.875rem;   /* 14 */
  --t-base:1rem;    /* 16 */
  --t-md:1.125rem;  /* 18 */
  --t-lg:1.5rem;    /* 24 */
  --t-xl:2rem;      /* 32 */
  --t-2xl:2.75rem;
  --t-3xl:clamp(2.6rem,6vw,4.25rem);
  --t-hero:clamp(3.25rem,9vw,7.25rem);

  /* Spacing (8px base) */
  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;
  --s-6:2rem;--s-7:3rem;--s-8:4rem;--s-9:6rem;--s-10:8rem;

  /* Radii — architectural, mostly sharp */
  --r-0:0px;--r-1:2px;--r-2:4px;--r-3:8px;--r-pill:999px;

  /* Shadows */
  --sh-1:0 1px 2px rgba(22,24,29,.06);
  --sh-2:0 6px 20px rgba(22,24,29,.10);
  --sh-3:0 18px 48px rgba(22,24,29,.16);

  /* Layout */
  --maxw:1280px;
  --gutter:clamp(20px,4vw,44px);
  --header-h:118px;             /* reserved to avoid CLS on injected header */

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.18s;
}

@media (max-width:900px){
  :root{ --header-h:64px; }
}