/* ═══════════════════════════════════════════════════════════════════════
   Marrekh — design tokens.
   Carried forward from the Marrekh brand kit. Blue leads, neutrals support,
   ONE green accent used sparingly. Nothing here paints; it only names.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand core ─────────────────────────────────────────────────────── */
  --mrk-blue: #091490;        /* Marrekh Blue — primary, carries the brand */
  --mrk-midnight: #08042b;    /* Midnight — deepest tone, deep surfaces */
  --mrk-green: #78df53;       /* Signal Green — the accent dot, approval only */
  --mrk-ivory: #f3ecdb;       /* warm ivory — text & marks on blue */
  --mrk-paper: #f7f4ed;       /* page background on light */
  --mrk-white: #ffffff;
  --mrk-ink: #14122b;         /* body text on paper */
  --mrk-slate: #6e6b7e;       /* secondary / muted text */

  /* ── Blue ramp ──────────────────────────────────────────────────────── */
  --mrk-blue-700: #060d5e;
  --mrk-blue-600: #091490;
  --mrk-blue-500: #1b279e;
  --mrk-blue-100: #dcdef1;
  --mrk-blue-50: #eef0f8;

  /* ── Green ramp (the dot & approval only) ───────────────────────────── */
  --mrk-green-700: #2f7a22;
  --mrk-green-600: #78df53;
  --mrk-green-100: #e0f0db;

  /* ── Functional neutrals ────────────────────────────────────────────── */
  --mrk-line: rgba(20, 18, 43, 0.14);
  --mrk-line-strong: rgba(20, 18, 43, 0.28);
  --mrk-line-ivory: rgba(243, 236, 219, 0.22);
  --mrk-overlay: rgba(8, 4, 43, 0.55);

  /* ── Semantic surface / text aliases ────────────────────────────────── */
  --surface-page: var(--mrk-paper);
  --surface-card: var(--mrk-white);
  --surface-inverse: var(--mrk-blue);
  --surface-deep: var(--mrk-midnight);
  --surface-sunken: var(--mrk-blue-50);

  --text-strong: var(--mrk-midnight);
  --text-body: var(--mrk-ink);
  --text-muted: var(--mrk-slate);
  --text-on-blue: var(--mrk-ivory);
  --text-on-blue-muted: rgba(243, 236, 219, 0.72);
  --text-brand: var(--mrk-blue);

  --accent: var(--mrk-green);
  --border-default: var(--mrk-line);
  --border-strong: var(--mrk-line-strong);
  --border-on-blue: var(--mrk-line-ivory);
  --focus-ring: rgba(9, 20, 144, 0.35);

  /* ── Families ───────────────────────────────────────────────────────── */
  --font-logo: "Wolves", Georgia, "Times New Roman", serif;
  --font-tagline: "Bebas Neue", "Hanken Grotesk", sans-serif;
  --font-display: "Spectral", Georgia, serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* ── Weights ────────────────────────────────────────────────────────── */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── Display scale (Spectral — fluid) ───────────────────────────────── */
  --text-display-xl: clamp(44px, 9vw, 104px);
  --text-display-lg: clamp(34px, 6vw, 68px);
  --text-display-md: clamp(30px, 4.4vw, 52px);
  --text-display-sm: clamp(26px, 3.2vw, 38px);

  /* ── Body & UI scale (Hanken Grotesk) ───────────────────────────────── */
  --text-lede: clamp(18px, 2.1vw, 22px);
  --text-lg: 19px;
  --text-base: 17px;
  --text-sm: 15px;
  --text-xs: 13.5px;
  --text-2xs: 11.5px;

  /* ── Line heights ───────────────────────────────────────────────────── */
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* ── Letter-spacing ─────────────────────────────────────────────────── */
  --track-display: -0.012em;
  --track-heading: -0.02em;
  --track-label: 0.2em;
  --track-kicker: 0.24em;

  /* ── Spacing (4px base) ─────────────────────────────────────────────── */
  --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-20: 80px;
  --space-24: 96px;

  /* Sections breathe more here than in the app UI — this is an editorial
     surface, and the pacing is what makes it feel unhurried. */
  --space-section: clamp(96px, 13vw, 200px);
  --gutter: clamp(24px, 5.5vw, 96px);

  /* How far the closing section rides up into the reviews and dissolves in
     over. It lives here rather than on .closing because *both* sections have
     to agree on it: the reviews must have finished settling to flat paper
     before this begins, or the sky is being faded onto a backdrop that is
     itself still changing — two gradients moving at once over the same band,
     which is what makes a seam look muddy rather than soft.

     Why this is not simply 26vh. The space available for it is whatever the
     reviews have left after their own --overlap, and those two scale in
     opposite directions: --overlap is 68vh and grows with the viewport, while
     the reviews' height is built from vw-capped clamps and stops growing at
     roughly 880px. So on a tall window the overlap eats the section and a flat
     26vh seam starts *before* the backdrop has settled — at 1440x1080 it began
     152px early, which is exactly the fault this token exists to prevent, on
     one of the most ordinary window sizes there is.

     min() takes 26vh only while it fits; past that the estimate of what is
     left (880px − 68vh) takes over and the seam shrinks with the squeeze. The
     max() floor keeps it from collapsing — and means an error in the 880px
     estimate can only make the seam more conservative, never inverted. */
  --seam: min(26vh, max(96px, calc(860px - 68vh)));

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 100px;

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(8, 4, 43, 0.06);
  --shadow-sm: 0 2px 8px -3px rgba(8, 4, 43, 0.18);
  --shadow-md: 0 12px 28px -16px rgba(8, 4, 43, 0.28);
  --shadow-lg: 0 24px 50px -28px rgba(8, 4, 43, 0.4);
  --shadow-xl: 0 32px 70px -30px rgba(8, 4, 43, 0.5);
  --ring-inset: inset 0 0 0 1px var(--mrk-line);

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --maxw-prose: 58ch;
  --maxw-content: 1120px;
  --maxw-wide: 1320px;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* For slow, settling motion — the destination rule drawing in, the figures
     rising. Symmetrical and slack at both ends, where the three curves above are
     all weighted to arrive fast and settle. */
  --ease-drift: cubic-bezier(0.45, 0.05, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 1100ms;  /* the long editorial fade — deliberately unhurried */

  --control-h-sm: 36px;
  --control-h-md: 44px;
  --control-h-lg: 54px;
}