/* ==========================================================================
   Colorado Mastication - Design System - Token Layer
   coloradomastication.com
   --------------------------------------------------------------------------
   Palette anchored to the brand: the yellow Rayco forestry mulcher (safety
   amber), its red Fecon mulching head (rust), charcoal steel, and the
   Front Range forest it works in (pine/moss). Amber is the equipment color
   AND the fire-mitigation signal, so it earns the CTA role honestly here.
   ========================================================================== */

:root {

  /* ----- Color: Char (primary dark base - steel + burnt forest) --------- */
  --pine-950: #10130f;
  --pine-900: #171b14;
  --pine-800: #20261b;
  --pine-700: #2c3626;
  --pine-600: #3d4b33;
  --pine-500: #52643f;
  --pine-300: #8a9b72;
  --pine-200: #b7c3a2;
  --pine-100: #dde3d0;

  /* ----- Color: Ember (brand accent - safety amber, the machine + fire) - */
  --ember-600: #e8820e;
  --ember-500: #f59e0b;
  --ember-300: #f9c46a;
  --ember-200: #fbe0b0;
  --ember-glow: rgba(245, 158, 11, 0.28);

  /* ----- Color: Rust (secondary accent - the mulcher head, fire hazard) - */
  --rust-700: #8f2d15;
  --rust-600: #b23a1c;
  --rust-500: #cf4a25;
  --rust-300: #e08163;

  /* ----- Color: Slate / steel (technical charcoal range) ----------------- */
  --slate-950: #121417;
  --slate-900: #1a1d21;
  --slate-800: #24282e;
  --slate-700: #333941;
  --slate-500: #5b636d;
  --slate-300: #97a0ab;
  --slate-200: #c2c8d0;

  /* ----- Color: Bark (weathered warm range) ------------------------------ */
  --bark-700: #574433;
  --bark-600: #6e563f;
  --bark-500: #86694c;
  --bark-300: #b09678;
  --bark-200: #cdbba2;

  /* ----- Color: Bone (paper / sand surfaces) ----------------------------- */
  --bone-50: #f7f4ee;
  --bone-100: #f1ede4;
  --bone-200: #e6e0d2;
  --bone-300: #d5cdbb;

  /* ----- Color: Signal (status / severity) ------------------------------- */
  --signal-red: #b4442c;
  --signal-red-soft: rgba(180, 68, 44, 0.12);
  --signal-ok: #52643f;

  /* ----- Semantic assignments -------------------------------------------- */
  --ink: #17140f;
  --ink-soft: #45403a;
  --ink-faint: #726b62;
  --surface: var(--bone-100);
  --surface-raised: var(--bone-50);
  --surface-dark: var(--pine-900);
  --surface-charcoal: var(--slate-900);
  --line: rgba(23, 20, 15, 0.14);
  --line-strong: rgba(23, 20, 15, 0.32);
  --line-on-dark: rgba(247, 244, 238, 0.16);
  --text-on-dark: #eef0ea;
  --text-on-dark-soft: rgba(238, 240, 234, 0.72);

  /* ----- Typography -------------------------------------------------------
     Display: Bricolage Grotesque - characterful, rugged, non-generic
     Body:    Archivo - clean utilitarian grotesque
     Mono:    IBM Plex Mono - spec / equipment labeling
  ------------------------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Fluid type scale (min @ 360px viewport, max @ 1440px) */
  --text-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --text-sm: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --text-lg: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --text-xl: clamp(1.45rem, 1.3rem + 0.75vw, 1.9rem);
  --text-2xl: clamp(1.9rem, 1.6rem + 1.5vw, 2.8rem);
  --text-3xl: clamp(2.5rem, 1.9rem + 3vw, 4.2rem);
  --text-hero: clamp(2rem, 1.3rem + 3.4vw, 4.4rem);

  --leading-tight: 1.02;
  --leading-snug: 1.18;
  --leading-body: 1.62;

  --tracking-wide: 0.14em;
  --tracking-wider: 0.22em;

  /* ----- Space scale ------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --space-section: clamp(4rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 62ch;
  --page-max: 1440px;

  /* ----- Depth / elevation ------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(16, 19, 15, 0.1), 0 2px 8px rgba(16, 19, 15, 0.08);
  --shadow-2: 0 4px 12px rgba(16, 19, 15, 0.12), 0 12px 32px rgba(16, 19, 15, 0.14);
  --shadow-3: 0 12px 24px rgba(8, 10, 7, 0.2), 0 32px 64px rgba(8, 10, 7, 0.24);
  --shadow-cta: 0 6px 20px var(--ember-glow);

  --z-below: -1;
  --z-base: 1;
  --z-raised: 10;
  --z-overlay: 40;
  --z-nav: 90;
  --z-modal: 100;

  /* ----- Radii ------------------------------------------------------------ */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-organic: 62% 38% 46% 54% / 55% 48% 52% 45%;

  /* ----- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;

  /* ----- Texture: topographic contour field ------------------------------- */
  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'%3E%3Cg fill='none' stroke='%2352643f' stroke-width='1'%3E%3Cpath d='M-20 120C140 60 260 190 430 150S720 40 920 110'/%3E%3Cpath d='M-20 190C150 130 280 260 450 220S740 110 920 180'/%3E%3Cpath d='M-20 260C160 200 300 330 470 290S760 180 920 250'/%3E%3Cpath d='M-20 330C170 270 320 400 490 360S780 250 920 320'/%3E%3Cpath d='M-20 400C180 340 340 470 510 430S800 320 920 390'/%3E%3Cpath d='M-20 470C190 410 360 540 530 500S820 390 920 460'/%3E%3Cpath d='M-20 540C200 480 380 610 550 570S840 460 920 530'/%3E%3C/g%3E%3C/svg%3E");
}