/* ==========================================================================
   HulproLabs — design tokens
   The ONLY file in the project permitted to contain raw brand hex values.
   Everything else must reference these custom properties.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Raw brand palette (do not use directly; map to semantic roles) --- */
  --c-black: #000000;
  --c-ink: #222831;
  --c-slate: #393e46;
  --c-mist: #eeeeee;
  --c-white: #ffffff;
  --c-green: #00c853;
  --c-cyan: #0092ca;

  /* --- Semantic roles: dark theme (default) --- */
  --bg: var(--c-black);
  --bg-alt: var(--c-ink);
  --surface: var(--c-ink);
  --surface-alt: #171c24;
  --surface-inset: #0d1117;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --text: var(--c-white);
  --text-muted: #b4b9c2;
  --accent: var(--c-green); /* 9.39:1 on --bg, 6.63:1 on --surface */
  --accent-contrast: var(--c-cyan); /* 5.96:1 on --bg */
  --on-accent: var(--c-black);
  --accent-soft: rgba(0, 200, 83, 0.12);
  --contrast-soft: rgba(0, 146, 202, 0.14);
  --shadow-color: rgba(0, 0, 0, 0.55);
  --scrim: rgba(0, 0, 0, 0.72);

  /* --- Typography --- */
  --font: "Space Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.46rem + 1.44vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.7rem + 2.72vw, 3.75rem);
  --step-5: clamp(2.75rem, 1.7rem + 5.2vw, 5.5rem);
  --tracking-wide: 0.14em;
  --tracking-tight: -0.02em;

  /* --- Space & shape --- */
  --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: 4rem;
  --space-9: 6rem;
  --container: 74rem;
  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --header-h: 4.25rem;

  /* --- Motion --- */
  --dur-1: 0.18s;
  --dur-2: 0.32s;
  --dur-3: 0.55s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-shift: 16px;
  --reveal-stagger: 60ms;
}

[data-theme="light"] {
  color-scheme: light;

  --bg: var(--c-white);
  --bg-alt: var(--c-mist);
  --surface: var(--c-white);
  --surface-alt: #f7f7f8;
  --surface-inset: var(--c-mist);
  --border: rgba(34, 40, 49, 0.14);
  --border-strong: rgba(34, 40, 49, 0.28);
  --text: var(--c-ink);
  --text-muted: #5b6169;
  --accent: #00873b; /* 4.64:1 on --bg — the darkened brand green */
  --accent-contrast: #0077a8; /* 5.00:1 on --bg */
  --on-accent: var(--c-white);
  --accent-soft: rgba(0, 135, 59, 0.1);
  --contrast-soft: rgba(0, 119, 168, 0.1);
  --shadow-color: rgba(34, 40, 49, 0.16);
  --scrim: rgba(34, 40, 49, 0.45);
}