/* Hallmark · tokens · Fire Hose Ventures
 * genre: playful/sport · theme: Sport · anchor hue: red 29deg
 * Every colour + font in the build references these named tokens. No inline hex / raw oklch mid-render.
 */
:root {
  /* ---- Brand / accent ---- */
  --color-accent:       oklch(55% 0.22 29);     /* Fire Hose red (=#D50000) */
  --color-accent-srgb:  #D50000;                /* sRGB twin of --color-accent for non-CSS hosts (HTML meta theme-color, favicon, etc.) - keep in sync */
  --color-accent-deep:  oklch(48% 0.20 29);     /* hover / pressed */
  --color-accent-bright: oklch(62% 0.23 30);    /* red on dark fields */

  /* ---- Water (Fire Hose motif: button-hover droplets) ---- */
  --color-water-light: oklch(93% 0.04 240);     /* droplet highlight */
  --color-water:       oklch(73% 0.11 240);     /* droplet body (water blue) */
  --color-water-deep:  oklch(58% 0.14 250);     /* droplet edge */
  --color-water-foam:  oklch(96% 0.02 240);     /* foam */
  --color-water-glow:  oklch(70% 0.10 240 / 0.45); /* droplet shadow */

  /* ---- Mock traffic-light dots (illustrative chrome) ---- */
  --color-dot-r: oklch(63% 0.20 25);
  --color-dot-y: oklch(80% 0.16 85);
  --color-dot-g: oklch(70% 0.16 145);

  /* ---- Neutrals - warm-tinted toward the red anchor (no pure #fff/#000) ---- */
  --color-paper:    oklch(98.5% 0.006 60);      /* primary off-white surface */
  --color-paper-2:  oklch(95.5% 0.009 50);      /* alternate band surface */
  --color-ink:      oklch(21% 0.02 28);         /* warm near-black text */
  --color-ink-soft: oklch(44% 0.015 28);        /* muted body / captions */
  --color-hairline: oklch(86% 0.01 40);         /* rules / borders on light */

  /* ---- Dark field (challenge + accents; red logo pops here) ---- */
  --color-dark:     oklch(22% 0.018 28);
  --color-dark-2:   oklch(27% 0.02 28);         /* raised surface on dark (mockup chips, card-on-dark) */
  --color-card-dark: #211513;                   /* espresso card surface (portfolio cards) */
  --color-on-dark:  oklch(95% 0.008 60);        /* text on dark */
  --color-on-dark-soft: oklch(72% 0.012 40);    /* muted text on dark */
  --color-hairline-dark: oklch(38% 0.02 30);

  --color-focus:    oklch(62% 0.23 30);         /* focus ring - >=3:1 */

  /* ---- Type families (both Google Fonts) ---- */
  --font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  /* ---- Type scale - major third (1.25), 16px base ---- */
  --text-xs:    0.8rem;     /* 12.8 */
  --text-sm:    0.9rem;     /* 14.4 */
  --text-base:  1rem;       /* 16   */
  --text-md:    1.25rem;    /* 20   */
  --text-lg:    1.563rem;   /* 25   */
  --text-xl:    1.953rem;   /* 31.25 */
  --text-2xl:   2.441rem;   /* 39   */
  --text-3xl:   3.052rem;   /* 49   */
  --text-4xl:   3.815rem;   /* 61   */
  --text-display-s: clamp(2.6rem, 4vw + 1rem, 4rem);
  --text-display:   clamp(3rem, 6vw + 1rem, 5.25rem);

  /* Role-named display sizes (section heads / numerals / statement) */
  --text-section-sm: clamp(1.8rem, 3.5vw, 2.6rem);   /* subordinate section h2 (ventures intro) */
  --text-section:    clamp(2rem,  4.5vw, 3.4rem);    /* default section h2 */
  --text-section-lg: clamp(2.2rem, 5vw,  4rem);      /* large section h2 (build · final) */
  --text-statement:  clamp(2rem, 5vw, 4rem);         /* footer statement */
  --text-stage-num:  clamp(3rem,   7vw,  5.75rem);   /* stage numerals (1.0-6.0) */

  /* ---- Spacing - 4pt scale ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;

  /* ---- Lines / radii / motion ---- */
  --rule-hair: 1px;
  --rule-slab: 2px;        /* N7 brutal slab border */
  --rule-heavy: 4px;
  --radius-none: 0px;      /* hairlines / dividers only */
  --radius-sm: 5px;        /* small chips, bars */
  --radius-soft: 9px;      /* cards, buttons, sharp edges - nod to the badge logo */
  --radius-card: 14px;     /* the browser-mockup container */

  /* ---- Hard offset shadows (Neo-Brutalist; 0 blur) ---- */
  --shadow-hard:         4px 4px 0 0 var(--color-ink);
  --shadow-hard-lg:      8px 8px 0 0 var(--color-ink);
  --shadow-hard-xl:      12px 12px 0 0 var(--color-ink);
  --shadow-hard-press:   0 0 0 0 var(--color-ink);
  --shadow-hard-bright:  4px 4px 0 0 var(--color-accent-bright);  /* hard shadow on dark surfaces */

  --dur-short: 140ms;
  --dur-mid:   260ms;
  --dur-long:  520ms;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-press: cubic-bezier(0.175, 0.885, 0.32, 1.275);  /* push-button overshoot */

  --maxw: 1240px;
  --measure: 60ch;          /* canonical body-paragraph max-width */

  /* layered z-scale */
  --z-nav: 100;
}