/* ============================================================
   Thomas Bosshart — Spacing, radii, borders, shadows, motion, z
   4px base grid. Calm, minimal elevation. Tight radii.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-px: 1px;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* ---- Layout rails ----
     content-max/read-wide/doc-max are a LOCAL customization from the
     2026-06-20 responsive-layout workstream (single centered reading
     column, --read-wide:920px for an open cours section) — kept as-is,
     out of scope for the v4 palette resync. Upstream's own values
     (720/—/1180) are narrower and drop --read-wide entirely; do not
     adopt them without a separate, deliberate layout decision. */
  --nav-height:      52px;
  --content-max:     760px;  /* reading column (~68ch) — doc pages, cours index, exam */
  --read-wide:       920px;  /* wider, spacious reading column for an open cours section */
  --doc-max:         1320px;  /* outer page container (.kit-inner) */
  --toc-width:       200px;
  --sidebar-width:   248px;
  --page-gutter:     var(--space-8);
  /* DS-authoritative but intentionally consumer-set (spec §5, 2026-07-16): the
     Assistant IA panel width. The DS's own .tb-ai / .tb-ai--floating rules only
     ever read var(--ai-width, 380px) — they never define it — so each consumer
     app owns this value. Defined here so the panel has a real width by default. */
  --ai-width:        380px;

  /* ---- Radii (tight) ---- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 999px;

  /* ---- Borders ---- */
  --border-width:   1px;
  --border-width-2: 1.5px;
  --hairline:       var(--border-width) solid var(--border-soft);
  --rule:           var(--border-width) solid var(--border);

  /* ---- Shadows (calm; barely-there elevation, zinc-tinted) ---- */
  --shadow-xs: 0 1px 1px rgba(24,24,27,.04);
  --shadow-sm: 0 1px 2px rgba(24,24,27,.05), 0 1px 1px rgba(24,24,27,.03);
  --shadow-md: 0 1px 2px rgba(24,24,27,.04), 0 4px 12px rgba(24,24,27,.07);
  --shadow-lg: 0 2px 4px rgba(24,24,27,.05), 0 12px 32px rgba(24,24,27,.10);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Motion (minimal — calm governs) ---- */
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast:    130ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    320ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  /* the one "playful" curve — used only on a single accent hover detail */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  /* ---- Z layers ---- */
  --z-base:    0;    /* @kind other */
  --z-sticky:  100;  /* @kind other */
  --z-nav:     200;  /* @kind other */
  --z-overlay: 800;  /* @kind other */
  --z-modal:   900;  /* @kind other */
  --z-toast:   1000; /* @kind other */
}

/* Dark-mode shadow overrides dropped (v4 Technical, décision 2026-07-04):
   the site is light-only for now — see tokens/colors.css's "DARK: REPORTÉ". */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 0ms;    /* @kind other */
    --dur-base: 0ms;    /* @kind other */
    --dur-slow: 0ms;    /* @kind other */
  }
}