/*
 * SceneSat public design system
 *
 * This is the only stylesheet allowed to contain literal colours. Feature CSS consumes
 * semantic roles (or the temporary legacy aliases at the bottom), never palette values.
 * Theme overrides therefore reach the entire shell, every page, and persistent players.
 */

@layer tokens {
    :root {
        color-scheme: dark;

        /* Typography */
        --font-family-orbiter: SceneSat, system-ui, -apple-system, "Segoe UI", sans-serif;
        --font-family-system: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --font-family-terminal: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
        --font-family-sans: var(--font-family-orbiter);
        --font-family-body: var(--font-family-orbiter);
        --font-family-display: var(--font-family-orbiter);
        --font-family-label: var(--font-family-orbiter);
        --font-family-mono: var(--font-family-terminal);
        --font-size-xs: 0.72rem;
        --font-size-sm: 0.85rem;
        --font-size-md: 1rem;
        --font-size-lg: 1.25rem;
        --font-size-xl: 1.5rem;
        --font-size-2xl: 2rem;
        --font-size-display: clamp(2rem, 5vw, 2.5rem);
        --line-height-tight: 1.2;
        --line-height-body: 1.6;
        --font-weight-regular: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;

        /* Spacing and shape */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-8: 3rem;
        --radius-xs: 3px;
        --radius-sm: 6px;
        --radius-md: 8px;
        --radius-lg: 10px;
        --radius-pill: 999px;
        --border-width: 1px;
        --content-width: 980px;
        --content-width-wide: 1100px;
        --measure: 72ch;

        /* Motion */
        --duration-instant: 80ms;
        --duration-fast: 150ms;
        --duration-normal: 250ms;
        --duration-slow: 400ms;
        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
        --ease-emphasized: cubic-bezier(0.25, 1, 0.5, 1);

        /* Visual-language component contract */
        --surface-background: var(--color-surface-1);
        --surface-border: var(--color-border);
        --surface-border-width: var(--border-width);
        --surface-shadow: none;
        --surface-backdrop-filter: none;
        --display-letter-spacing: normal;
        --label-letter-spacing: normal;
        --label-transform: none;
        --visual-overlay:
            linear-gradient(transparent, transparent);
        --visual-overlay-size: auto;
        --visual-overlay-repeat: no-repeat;

        /* Default palette: orbital dusk */
        --palette-canvas: #0f0f11;
        --palette-surface-1: #1e2742;
        --palette-surface-2: #374469;
        --palette-surface-3: #46557e;
        --palette-border: #8f9cb0;
        --palette-border-strong: #c7d4f7;
        --palette-text: #c7d4f7;
        --palette-text-muted: #9fb0df;
        --palette-heading: #74c0eb;
        --palette-accent: #008ddf;
        --palette-accent-strong: #20adff;
        --palette-accent-soft: #30498f;
        --palette-on-accent: #041622;
        --palette-focus: #74c0eb;
        --palette-backdrop-glow: rgba(210, 110, 90, 0.16);
        --backdrop-star-opacity: 1;
    }

    :root[data-theme="aurora"] {
        --palette-canvas: #100d1b;
        --palette-surface-1: #241d3b;
        --palette-surface-2: #3b315c;
        --palette-surface-3: #514273;
        --palette-border: #9d90bb;
        --palette-border-strong: #eee8ff;
        --palette-text: #eee8ff;
        --palette-text-muted: #bdb2d9;
        --palette-heading: #e2a7ff;
        --palette-accent: #35c9b3;
        --palette-accent-strong: #64ead2;
        --palette-accent-soft: #21685f;
        --palette-on-accent: #071d1a;
        --palette-focus: #e2a7ff;
        --palette-backdrop-glow: rgba(187, 93, 224, 0.18);
    }

    :root[data-theme="phosphor"] {
        --palette-canvas: #040b07;
        --palette-surface-1: #0b1b11;
        --palette-surface-2: #163221;
        --palette-surface-3: #20492e;
        --palette-border: #5d8c6c;
        --palette-border-strong: #c8f6d2;
        --palette-text: #dcf8e2;
        --palette-text-muted: #8ebf98;
        --palette-heading: #7cff92;
        --palette-accent: #24e95a;
        --palette-accent-strong: #62ff84;
        --palette-accent-soft: #17612c;
        --palette-on-accent: #031407;
        --palette-focus: #fff37a;
        --palette-backdrop-glow: rgba(36, 233, 90, 0.16);
    }

    :root[data-theme="amber"] {
        --palette-canvas: #110d08;
        --palette-surface-1: #241a10;
        --palette-surface-2: #3c2a17;
        --palette-surface-3: #55391c;
        --palette-border: #9d7950;
        --palette-border-strong: #ffe2ad;
        --palette-text: #fff0d3;
        --palette-text-muted: #c8aa7b;
        --palette-heading: #ffc15c;
        --palette-accent: #e89a2d;
        --palette-accent-strong: #ffbc50;
        --palette-accent-soft: #704316;
        --palette-on-accent: #261303;
        --palette-focus: #6dd9ff;
        --palette-backdrop-glow: rgba(255, 176, 65, 0.18);
    }

    :root[data-theme="daylight"] {
        color-scheme: light;
        --palette-canvas: #f4f2ed;
        --palette-surface-1: #ffffff;
        --palette-surface-2: #e5e9f2;
        --palette-surface-3: #d7deeb;
        --palette-border: #69758b;
        --palette-border-strong: #263248;
        --palette-text: #20283a;
        --palette-text-muted: #536078;
        --palette-heading: #155f91;
        --palette-accent: #006dab;
        --palette-accent-strong: #005b91;
        --palette-accent-soft: #bcdcf0;
        --palette-on-accent: #ffffff;
        --palette-focus: #7b3fc6;
        --palette-backdrop-glow: rgba(210, 110, 90, 0.10);
        --backdrop-star-opacity: 0.14;
    }

    :root[data-contrast="high"] {
        --palette-border: var(--palette-border-strong);
        --palette-text-muted: var(--palette-text);
    }

    /*
     * Visual-language profiles. These change shape, type, texture, depth and ornamentation;
     * palette choice remains independent. The component rules that consume this contract live
     * at the end of app.css, after the ordinary component declarations.
     */
    :root[data-style="vector"] {
        --font-family-body: var(--font-family-terminal);
        --font-family-display: var(--font-family-terminal);
        --font-family-label: var(--font-family-terminal);
        --radius-xs: 1px;
        --radius-sm: 3px;
        --radius-md: 5px;
        --radius-lg: 7px;
        --surface-background: color-mix(in srgb, var(--color-surface-1) 78%, transparent);
        --surface-border: color-mix(in srgb, var(--color-action) 52%, transparent);
        --surface-shadow: inset 0 1px 0 var(--color-highlight-subtle);
        --display-letter-spacing: 0.035em;
        --label-letter-spacing: 0.08em;
        --label-transform: uppercase;
        --visual-overlay:
            radial-gradient(circle, var(--color-highlight-soft) 1px, transparent 1px);
        --visual-overlay-size: 24px 24px;
        --visual-overlay-repeat: repeat;
    }

    :root[data-style="crt"] {
        --font-family-body: var(--font-family-terminal);
        --font-family-display: var(--font-family-terminal);
        --font-family-label: var(--font-family-terminal);
        --radius-xs: 3px;
        --radius-sm: 7px;
        --radius-md: 11px;
        --radius-lg: 15px;
        --surface-background:
            linear-gradient(120deg, var(--color-highlight-soft), transparent 35%),
            color-mix(in srgb, var(--color-surface-1) 88%, transparent);
        --surface-border: color-mix(in srgb, var(--color-border-strong) 48%, transparent);
        --surface-border-width: 2px;
        --surface-shadow:
            inset 0 0 22px color-mix(in srgb, var(--color-action) 8%, transparent),
            0 0 18px color-mix(in srgb, var(--color-action) 7%, transparent);
        --surface-backdrop-filter: blur(3px);
        --display-letter-spacing: 0.025em;
        --label-letter-spacing: 0.055em;
        --label-transform: uppercase;
        --visual-overlay:
            repeating-linear-gradient(0deg, transparent 0 3px, var(--color-highlight-subtle) 3px 4px);
        --visual-overlay-size: auto;
        --visual-overlay-repeat: repeat;
    }

    :root[data-style="console"] {
        --font-family-body: var(--font-family-orbiter);
        --font-family-display: var(--font-family-terminal);
        --font-family-label: var(--font-family-orbiter);
        --radius-xs: 4px;
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
        --surface-background:
            linear-gradient(145deg, var(--color-highlight-soft), transparent 38%),
            color-mix(in srgb, var(--color-surface-1) 91%, transparent);
        --surface-border: color-mix(in srgb, var(--color-border-strong) 38%, transparent);
        --surface-shadow:
            inset 0 1px 0 var(--color-highlight-soft),
            0 10px 30px var(--color-scrim-soft),
            0 0 20px color-mix(in srgb, var(--color-action) 8%, transparent);
        --surface-backdrop-filter: blur(8px) saturate(1.1);
        --display-letter-spacing: 0.02em;
        --label-letter-spacing: 0.025em;
        --label-transform: none;
        --visual-overlay:
            repeating-linear-gradient(90deg, transparent 0 2px, var(--color-highlight-subtle) 2px 3px);
        --visual-overlay-size: auto;
        --visual-overlay-repeat: repeat;
    }

    :root[data-font="orbiter"] {
        --font-family-body: var(--font-family-orbiter);
        --font-family-display: var(--font-family-orbiter);
        --font-family-label: var(--font-family-orbiter);
    }

    :root[data-font="terminal"] {
        --font-family-body: var(--font-family-terminal);
        --font-family-display: var(--font-family-terminal);
        --font-family-label: var(--font-family-terminal);
    }

    :root[data-font="system"] {
        --font-family-body: var(--font-family-system);
        --font-family-display: var(--font-family-system);
        --font-family-label: var(--font-family-system);
    }

    :root {
        /* Semantic colour roles */
        --color-canvas: var(--palette-canvas);
        --color-surface-1: var(--palette-surface-1);
        --color-surface-2: var(--palette-surface-2);
        --color-surface-3: var(--palette-surface-3);
        --color-border: var(--palette-border);
        --color-border-strong: var(--palette-border-strong);
        --color-text: var(--palette-text);
        --color-text-muted: var(--palette-text-muted);
        --color-heading: var(--palette-heading);
        --color-link: var(--palette-accent);
        --color-action: var(--palette-accent-strong);
        --color-action-soft: var(--palette-accent-soft);
        --color-on-action: var(--palette-on-accent);
        --color-focus: var(--palette-focus);
        --color-accent-a07: color-mix(in srgb, var(--color-action) 7%, transparent);
        --color-accent-a08: color-mix(in srgb, var(--color-action) 8%, transparent);
        --color-accent-a12: color-mix(in srgb, var(--color-action) 12%, transparent);
        --color-accent-a14: color-mix(in srgb, var(--color-action) 14%, transparent);
        --color-accent-a18: color-mix(in srgb, var(--color-action) 18%, transparent);
        --color-accent-a22: color-mix(in srgb, var(--color-action) 22%, transparent);
        --color-danger: #ef4444;
        --color-danger-surface: color-mix(in srgb, var(--color-danger) 12%, transparent);
        --color-danger-pulse: color-mix(in srgb, var(--color-danger) 60%, transparent);
        --color-warning: #f59e0b;
        --color-warning-strong: #fbbf24;
        --color-warning-surface: color-mix(in srgb, var(--color-warning) 8%, transparent);
        --color-warning-surface-strong: color-mix(in srgb, var(--color-warning) 15%, transparent);
        --color-success: #2dd4bf;
        --color-success-surface: color-mix(in srgb, var(--color-success) 12%, transparent);
        --color-live-idle: #6b7785;
        --color-media-black: #000000;
        --color-on-dark: #ffffff;
        --color-scrim: rgba(0, 0, 0, 0.60);
        --color-scrim-55: rgba(0, 0, 0, 0.55);
        --color-scrim-soft: rgba(0, 0, 0, 0.45);
        --color-scrim-40: rgba(0, 0, 0, 0.40);
        --color-scrim-subtle: rgba(0, 0, 0, 0.35);
        --color-lightbox-scrim: rgba(4, 6, 9, 0.80);
        --color-ink-overlay: rgba(8, 10, 13, 0.70);
        --color-ink-divider: rgba(8, 10, 13, 0.90);
        --color-highlight-subtle: rgba(255, 255, 255, 0.03);
        --color-highlight-soft: rgba(255, 255, 255, 0.06);
        --color-highlight: rgba(255, 255, 255, 0.65);
        --color-watermark: rgba(255, 255, 255, 0.15);
        --color-watermark-glow: rgba(255, 255, 255, 0.10);
        --color-muted-hatch: rgba(120, 134, 156, 0.16);
        --color-action-spinner: color-mix(in srgb, var(--color-on-action) 40%, transparent);
        --shadow-raised: 0 8px 24px var(--color-scrim-soft);
        --shadow-floating: 0 12px 60px var(--color-scrim);
        --shadow-player: 0 -4px 20px var(--color-scrim-subtle);

        /* Feedback surfaces stay legible independently of the chosen palette. */
        --color-notice-warning-bg: #4a3b12;
        --color-notice-warning-text: #ffe7a3;
        --color-notice-warning-border: #caa53d;
        --color-notice-critical-bg: #4a1414;
        --color-notice-critical-text: #ffd7d7;
        --color-event-text: #dce6ff;

        /* Timeline categories: pattern and tone both carry meaning. */
        --timeline-music: #38404f;
        --timeline-music-alt: #64738f;
        --timeline-narration: #7d8a9d;
        --timeline-narration-dark: #414a58;
        --timeline-narration-alt: #96a2b5;
        --timeline-narration-alt-dark: #525d6e;
        --timeline-talk: #48538a;
        --timeline-talk-alt: #7180bd;
        --timeline-jingle: #74532f;
        --timeline-jingle-alt: #a57a49;
        --timeline-unknown: #2e3540;
        --timeline-unknown-alt: #4d5868;
        --timeline-gap: #4a5260;
        --timeline-gap-dark: #2b313b;
        --timeline-gap-alt: #5c6675;
        --timeline-gap-alt-dark: #373f4b;

        /* Third-party identities are deliberately not theme colours. */
        --brand-discord: #5865f2;
        --brand-slack: #a1315e;
        --brand-irc: #5c6773;
        --brand-twitch: #bf94ff;
        --brand-twitch-ink: #1f1147;
        --brand-youtube: #d33;
        --brand-app: #e0782f;
        --brand-ios: #8e8e93;
        --brand-android: #3ddc84;
        --brand-android-ink: #06251a;
        --brand-telegram: #6abfea;
        --brand-telegram-ink: #12303f;
        --brand-matrix: #1fb281;
        --brand-matrix-ink: #0d2b21;

        /* Compatibility aliases. New rules should use the semantic names above. */
        --bg: var(--color-canvas);
        --bg-elev: var(--color-surface-1);
        --bg-elev-2: var(--color-surface-2);
        --border-light: var(--color-border);
        --border-dark: var(--color-media-black);
        --text: var(--color-text);
        --text-dim: var(--color-text-muted);
        --button-primary: var(--color-action-soft);
        --accent: var(--color-link);
        --accent-strong: var(--color-action);
        --heading-col: var(--color-heading);
    }
}

@layer foundations {
    :focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: 3px;
    }

    ::selection {
        background: var(--color-action);
        color: var(--color-on-action);
    }

    /* Contextual flavour changes local emphasis without fragmenting the global theme. */
    [data-flavor="live"] { --context-accent: var(--color-danger); }
    [data-flavor="music"] { --context-accent: var(--color-link); }
    [data-flavor="community"] { --context-accent: var(--color-warning); }
    [data-flavor] { border-color: var(--context-accent); }

    .ds-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
    .ds-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }
    .ds-surface {
        background: var(--color-surface-1);
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--surface-padding, var(--space-4));
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 0ms;
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
    }
}