/* ==========================================================================
   GLLIT.tv design tokens
   Colours come from the original site's palette (pink, pastel, lavender, blue). These are the
   built-in colours: a theme file on Google Drive (THEME_FILE, see theme.example.json) overrides
   them through /theme.css, and SITE_ERA picks one of the era blocks below.
   ========================================================================== */

@font-face {
    font-family: "ILLIT Pixel";
    src: url("../fonts/illit-pixel.ttf") format("truetype");
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Brand palette */
    --pink-50: #fff6fa;
    --pink-100: #ffe6f1;
    --pink-200: #ffcfe4;
    --pink-300: #ffadd4;
    --pink-400: #ff8ec7;
    --pink-500: #f06aae;
    --pink-600: #d4468f;
    --pink-700: #ad2f71;
    --lavender-100: #f3e9f9;
    --lavender-200: #dcc5e8;
    --lavender-400: #b48fd0;
    --blue-100: #e6eef9;
    --blue-200: #c5d5e8;

    /* Brand roles (era blocks override these) */
    --brand: var(--pink-400);
    --brand-strong: var(--pink-600);
    --brand-text: var(--pink-700);
    --brand-soft: var(--pink-100);
    --brand-tint: rgba(255, 142, 199, 0.12);
    --brand-gradient: linear-gradient(135deg, #ffadd4 0%, #f2b8e3 38%, #dcc5e8 72%, #c5d5e8 100%);
    --brand-gradient-strong: linear-gradient(135deg, #ff8ec7 0%, #e889d4 45%, #b48fd0 100%);
    --brand-glow: rgba(255, 142, 199, 0.45);
    /* Behind the logo (white lettering, light-pink TV), with a soft highlight in one corner */
    --logo-panel: linear-gradient(135deg, #d6519a 0%, #b35ac0 58%, #8b62c8 100%);
    --logo-glow: rgba(255, 173, 212, 0.35);
    /* The ILLIT logo on the home page: a colour or a gradient */
    --illit-logo: var(--brand-gradient-strong);
    /* Selected text, and the sparkles drifting in the background (site.js) */
    --selection-bg: var(--pink-200);
    --sparkle-1: var(--pink-300);
    --sparkle-2: var(--lavender-200);
    --sparkle-3: var(--blue-200);
    --sparkle-4: var(--pink-400);

    /* Surfaces and text (light) */
    --bg: #fff7fb;
    --bg-accent: radial-gradient(1200px 600px at 85% -10%, rgba(220, 197, 232, 0.55), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(255, 207, 228, 0.6), transparent 55%);
    --surface: #ffffff;
    --surface-muted: #fdf3f8;
    --surface-glass: rgba(255, 255, 255, 0.72);
    --sidebar-bg: rgba(255, 250, 253, 0.86);
    --border: rgba(190, 120, 160, 0.16);
    --border-strong: rgba(190, 120, 160, 0.3);
    --text: #241a27;
    --text-muted: #6f6273;
    --text-faint: #9a8d9e;
    --on-brand: #ffffff;
    /* Text on the soft brand gradient (home page band, first chart tile, selected text) */
    --on-gradient: #2a1020;

    /* Status */
    --up: #12865a;
    --down: #d23c55;
    --new: #c06a00;

    /* Platform colours (charts) */
    --melon: #13a94e;
    --genie: #2b6fe0;
    --bugs: #ec5a24;
    --flo: #6d55f0;

    /* Type */
    --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Malgun Gothic", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Malgun Gothic", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
    --font-pixel: "ILLIT Pixel", var(--font-sans);
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
    --text-3xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.35rem);

    /* Space, shape, motion */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 72px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(120, 40, 90, 0.06);
    --shadow-sm: 0 1px 2px rgba(120, 40, 90, 0.05), 0 4px 14px rgba(120, 40, 90, 0.06);
    --shadow-md: 0 2px 6px rgba(120, 40, 90, 0.05), 0 12px 32px rgba(120, 40, 90, 0.09);
    --shadow-lg: 0 4px 10px rgba(120, 40, 90, 0.06), 0 24px 60px rgba(120, 40, 90, 0.14);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --fast: 160ms;
    --normal: 260ms;

    /* Layout */
    --sidebar-width: 272px;
    --content-max: 1180px;
    --topbar-height: 64px;
}

/* Wide screens: a wider content area, slightly larger text (rem sizes follow the root size) and
   roomier spacing. Pages add their own wide layouts at the same breakpoints. */
@media (min-width: 1680px) {
    :root {
        font-size: 106.25%;
        --content-max: 1440px;
        --space-7: 56px;
        --space-8: 88px;
    }
}

@media (min-width: 2100px) {
    :root {
        font-size: 112.5%;
        --content-max: 1760px;
        --text-3xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.8rem);
    }
}

@media (min-width: 2400px) {
    :root {
        --content-max: 2000px;
        --sidebar-width: 292px;
    }
}

/* Dark theme: set by the theme switch (data-theme on <html>). */
:root[data-theme="dark"] {
    color-scheme: dark;
    --brand-text: #ffa6d3;
    --brand-soft: rgba(255, 142, 199, 0.14);
    --brand-tint: rgba(255, 142, 199, 0.1);
    --brand-glow: rgba(255, 142, 199, 0.3);
    --bg: #141016;
    --bg-accent: radial-gradient(1100px 600px at 85% -10%, rgba(180, 143, 208, 0.18), transparent 60%),
        radial-gradient(900px 500px at -10% 5%, rgba(255, 142, 199, 0.14), transparent 55%);
    --surface: #1d1720;
    --surface-muted: #241d28;
    --surface-glass: rgba(33, 26, 37, 0.72);
    --sidebar-bg: rgba(24, 19, 27, 0.88);
    --border: rgba(255, 182, 217, 0.1);
    --border-strong: rgba(255, 182, 217, 0.2);
    --text: #f7eef8;
    --text-muted: #bcaebf;
    --text-faint: #8a7d8d;
    --sparkle-4: #ffffff;
    --up: #45d38f;
    --down: #ff7088;
    --new: #ffb24d;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.35), 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   Comeback eras (SITE_ERA). Each only swaps the brand colours. A theme from Google Drive
   overrides these too, so they matter only when there's no theme file.
   ========================================================================== */

/* MAGNETIC: electric blue */
:root[data-era="magnetic"] {
    --brand: #6b9fff;
    --brand-strong: #3f74e6;
    --brand-text: #2c5bc4;
    --brand-soft: #e5eeff;
    --brand-tint: rgba(107, 159, 255, 0.12);
    --brand-gradient: linear-gradient(135deg, #a8c9ff 0%, #b8b2ff 50%, #8bc7ff 100%);
    --brand-gradient-strong: linear-gradient(135deg, #6b9fff 0%, #8a7dff 55%, #4d7fff 100%);
    --brand-glow: rgba(107, 159, 255, 0.45);
    --logo-panel: linear-gradient(135deg, #3f6fd8 0%, #6a5bd6 60%, #8a63c9 100%);
}
:root[data-era="magnetic"][data-theme="dark"] {
    --brand-text: #a8c6ff;
    --brand-soft: rgba(107, 159, 255, 0.16);
}

/* SUPER REAL ME: bright pink and violet */
:root[data-era="super-real-me"] {
    --brand: #ff6b9d;
    --brand-strong: #e83f7d;
    --brand-text: #c42a64;
    --brand-soft: #ffe5f0;
    --brand-tint: rgba(255, 107, 157, 0.12);
    --brand-gradient: linear-gradient(135deg, #ffa8c5 0%, #f0b0f5 50%, #c77dff 100%);
    --brand-gradient-strong: linear-gradient(135deg, #ff6b9d 0%, #e46ad9 50%, #c77dff 100%);
    --brand-glow: rgba(255, 107, 157, 0.45);
    --logo-panel: linear-gradient(135deg, #e0457f 0%, #b950c4 60%, #8f5bd6 100%);
}
:root[data-era="super-real-me"][data-theme="dark"] {
    --brand-text: #ff9ec0;
    --brand-soft: rgba(255, 107, 157, 0.16);
}