/* ============================================================
   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, Segoe UI Black, Arial Black, system-ui, sans-serif;
    --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;

    /* Game icon slots (ADO #10783). The box sizes of the game icon in each place it renders; the
       GameIcon component's GameIconSlots.Px must give the same numbers (GameIconRenderTests). Square
       with a rounded corner, so a square photo or logo shows whole. */
    --meb-game-icon-size-list-phone: 48px;
    --meb-game-icon-size-list-desktop: 80px;
    --meb-game-icon-size-invite-phone: 64px;
    --meb-game-icon-size-invite-desktop: 128px;
    --meb-game-icon-size-board-phone: 64px;
    --meb-game-icon-size-board-desktop: 128px;
    --meb-game-icon-size-editor-phone: 140px;
    --meb-game-icon-size-editor-desktop: 200px;
    --meb-game-icon-radius: 16%;
}

/* Game icon slot sizes (ADO #10783): the ONE rule that maps a data-slot to its size token, for every
   game-icon box -- GameIcon's root and the photo preview's sample boxes. Unscoped on purpose: scoped CSS
   cannot be shared between the two components. Each box reads --game-icon-size. */
.game-icon[data-slot="list-phone"], .game-icon-photo-preview__box[data-slot="list-phone"] { --game-icon-size: var(--meb-game-icon-size-list-phone); }
.game-icon[data-slot="list-desktop"], .game-icon-photo-preview__box[data-slot="list-desktop"] { --game-icon-size: var(--meb-game-icon-size-list-desktop); }
.game-icon[data-slot="invite-phone"], .game-icon-photo-preview__box[data-slot="invite-phone"] { --game-icon-size: var(--meb-game-icon-size-invite-phone); }
.game-icon[data-slot="invite-desktop"], .game-icon-photo-preview__box[data-slot="invite-desktop"] { --game-icon-size: var(--meb-game-icon-size-invite-desktop); }
.game-icon[data-slot="board-phone"], .game-icon-photo-preview__box[data-slot="board-phone"] { --game-icon-size: var(--meb-game-icon-size-board-phone); }
.game-icon[data-slot="board-desktop"], .game-icon-photo-preview__box[data-slot="board-desktop"] { --game-icon-size: var(--meb-game-icon-size-board-desktop); }
.game-icon[data-slot="editor-phone"], .game-icon-photo-preview__box[data-slot="editor-phone"] { --game-icon-size: var(--meb-game-icon-size-editor-phone); }
.game-icon[data-slot="editor-desktop"], .game-icon-photo-preview__box[data-slot="editor-desktop"] { --game-icon-size: var(--meb-game-icon-size-editor-desktop); }

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

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