/* ============================================================
   design-system-root.css — Non-theme layout and typography tokens
   Loaded before theme CSS so component styles always have stable
   spacing, typography, radius, motion, and border-width primitives.

   These tokens are structural and must never come from the
   database-backed theme system.

   Governance:
   - Typography ownership lives here: font families, size scale,
     weight scale, and root font inheritance.
   - Theme files must not define new ad hoc typography primitives.
   - Shared components inherit font-family unless a documented display
     exception is approved.
   - --font-accent is restricted to brand marks, decorative display
     headings, and explicitly approved promotional treatments only.
     It is forbidden for body copy, nav text, buttons, form controls,
     legal/content pages, and standard shell text.
   ============================================================ */

:root {
    /* Typography */
    --font-primary: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-accent: 'Lilita One', cursive;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 40px;
    --text-5xl: 48px;
    --text-6xl: 56px;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-heavy: 800;

    /* Spacing */
    --meb-space-1: 4px;
    --meb-space-2: 8px;
    --meb-space-3: 12px;
    --meb-space-4: 16px;
    --meb-space-5: 24px;

    /* Radius */
    --meb-radius-pill: 9999px;

    /* Motion */
    --meb-motion-fast: 120ms ease;

    /* Borders */
    --meb-border-width-medium: 2.5px;
}

html,
body,
#app-root,
#app {
    font-family: var(--font-primary);
    font-size: var(--text-md);
}

button,
input,
select,
textarea {
    font: inherit;
}