/* ==========================================================================
   Alturas Partners — Design tokens (single source of truth)
   Spec: CLAUDE.md §18. Colours are fixed; do not introduce new hues.
   ========================================================================== */

:root {
  /* --- Colours ---------------------------------------------------------- */
  --color-primary: #1b2230; /* Midnight Slate — logo, headers, dark sections   */
  --color-accent:  #c0704a; /* Terracotta Copper — CTAs, links, highlights ONLY */
  --color-bg:      #f7f4ee; /* Warm Ivory — page background                    */
  --color-neutral: #a7a29a; /* Stone Grey — subtext, borders, UI              */
  --color-dark:    #2e3138; /* Charcoal — body text                           */

  /* Derived tints (kept within the 5-colour system) */
  --color-accent-ink:   #a55c3a; /* darker accent for text contrast on ivory   */
  --color-line:         rgba(167, 162, 154, 0.35); /* hairline borders          */
  --color-ivory-muted:  #efe9df; /* subtle panel fill on ivory                 */
  --color-on-dark:      #f7f4ee; /* text on Midnight Slate                     */
  --color-on-dark-mute: rgba(247, 244, 238, 0.72);

  /* --- Typography ------------------------------------------------------- */
  --font-primary: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-bold: 700;
  --font-weight-semibold: 500;
  --font-weight-regular: 400;
  --line-tight: 1.1;
  --line-snug: 1.25;
  --line-body: 1.65;
  --measure: 68ch; /* readable line length for prose */

  /* Fluid type scale (the "grote typografie" principle) */
  --step--1: clamp(0.83rem, 0.78rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 2rem);
  --step-3:  clamp(1.73rem, 1.4rem + 1.65vw, 2.66rem);
  --step-4:  clamp(2.07rem, 1.55rem + 2.6vw, 3.55rem);
  --step-5:  clamp(2.49rem, 1.6rem + 4.4vw, 4.74rem);

  /* --- Spacing (4px grid) ---------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Layout ---------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(var(--space-4), 5vw, var(--space-16));

  /* --- Border radius --------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* --- Shadows --------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(27, 34, 48, 0.08);
  --shadow-md: 0 4px 16px rgba(27, 34, 48, 0.12);
  --shadow-lg: 0 16px 48px rgba(27, 34, 48, 0.16);

  /* --- Transitions ----------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* --- Z-index --------------------------------------------------------- */
  --z-nav: 100;
  --z-overlay: 200;
}