/* ===== Design Tokens =====
 * Single source of truth for colors, type scale, spacing, shadows, radii,
 * and acrylic blur surfaces. Loaded first by base.html — page sheets must
 * NOT redefine :root tokens; override individual selectors only.
 * Lifted from the nba repo's token system.
 */

:root {
    /* Text */
    --color-text-primary: #111827;
    --color-text-secondary: #374151;
    --color-text-tertiary: #6b7280;
    --color-text-dimmed: #9ca3af;

    /* Backgrounds */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9fafb;
    --color-bg-tertiary: #f3f4f6;
    --color-bg-muted: #e5e7eb;

    /* Borders */
    --color-border: #e5e7eb;
    --color-border-light: #f3f4f6;
    --color-border-strong: #d1d5db;

    /* Interactive */
    --color-link: #2563eb;
    --color-link-hover: #1d4ed8;
    --color-accent: #3b82f6;

    /* Semantic: Win/Lose */
    --color-win: #10b981;
    --color-win-strong: #059669;
    --color-win-bg: rgba(34, 211, 153, 0.40);
    --color-lose: #ef4444;
    --color-lose-strong: #dc2626;
    --color-lose-bg: rgba(248, 113, 113, 0.40);

    /* Weapon damage types. Dark-theme values are the in-game hues; the
       light-theme values are darkened so they still read on white. */
    --color-element-kinetic: #4b5563;
    --color-element-arc: #0e7490;
    --color-element-solar: #c2410c;
    --color-element-void: #6d28d9;
    --color-element-stasis: #1d4ed8;
    --color-element-strand: #047857;
    --color-element-prismatic: #a21caf;

    /* Exotic gear wears the game's gold. One value for both themes:
       the chip carries its own dark text, so it never depends on the
       surrounding surface. */
    --color-exotic-bg: #c9a227;
    --color-exotic-text: #241c04;

    /* Flash messages */
    --color-flash-bg: #cae6f6;
    --color-flash-border: #377ba8;

    /* Translucent surfaces — hover states, acrylic separators, soft
       accent fills. */
    --color-accent-bg-soft: rgba(59, 130, 246, 0.12);
    --color-border-acrylic: rgba(255, 255, 255, 0.08);

    /* Typography */
    --font-sans: "Google Sans Flex", sans-serif;
    --font-mono: "Noto Sans Mono", monospace;
    --font-icon: "Material Symbols Outlined";

    /* Type scale — mobile-first. Sizes are tuned for a phone with a
       retina display, where pixels are physically tiny; do not use
       desktop-style 12-14px values for production text. */
    --text-xs: 14px;
    --text-sm: 16px;
    --text-base: 20px;
    --text-md: 22px;
    --text-lg: 24px;
    --text-xl: 32px;
    --text-2xl: 40px;
    --text-3xl: 48px;
    --text-4xl: 60px;

    /* Semantic aliases — prefer these in components so the scale
       can be retuned globally without touching every call site. */
    --text-label: var(--text-md);
    --text-body: var(--text-base);
    --text-heading: var(--text-lg);

    /* Spacing */
    --content-max-width: 1040px;
    --content-padding: 24px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Acrylic blur — applied to chrome surfaces.
       Use together: backdrop-filter: var(--blur-acrylic);
                     background: var(--bg-acrylic); */
    --blur-acrylic: blur(20px) saturate(180%);
    --blur-acrylic-strong: blur(30px) saturate(200%);
    /* Light-mode fills are SLIGHTLY DARK rather than slightly white-on-white,
       otherwise the page-header banner is invisible against the white page bg. */
    --bg-acrylic: rgba(0, 0, 0, 0.06);
    --bg-acrylic-strong: rgba(0, 0, 0, 0.10);
}

/* Desktop type scale — same token names, smaller pixel values.
 * The default scale above is tuned for an iPhone-class retina display.
 * On a desktop monitor that same 32px nav-link reads as enormous. */
@media (min-width: 1024px) {
    :root {
        --text-xs: 12px;
        --text-sm: 13px;
        --text-base: 15px;
        --text-md: 16px;
        --text-lg: 18px;
        --text-xl: 22px;
        --text-2xl: 28px;
        --text-3xl: 36px;
        --text-4xl: 48px;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --color-text-primary: #ffffff;
        --color-text-secondary: #e5e7eb;
        --color-text-tertiary: #9ca3af;
        --color-text-dimmed: #6b7280;

        --color-bg-primary: #0b101a;
        --color-bg-secondary: #111827;
        --color-bg-tertiary: #374151;
        --color-bg-muted: #4b5563;

        --color-border: #374151;
        --color-border-light: #1f2937;
        --color-border-strong: #4b5563;

        --color-link: #60a5fa;
        --color-link-hover: #93c5fd;
        --color-accent: #3b82f6;

        --color-win-bg: rgba(34, 211, 153, 0.50);
        --color-lose-bg: rgba(248, 113, 113, 0.50);

        --color-element-kinetic: #d1d5db;
        --color-element-arc: #7ae7ff;
        --color-element-solar: #ff9d42;
        --color-element-void: #c4a2ff;
        --color-element-stasis: #7aa7ff;
        --color-element-strand: #4ce38a;
        --color-element-prismatic: #f0a6f5;

        --color-flash-bg: #1e3a5f;
        --color-flash-border: #60a5fa;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

        --bg-acrylic: rgba(55, 65, 81, 0.55);
        --bg-acrylic-strong: rgba(17, 24, 39, 0.80);
    }
}

html.dark {
    --color-text-primary: #ffffff;
    --color-text-secondary: #e5e7eb;
    --color-text-tertiary: #9ca3af;
    --color-text-dimmed: #6b7280;

    --color-bg-primary: #0b101a;
    --color-bg-secondary: #111827;
    --color-bg-tertiary: #374151;
    --color-bg-muted: #4b5563;

    --color-border: #374151;
    --color-border-light: #1f2937;
    --color-border-strong: #4b5563;

    --color-link: #60a5fa;
    --color-link-hover: #93c5fd;
    --color-accent: #3b82f6;

    --color-win-bg: rgba(34, 211, 153, 0.50);
    --color-lose-bg: rgba(248, 113, 113, 0.50);

    --color-element-kinetic: #d1d5db;
    --color-element-arc: #7ae7ff;
    --color-element-solar: #ff9d42;
    --color-element-void: #c4a2ff;
    --color-element-stasis: #7aa7ff;
    --color-element-strand: #4ce38a;
    --color-element-prismatic: #f0a6f5;

    --color-flash-bg: #1e3a5f;
    --color-flash-border: #60a5fa;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

    --bg-acrylic: rgba(55, 65, 81, 0.55);
    --bg-acrylic-strong: rgba(17, 24, 39, 0.80);
}