/* Exar Design System — design tokens
 * The shared visual language for every *.exarlabs.com surface (parent + sub-brands).
 * Extracted 2026-05-21 from the Microsite Factory v3.1 language (sites-exarlabs).
 *
 * Strategy: COMMITTED colour — the logo navy carries the surface; warm clay/amber
 * is the single accent (CTAs + highlights). NOT navy+gold (the finance/heraldic
 * cliché): navy + warm clay is the distinctive, human pairing.
 * Type: Bricolage Grotesque (display) + Hanken Grotesk (body).
 * Voice the visuals serve: "rendezett szakember" — ordered, trustworthy professional.
 */

:root {
  /* ---- Brand: logo navy (committed, carries surfaces) ---- */
  --navy-900: oklch(0.20 0.05 256);
  --navy-800: oklch(0.26 0.07 256);
  --navy-700: oklch(0.32 0.09 256);   /* THE logo navy — primary brand */
  --navy-600: oklch(0.40 0.10 256);
  --navy-300: oklch(0.72 0.07 256);
  --navy-100: oklch(0.94 0.025 256);  /* light navy tint surface */

  /* ---- Accent: warm clay / amber (CTAs, highlights) ---- */
  --clay-600: oklch(0.62 0.13 50);
  --clay-500: oklch(0.71 0.135 56);
  --clay-400: oklch(0.80 0.115 60);
  --clay-100: oklch(0.95 0.03 66);

  /* ---- Neutrals, faintly tinted toward the navy hue ---- */
  --bg:          oklch(0.987 0.004 250);
  --surface:     oklch(0.965 0.006 250);
  --surface-2:   oklch(0.935 0.009 250);
  --ink:         oklch(0.24 0.03 256);
  --ink-muted:   oklch(0.44 0.03 256);
  --line:        oklch(0.90 0.008 250);
  --line-strong: oklch(0.83 0.012 250);
  --on-navy:        oklch(0.97 0.01 250);
  --on-navy-muted:  oklch(0.84 0.035 256);

  /* ---- Semantic zones (status labels, calculator) ---- */
  --zone-green:  oklch(0.74 0.14 155);
  --zone-yellow: oklch(0.80 0.115 60);
  --zone-red:    oklch(0.70 0.16 28);

  /* ---- Typography ---- */
  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale (rem; headings use clamp() in components) */
  --text-xs:   0.78rem;
  --text-sm:   0.88rem;
  --text-base: 1.0625rem;   /* 17px — Exar body size */
  --text-lg:   1.1875rem;
  --text-xl:   1.35rem;
  --text-2xl:  1.6rem;
  --text-3xl:  2rem;
  --text-4xl:  2.6rem;

  /* ---- Spacing (8px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* ---- Containers ---- */
  --maxw:        68rem;
  --maxw-narrow: 44rem;

  /* ---- Radii ---- */
  --radius-sm: 7px;
  --radius:    10px;
  --radius-lg: 16px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t:    180ms var(--ease);

  /* ---- Shadows (navy-tinted) ---- */
  --shadow-sm: 0 1px 2px oklch(0.20 0.05 256 / 0.06);
  --shadow:    0 6px 24px oklch(0.20 0.05 256 / 0.10);
  --shadow-lg: 0 18px 48px oklch(0.20 0.05 256 / 0.18);
}