/* ============================================================================
   osshp — Layer-1 STRUCTURAL token sheet (app-owned, THEME-IMMUTABLE)
   ----------------------------------------------------------------------------
   Emitted on :root by the app, identical for every operator and every theme.
   A theme MUST NOT redefine any token in this block: a theme changes color and
   material ONLY, never the type scale, spacing, radii, layout measures, motion
   timing, or focus *geometry*. Switching the active theme leaves every computed
   size, radius, measure, and spacing unchanged (theme-rendering-contract §5.1;
   design-language §4/§5). Values match the approved design-language fidelity
   anchor.

   Layer-2 (color-scheme) and Layer-3 (brand/accent) semantic token VALUES are
   theme-owned and supplied by the theme layer (M1.4). Owned components read
   those semantic names (--text, --surface, --accent-text, --on-accent, --focus,
   …) — never raw hex.
   ============================================================================ */

:root {
  /* --- Font roles --------------------------------------------------------- */
  /* DEFAULT = system stack (instant render, no FOUC, SEO-friendly).
     Operator overrides --brand-font-* via branding settings (Layer-3, M1.4). */
  --font-body: var(--brand-font-body,
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  --font-heading: var(--brand-font-heading, var(--font-body));
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Type scale — modular ratio 1.25 (major third), prose base 18px ----- */
  --text-2xs: 0.694rem;   /* 11.1px  fine print, image credits */
  --text-xs:  0.833rem;   /* 13.3px  meta, captions, tags */
  --text-sm:  0.9rem;     /* 14.4px  dense UI */
  --text-base: 1rem;      /* 16px    UI default */
  --text-prose: 1.125rem; /* 18px    body / reading */
  --text-lg:  1.25rem;    /* 20px    h4 / lead */
  --text-xl:  1.5rem;     /* 24px    h3 */
  --text-2xl: 1.875rem;   /* 30px    h2 */
  --text-3xl: 2.5rem;     /* 40px    h1 */
  --text-4xl: 3.25rem;    /* 52px    hero / display */

  /* --- Line-heights ------------------------------------------------------- */
  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-normal: 1.65;

  /* --- Weight map --------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* --- Tracking ----------------------------------------------------------- */
  --tracking-tight: -0.015em;  /* display headings */
  --tracking-normal: 0;

  /* --- Spacing — 4px base t-shirt scale ----------------------------------- */
  --space-3xs: 0.25rem;   /* 4px */
  --space-2xs: 0.5rem;    /* 8px */
  --space-xs:  0.75rem;   /* 12px */
  --space-s:   1rem;      /* 16px */
  --space-m:   1.5rem;    /* 24px */
  --space-l:   2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */

  /* --- Radii -------------------------------------------------------------- */
  --radius-sm: 6px;       /* chips ring rounding */
  --radius-md: 10px;      /* controls / inputs */
  --radius-lg: 16px;      /* cards */
  --radius-full: 9999px;  /* pills / chips */

  /* --- Border widths ------------------------------------------------------ */
  --border-hairline: 1px;
  --border-thick: 2px;

  /* --- Layout measures ---------------------------------------------------- */
  --measure-prose: 68ch;     /* reading column */
  --measure-content: 72rem;  /* 1152px content column */
  --measure-wide: 80rem;     /* 1280px wide section */

  /* --- Focus geometry (color = --focus, a Layer-2/3 theme token) ---------- */
  --focus-width: 3px;
  --focus-offset: 2px;

  /* --- Motion ------------------------------------------------------------- */
  --dur: 140ms;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* --- Base type (structural only; color comes from the theme layer) -------- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* --- Single :focus-visible ring covers every owned control (2.4.7) -------- */
/* Geometry is Layer-1; color is --focus (theme). Keyword fallback keeps the
   ring visible before the theme layer supplies --focus (no baked hex). */
:focus-visible {
  outline: var(--focus-width) solid var(--focus, currentColor);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* --- Reduced-motion honored globally ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}