/*
 * alexiuz design tokens
 * ---------------------
 * Shared across the alexiuz network. Source of truth lives at
 * /home/internetieruser/alexiuz-shared/styles/tokens.css and is symlinked into
 * each site at public/styles/shared/.
 *
 * Values were extracted from generor.com, which is the reference implementation
 * of the design language. Every token below is the *exact* value it replaced —
 * the extraction was deliberately 1:1 so generor renders pixel-identical.
 *
 * That is why some scales have near-duplicate steps (--surface-1 #091119 vs
 * --surface-2 #0b1521, three separate danger reds, and so on). Those are real
 * drift in the original stylesheet, preserved here rather than silently
 * collapsed. Consolidating them is a follow-up that WILL change pixels.
 *
 * To re-skin a site, override tokens in a per-site theme.css loaded after this
 * file. In practice only --accent*, --surface-* and --text* need touching.
 *
 * NOTE ON ALPHA: custom properties can't be interpolated into rgba() as a hex,
 * so colours that are used with transparency also expose an `-rgb` triplet:
 *
 *     background: rgba(var(--accent-rgb), 0.15);
 *
 * NOTE ON BREAKPOINTS: @media queries cannot read custom properties. The
 * breakpoints are documented at the bottom as a convention to hand-match.
 */

:root {
    /* ---- Accent -------------------------------------------------------- */
    /* The cyan the network is built around. --accent carries fills, borders
       and glow; --accent-bright is the higher-contrast variant used for text. */
    --accent: #6afcff;
    --accent-rgb: 106, 252, 255;
    --accent-bright: #00faff;
    --accent-bright-rgb: 0, 250, 255;
    --accent-blue: #5b9cff;
    --accent-blue-rgb: 91, 156, 255;
    --accent-violet: #aa88ff;

    /* Decorative accents. Used for categories, chart series and highlight
       states rather than chrome — generor and statility both reach for the
       same ones, so they live here rather than in either site's theme. */
    --accent-gold: #fad373;
    --accent-pink: #f685f0;
    --accent-orange: #f69e6a;
    --accent-lavender: #c2b8ff;

    /* ---- Text ---------------------------------------------------------- */
    --text: #f0f0f0;            /* body copy */
    --text-bright: #ffffff;     /* headings, high emphasis */
    --text-soft: #e0e7ee;
    --text-muted: #88aacc;      /* secondary copy, labels */
    --text-muted-2: #8b9dc3;
    --text-muted-3: #b8c5d0;
    --text-dim: #667799;        /* timestamps, meta, disabled */
    --text-dim-2: #888888;
    --text-link: #98c3ff;
    --text-link-2: #8ab4e6;
    /* generor referenced --text-secondary in two places but never defined it,
       so `.browse-filter-group label` silently inherited its parent colour.
       The intended value is recoverable from the fallback the other call site
       used: `var(--text-secondary, #8a9bb3)`. Defining it here fixes that. */
    --text-secondary: #8a9bb3;

    /* ---- Surfaces (darkest to lightest) -------------------------------- */
    --surface-0: #080e1c;       /* page ground */
    --surface-0-rgb: 8, 14, 28;
    --surface-1: #091119;
    --surface-2: #0b1521;       /* cards */
    --surface-3: #0e1522;
    --surface-3-rgb: 14, 21, 34;
    --surface-4: #111d33;       /* raised panels, hover */
    --surface-5: #122732;
    --surface-raised: #48658b;  /* pills, chips, active states */
    --surface-raised-rgb: 72, 101, 139;

    /* ---- Borders ------------------------------------------------------- */
    --border: #223552;          /* default hairline */
    --border-rgb: 34, 53, 82;
    --border-2: #203256;
    --border-3: #294264;
    --border-4: #304570;
    --border-4-rgb: 48, 69, 112;
    --border-5: #304f78;        /* emphasised / hover */

    /* ---- Status -------------------------------------------------------- */
    --danger: #ff6b6b;
    --danger-rgb: 255, 107, 107;
    --danger-2: #f44336;
    --danger-3: #f84949;
    --success: #4caf50;
    --success-bright: #00ff88;
    --success-2: #4ade80;
    --warning: #ffc107;
    --gold: #ffd700;

    /* ---- Neutrals ------------------------------------------------------ */
    --white: #ffffff;
    --white-rgb: 255, 255, 255;
    --black: #000000;
    --black-rgb: 0, 0, 0;

    /* ---- Radii --------------------------------------------------------- */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-2xl: 12px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* ---- Spacing ------------------------------------------------------- */
    /* A 4px base scale. The source uses 15px/25px in a lot of places, which do
       not sit on it; --space-4 and --space-7 keep those exact values so the
       extraction stays 1:1. */
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 10px;
    --space-6: 12px;
    --space-7: 15px;
    --space-8: 16px;
    --space-9: 20px;
    --space-10: 25px;
    --space-11: 30px;
    --space-12: 40px;

    /* ---- Type ---------------------------------------------------------- */
    --font-sans: "Noto Sans", "Open Sans", sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 15px;
    --text-xl: 16px;
    --text-2xl: 18px;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    /* ---- Motion -------------------------------------------------------- */
    --transition: all 0.2s ease;
    --transition-fast: all 0.15s ease-in;
    --transition-slow: all 0.3s ease;
    --transition-linear: all 0.25s linear;

    /* ---- Elevation ----------------------------------------------------- */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    --shadow-focus: 0 0 0 2px rgba(106, 252, 255, 0.15);
}

/*
 * Breakpoints — hand-match these, custom properties do not work in @media.
 * generor currently also uses 480/600/640/700/701/1000/1100px in a handful of
 * places; those are drift, not part of the system.
 *
 *   --bp-md:  768px   (the one that matters — ~21 uses)
 *   --bp-lg: 1024px
 *   --bp-xl: 1280px
 */