/* EKB SUP — design tokens (copied 1:1 from design system _design_extract/tokens).
   Do NOT diverge from the source system. Google Fonts @import removed — fonts self-hosted in assets/fonts/fonts.css */

/* EKB SUP — Color tokens (§5.1)
   Rule: no hardcoded hex in components — always reference these vars.
   Concept: clean base (paper / near-black ink / warm grey), ONE warm signature
   accent (coral) reserved for action, plus a cool "water" support hue that is
   NEVER used for CTAs. */

:root {
  /* --- Ink (text + dark surfaces) --- */
  --ink-900: #0B1416; /* primary text, dark backgrounds */
  --ink-700: #26333A; /* secondary text */
  --ink-500: #5B6B72; /* captions, muted */
  --ink-200: #D9E0E2; /* borders, dividers */

  /* --- Paper (surfaces) --- */
  --paper: #FFFFFF;      /* base background */
  --paper-warm: #F7F4EF; /* warm section backing (air) */

  /* --- Accent: coral — the signature, ACTION ONLY --- */
  --accent: #FF5A3C;      /* CTA, action, key price figure */
  --accent-600: #E8462B;  /* hover / active CTA */
  --accent-tint: #FFEDE8; /* soft backing for accent blocks */

  /* --- Support & semantic --- */
  --water: #0A7E86;   /* "water" icons, info links — NOT for CTA */
  --success: #1E9E6A; /* "available" statuses, spec checkmarks */

  /* ---------- Semantic aliases ---------- */
  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-accent: #FFFFFF;
  --text-on-dark: #FFFFFF;
  --on-dark-20: rgba(255, 255, 255, 0.20);

  --surface-page: var(--paper);
  --surface-warm: var(--paper-warm);
  --surface-card: var(--paper);
  --surface-dark: var(--ink-900);
  --surface-accent-soft: var(--accent-tint);

  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-700);

  --action: var(--accent);
  --action-hover: var(--accent-600);
  --link: var(--water);
  --focus-ring: var(--accent);
}

/* EKB SUP — Typography tokens (§5.2)
   Display grotesque ↔ humanist body. Large size contrast = "expensive".
   Sizes use clamp() to fold the desktop→mobile scale into one token. */

:root {
  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Weights */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-black: 800; /* @kind other */

  /* Fluid scale: clamp(mobile, fluid, desktop) — mirrors the §5.2 table (34→72 etc.) */
  --fs-hero: clamp(2.125rem, 1.2rem + 4.6vw, 4.5rem); /* @kind other */
  --fs-h2: clamp(1.625rem, 1.15rem + 2.1vw, 2.5rem); /* @kind other */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); /* @kind other */
  --fs-price: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); /* @kind other */
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* @kind other */
  --fs-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); /* @kind other */

  /* Line-heights */
  --lh-hero: 1.05; /* @kind other */
  --lh-heading: 1.15; /* @kind other */
  --lh-body: 1.5; /* @kind other */

  /* Letter-spacing */
  --ls-display: -0.02em; /* @kind other */
  --ls-tight: -0.01em; /* @kind other */
  --ls-caps: 0.08em; /* @kind other */

  /* Reading measure */
  --measure: 70ch; /* @kind other */
}

/* EKB SUP — Spacing, radius, shadow, motion tokens (§5.3, §5.6) */

:root {
  /* Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Radius */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Shadow — soft, never hard black */
  --shadow-card: 0 8px 24px rgba(11, 20, 22, 0.08);
  --shadow-hover: 0 16px 40px rgba(11, 20, 22, 0.14);
  --shadow-focus: 0 0 0 3px rgba(255, 90, 60, 0.35);

  /* Overlay for hero imagery (§5.5): ink 25–40% */
  --overlay-hero: rgba(11, 20, 22, 0.32);

  /* Motion (§5.6) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-enter: 400ms; /* @kind other */
  --dur-hover: 200ms; /* @kind other */

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(16px, 4vw, 48px);
  --header-h: 72px;
}