/* ==========================================================================
   tokens.css — iConus design tokens: colours, fonts, gutter, header height
   Dark olive with frosted glass, one accent colour per product category.
   Change a value here and it updates everywhere.
   ========================================================================== */

:root{
  color-scheme: dark;
  --bg0:#1C2019; --bg1:#262C22; --bg2:#2F362A; --bg3:#373F31; --deep:#0F120D;
  --line:#3A4234; --line2:#454E3E; --line3:#5A6350;
  --fg:#F6F5F0; --fg2:#E8EBE2; --fg3:#C5CBBB; --fg4:#9CA392;
  --fg4-hi:#B5BAAE;   /* muted text on glass panels and photos: 4.5:1 (readability fix, approved 2026-10-14) */
  --ink:#1F241C; --olive:#4F5A46; --muted-ink:#5C6255;
  --paper:#FFFFFF; --paper2:#F6F5F0; --paper-line:#EEEDE6;
  --sage:#9DBB75; --sage2:#B7CC9C; --sage3:#DCE8CB;
  --teal:#5FB8A0; --blue:#6FB1E8; --sun:#F2B544; --orange:#F28A52; --coral:#E86A5C; --steel:#A9B6C3;
  --glass:rgba(255,255,255,0.06); --glass2:rgba(255,255,255,0.1); --glass-line:rgba(255,255,255,0.16); --glass-line2:rgba(255,255,255,0.3);
  --scrim:rgba(28,32,25,0.4); --shadow:rgba(0,0,0,0.32); --sage-glow:rgba(157,187,117,0.25); --sage-tint:rgba(157,187,117,0.14); --sage-edge:rgba(157,187,117,0.45);
  --display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(16px,4.4vw,64px);
  --header:76px;
}
@media (max-width:760px){:root{--header:64px}}