/* ==========================================================================
   ONLU Installatietechniek — design tokens
   Canonical source: .claude/skills/brand-guidelines/SKILL.md + DESIGN.md
   Do not invent colours here. Extend DESIGN.md and re-run the contrast check.
   ========================================================================== */

:root {
  /* --- Brand core ------------------------------------------------------- */
  --color-ink:                 #0A0A0A;  /* 19.8:1 on white — headlines */
  --color-primary:             #0283CB;  /* 4.11:1 — LARGE/BOLD TEXT, ICONS, RULES ONLY */
  --color-primary-action:      #026FA8;  /* 5.47:1 — every clickable element carrying text */
  --color-primary-hover:       #01568A;
  --color-primary-soft:        #E8F3FB;

  --color-accent-green:        #47B305;  /* 2.72:1 — GRADIENT / ICON FILL / HERO FULL STOP ONLY */
  --color-accent-green-action: #2E6D03;  /* 6.35:1 */

  /* --- Neutrals --------------------------------------------------------- */
  --color-text:                #1A1A1A;  /* 17.4:1 */
  --color-text-muted:          #5A636E;  /* 6.1:1  */
  --color-bg:                  #FFFFFF;
  --color-bg-alt:              #F6F7F9;
  --color-border:              #E4E7EB;  /* decorative rules only */
  --color-border-strong:       #C9CFD6;  /* inputs / UI components needing 3:1 */

  /* --- Semantic --------------------------------------------------------- */
  --color-success:             #2E7D0F;
  --color-success-soft:        #EBF7E6;
  --color-error:               #C0392B;
  --color-error-soft:          #FDECEA;
  --color-warning:             #B26A00;
  --color-warning-soft:        #FFF6E5;
  --color-focus-ring:          #0283CB;

  --gradient-brand: linear-gradient(90deg, #0283CB 0%, #47B305 100%);

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --text-hero:  clamp(2.25rem, 1.6rem + 2.75vw, 3.5rem);
  --text-h2:    clamp(1.5rem, 1.25rem + 1vw, 1.85rem);
  --text-h3:    clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --text-lead:  clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  --text-body:  1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;

  --leading-heading: 1.1;
  --leading-body:    1.6;
  --tracking-heading: -0.02em;
  --tracking-label:    0.08em;

  /* --- Space & shape ---------------------------------------------------- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  --section-y: clamp(3rem, 2rem + 5vw, 6rem);
  --measure:   68ch;
  --container: 1220px;
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 3.5rem);

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   0;
  --radius-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(10 10 10 / .06);
  --shadow-md: 0 4px 12px rgb(10 10 10 / .08);
  --shadow-lg: 0 16px 40px rgb(10 10 10 / .14);

  /* --- Z-index scale ---------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-pin: 200;
  --z-sidebar: 300;
  --z-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
}