/*
 * Claw — Design Tokens (editorial skeleton, recolored)
 * ─────────────────────────────────────────────────────────────────────────────
 * Single source of truth for all CSS custom properties. Same token STRUCTURE as
 * the Éclore theme — only the primitive values below change, so every component
 * recolors from here (CTAs, bands, hovers, focus rings, numerals).
 * Palette is the Éclore "old" warm scheme: cream/bone surfaces, a warm greige
 * "artboard" ground, charcoal ink, and terracotta as the single live accent.
 * Hex values match the Éclore theme primitives so the two siblings share a palette.
 * Two families only: Familjen Grotesk (display + caps labels) and Inter (body).
 */
:root {
  /* ─── Primitives — the locked colours (Éclore warm scheme: cream/charcoal/bone/terracotta) ── */
  --color-bone:         #F6F4EF;  /* dominant warm cream ground — floating panels + cards; never #FFFFFF */
  --color-stone:        #ECEAE3;  /* alternating section ground, card/input fills */
  --color-ground:       #E6E1D5;  /* the warm greige artboard the page sits on (deeper than stone so panels pop) */
  --color-terracotta:   #D44B19;  /* the single accent — CTAs, eyebrows, accent dot */
  --color-ink:          #16140F;  /* charcoal: all type, dark bands, footer */

  /* ─── Semantic aliases ───────────────────────────────────────────────────── */
  --color-bg:           var(--color-bone);
  --color-bg-alt:       var(--color-stone);
  --color-bg-inverse:   var(--color-ink);
  --color-text:         var(--color-ink);
  --color-text-muted:   color-mix(in srgb, var(--color-ink) 72%, var(--color-bone)); /* secondary/meta — ≥4.5:1 at 14px+ */
  --color-text-inverse: var(--color-bone);
  --color-heading:      var(--color-ink);    /* headings rank by weight/scale, not colour */
  --color-accent:       var(--color-terracotta);
  --color-cta-bg:       var(--color-terracotta);
  --color-cta-text:     var(--color-bone);
  --color-hairline:     color-mix(in srgb, var(--color-ink) 14%, var(--color-bone)); /* 1px borders, dividers, grid lines */
  --color-line:         var(--color-hairline);

  /* ─── Typography (§3) — display + body sans, plus one accent serif ───────── */
  --font-display: 'Hanken Grotesk', 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent:  'Fraunces', 'Georgia', 'Times New Roman', serif; /* accent-word italic ONLY — never body */
  --font-heading: var(--font-display); /* backward-compat alias — new work uses --font-display */
  --lh-tight: 0.94;  --lh-snug: 1.1;  --lh-body: 1.55;
  --tracking-display: -0.03em;  --tracking-label: 0.2em;  --tracking-cta: 0.08em;  --tracking-nav: 0.12em;

  /* ─── Spacing Scale (canonical 10-step) ──────────────────────────────────── */
  --space-3xs: 0.25rem;   /*   4px */
  --space-2xs: 0.5rem;    /*   8px */
  --space-xs:  0.75rem;   /*  12px */
  --space-sm:  1rem;      /*  16px */
  --space-md:  1.5rem;    /*  24px */
  --space-lg:  2.5rem;    /*  40px */
  --space-xl:  4rem;      /*  64px */
  --space-2xl: 6rem;      /*  96px */
  --space-3xl: 8rem;      /* 128px */
  --space-4xl: 12rem;     /* 192px */

  /* ─── Layout & Containers ────────────────────────────────────────────────── */
  --container-max:    1200px;
  --container-narrow:  720px;
  --container-wide:   1360px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y:       clamp(var(--space-2xl), 12vw, var(--space-4xl));   /* 96 → 192 */
  --section-y-tight: clamp(var(--space-xl), 8vw, var(--space-3xl));     /* 64 → 128 */

  /* ─── Radius (editorial layer) ───────────────────────────────────────────────
   * Approved override of the former radius-0 stance: the editorial redesign uses
   * soft-cornered floating panels/cards. Rolled forward per-component (homepage
   * first); untouched pages stay hard-edged until their own redesign pass. */
  --radius-card: 24px;   /* floating panels / large cards */
  --radius-md:   16px;   /* medium cards, images */
  --radius-sm:   12px;   /* inputs, chips, thumbnails */
  --radius-pill: 999px;  /* buttons, pills */

  /* ─── Imagery (editorial layer) ──────────────────────────────────────────────
   * Gallery-monochrome look applied via CSS (not baked into files) so real colour
   * photos can drop in later with a one-line switch to `none`. */
  --img-filter: grayscale(1) contrast(1.02);

  /* ─── Motion (§6) ────────────────────────────────────────────────────────── */
  --dur-micro:  180ms;  --dur-short: 300ms;  --dur-medium: 480ms;  --dur-reveal: 720ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-reveal:   cubic-bezier(.2, .7, .2, 1);
  --ease-exit:     cubic-bezier(.4, 0, 1, 1);
  --stagger-step: 80ms;
  --reveal-shift: 16px;
}