/* ══ Spacing tokens ════════════════════════════════════════════════════════════
   Loaded before style.css on every dashboard page and by the public leaderboard.
   The standard (docs/ui/layout-standard.md):
   - Every margin, padding and gap is 0 or a token from this file. Raw lengths are
     refused by tests/test_ui_standards.py, apart from 1px for border overlap.
   - The scale is a 4px grid (8px for most layout), with 2px only for small chips.
   - The same relationship always uses the same token: the named tokens below say
     which one, and compact density (Preferences) changes them all together. */

/* ── Scale: step N is N x 4px (0-5 is 2px) ─────────────────────────────────── */
:root {
    --space-0-5: 0.125rem;  /* 2px  */
    --space-1: 0.25rem;     /* 4px  */
    --space-2: 0.5rem;      /* 8px  */
    --space-3: 0.75rem;     /* 12px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-8: 2rem;        /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
}

/* ── Relationships: what each gap and padding is for ───────────────────────── */
:root {
    /* The page: padding around the content, and the gap between its sections and cards */
    --pad-page: var(--space-8) var(--space-10) var(--space-12);
    --space-page: var(--space-6);
    /* Inside a card: between boxes, and between form fields */
    --space-inner: var(--space-3);
    --space-field: var(--space-5);
    /* Card padding: header, body, and small tiles (stats, module cards). --pad-card-x is the
       card's side padding, for anything that must line up with a card's content; --pad-card-y is
       its body's top and bottom padding, for what runs to the card's edge (a table) */
    --pad-card-x: var(--space-6);
    --pad-card-y: var(--space-6);
    --pad-head: var(--space-5) var(--pad-card-x);
    --pad-body: var(--pad-card-y) var(--pad-card-x);
    --pad-tile: var(--space-4) var(--space-5);
    /* Controls: buttons and inputs, their small size, and chips (badges, tags) */
    --pad-control: var(--space-2) var(--space-4);
    --pad-control-sm: var(--space-1) var(--space-2);
    --pad-chip: var(--space-0-5) var(--space-2);
    /* Between an icon and its text, and between things side by side in a row */
    --gap-icon: var(--space-2);
    --gap-row: var(--space-2);
    /* Table cells, normal and compact */
    --pad-cell: var(--space-2) var(--space-3);
    --pad-cell-compact: var(--space-1) var(--space-2);
    /* A label and the field under it; a hint and the field above it */
    --space-label: var(--space-2);
    --space-hint: var(--space-1);
    /* Room below the last card, so a dropdown near the bottom of a page can open */
    --room-page-end: calc(var(--space-12) * 4);
    /* Measured, not chosen: how much of the scrolling area's end a menu along the bottom covers (core.js sets it),
       so what is scrolled into view stops above the menu */
    --nav-bar-h: 0px;
}

[data-density="compact"] {
    --pad-page: var(--space-5) var(--space-6) var(--space-8);
    --space-page: var(--space-4);
    --space-inner: var(--space-2);
    --space-field: var(--space-4);
    --pad-card-x: var(--space-4);
    --pad-card-y: var(--space-4);
    --pad-head: var(--space-3) var(--pad-card-x);
    --pad-body: var(--pad-card-y) var(--pad-card-x);
    --pad-tile: var(--space-3) var(--space-4);
    --pad-cell: var(--space-1) var(--space-3);
}

/* Phones: less room at the sides, in either density */
@media (max-width: 640px) {
    :root,
    [data-density="compact"] {
        --pad-page: var(--space-4) var(--space-4) var(--space-8);
    }
}