/* =========================================================
   CLARITY ZONES — Design Tokens
   Colors extracted from marvin-lamberts.de/clarity-zones
   ========================================================= */

:root {
  /* Brand colors (from existing site, exact hex sampled) */
  --cz-vision: #d4a000;       /* Gold — Vision Zone */
  --cz-vision-soft: #f3deaa;
  --cz-vision-tint: #fbf3dc;

  --cz-alignment: #5a68a5;    /* Indigo — Alignment Zone */
  --cz-alignment-soft: #c5cbe1;
  --cz-alignment-tint: #ebedf5;

  --cz-deepdive: #22666e;     /* Teal — Deep Dive Zone */
  --cz-deepdive-soft: #a9c5c9;
  --cz-deepdive-tint: #e3edee;

  --cz-bridge: #d97a40;       /* Terracotta — Bridge Zone */
  --cz-bridge-soft: #f0c3a2;
  --cz-bridge-tint: #fbe8d8;

  /* Neutrals — warm off-white to match logo's soft pastel feel */
  --bg:          #fbfaf6;     /* Page background — warm cream */
  --surface:     #ffffff;     /* Cards, elevated */
  --surface-2:   #f3f0e8;     /* Sand — alternate sections */
  --surface-3:   #ebe7dc;     /* Stronger sand for contrast bands */
  --ink:         #1c1b18;     /* Headlines */
  --ink-2:       #2f2d28;     /* Body */
  --ink-3:       #6b6862;     /* Muted */
  --ink-4:       #a8a59c;     /* Faint */
  --line:        #e1ddd0;     /* Hairlines */
  --line-strong: #c9c4b3;

  /* Primary accent for CTAs — using deep teal (Deep Dive). Strong, professional. */
  --accent:        var(--cz-deepdive);
  --accent-hover:  #194d54;
  --accent-ink:    #ffffff;

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale */
  --text-xs:   0.8125rem;  /* 13 */
  --text-sm:   0.9375rem;  /* 15 */
  --text-base: 1.0625rem;  /* 17 — slightly larger for premium feel */
  --text-md:   1.1875rem;  /* 19 */
  --text-lg:   1.5rem;     /* 24 */
  --text-xl:   2rem;       /* 32 */
  --text-2xl:  2.625rem;   /* 42 */
  --text-3xl:  3.5rem;     /* 56 */
  --text-hero: clamp(2.75rem, 6vw, 5.25rem);
  --text-display: clamp(2rem, 4.5vw, 3.75rem);

  /* Spacing — 4px base, generous rhythm */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 10rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --container-wide: 1320px;
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
  --t-fast: 140ms;
  --t-med:  240ms;
  --t-slow: 420ms;

  /* Shadows — restrained */
  --shadow-1: 0 1px 0 rgba(28, 27, 24, 0.04), 0 2px 8px rgba(28, 27, 24, 0.04);
  --shadow-2: 0 6px 24px rgba(28, 27, 24, 0.08);
  --shadow-3: 0 16px 60px rgba(28, 27, 24, 0.10);
}