/* ============================================
   P2.lol — Design System / Theme
============================================ */

:root {

    /* --- Backgrounds --- */
    --bg: #111214;
    /* page base */
    --surface: #17191d;
    /* cards / panels */
    --surface-2: #1e2026;
    /* elevated surfaces */

    /* --- Borders --- */
    --border: #22252b;
    /* default border */
    --border-subtle: #1a1c21;
    /* very faint dividers */

    /* --- Brand / Accent --- */
    --blue: #5b8fff;
    /* primary accent */
    --blue-dim: #3a6ee8;
    /* hover / pressed */
    --blue-faint: rgba(91, 143, 255, 0.08);
    /* tinted backgrounds */

    /* --- Text --- */
    --text: #d4d8e2;
    /* body text */
    --text-strong: #ffffff;
    /* headings / emphasis */
    --muted: #505560;
    /* secondary / captions */
    --muted-bright: #7a808e;
    /* slightly more visible muted */

    /* --- Feedback (for future use) --- */
    --success: #3ecf8e;
    --warning: #e3a227;
    --danger: #e05252;

    /* --- Typography --- */
    --font: "Outfit", sans-serif;

    /* --- Radius --- */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;

    /* --- Spacing scale --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* --- Transitions --- */
    --ease: cubic-bezier(0.2, 1, 0.4, 1);
    --duration: 0.2s;
}