/* =====================================================================
   MESA QUANTUM — DESIGN SYSTEM (NEXT) · CORE
   Structural tokens: type, space, rhythm, motion. Colour lives in
   palette.css; a direction theme in ../themes/ overrides the roles.
   This file is direction-agnostic — every option shares it.
   ===================================================================== */

/* Manrope is the typeface Rushi settled on for the revamp (2026-08-26).
   Variable, latin subset, self-hosted so there is no third-party request. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2-variations'),
       url('../fonts/manrope-latin.woff2') format('woff2');
}

:root {
  /* ---------- Families ---------- */
  --ds-font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ---------- Type scale ----------
     Fluid, 1.25 ratio at the top end. Deliberately few steps: the
     restraint is the point, and a mature site is not a type specimen. */
  --ds-text-xs:    clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
  --ds-text-sm:    clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --ds-text-base:  clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --ds-text-lg:    clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --ds-text-xl:    clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
  --ds-text-2xl:   clamp(1.75rem, 1.50rem + 1.22vw, 2.5rem);
  --ds-text-3xl:   clamp(2.25rem, 1.79rem + 2.28vw, 3.5rem);
  --ds-text-4xl:   clamp(2.75rem, 1.93rem + 4.10vw, 5rem);

  /* ---------- Weight ---------- */
  --ds-weight-body: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-display: 700;

  /* ---------- Leading / tracking ---------- */
  --ds-leading-tight: 1.08;
  --ds-leading-snug: 1.22;
  --ds-leading-normal: 1.55;
  --ds-leading-relaxed: 1.7;
  --ds-tracking-display: -0.028em;
  --ds-tracking-tight: -0.015em;
  --ds-tracking-normal: 0;
  --ds-tracking-eyebrow: 0.14em;

  /* ---------- Space (8px base) ---------- */
  --ds-space-1: 0.25rem;  --ds-space-2: 0.5rem;   --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;     --ds-space-5: 1.5rem;   --ds-space-6: 2rem;
  --ds-space-7: 3rem;     --ds-space-8: 4rem;     --ds-space-9: 6rem;
  --ds-space-10: 8rem;    --ds-space-11: 12rem;

  /* Vertical rhythm between major page sections. A direction may retune
     this one value to change the whole feel of the page density. */
  --ds-section-y: clamp(4rem, 2.5rem + 6vw, 9rem);

  /* ---------- Measure & container ---------- */
  --ds-measure: 68ch;         /* max line length for body prose */
  --ds-measure-tight: 46ch;   /* for lead paragraphs and hero subheads */
  --ds-container: 1280px;
  --ds-container-narrow: 900px;
  --ds-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  /* ---------- Radius / border ---------- */
  --ds-radius-sm: 2px;
  --ds-radius: 4px;
  --ds-radius-lg: 10px;
  --ds-radius-pill: 999px;
  --ds-border: 1px;

  /* ---------- Motion ----------
     Every motion token is slow and small on purpose. The stated standard
     is that motion must depict something; decoration gets no budget. */
  --ds-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-dur-fast: 140ms;
  --ds-dur: 260ms;
  --ds-dur-slow: 620ms;

  /* ---------- Elevation ---------- */
  --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --ds-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.18);
  --ds-shadow-lg: 0 24px 60px -20px rgb(0 0 0 / 0.30);

  /* ---------- Z ---------- */
  --ds-z-motif: 0; --ds-z-content: 1; --ds-z-header: 50; --ds-z-modal: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ds-dur-fast: 0ms; --ds-dur: 0ms; --ds-dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}