/* Shared design tokens. Load before layout, page and component styles.
 * Media keeps its own dark surfaces in both themes for camera readability.
 * Semantic text and filled actions use separate colors to retain contrast.
 */
:root {
    color-scheme: light;
    --font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --font-size-xs: .75rem;
    --font-size-sm: .8125rem;
    --font-size-base: .875rem;
    --font-size-lg: 1rem;
    --font-size-title: 1.375rem;
    --line-height: 1.5;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --control-height: var(--touch-target);
    --touch-target: 44px;

    --ixi-brand: #2563eb;
    --ixi-brand-bright: #60a5fa;
    --ixi-brand-mid: #3b82f6;
    --ixi-brand-strong: #2563eb;
    --ixi-brand-deep: #1d4ed8;
    --ixi-brand-soft: #bfdbfe;
    --ixi-brand-softest: #eff6ff;
    --ixi-canvas: #f8f8f8;
    --ixi-canvas-cool: #eff6ff;
    --ixi-surface: #ffffff;
    --ixi-surface-tile: #f3f3f5;
    --ixi-divider: #e3e7e8;
    --ixi-text: #111111;
    --ixi-text-secondary: #5f6368;
    --ixi-text-muted: #62686c;
    --ixi-media: #111820;
    --ixi-media-raised: #1a232d;
    --on-media: #f4f8ff;
    --media-letterbox: #000;
    --media-text-secondary: #cbd5e1;

    /* Existing names remain aliases, so every page shares the same palette. */
    --bg-primary: var(--ixi-canvas);
    --bg-secondary: var(--ixi-surface);
    --bg-card: var(--ixi-surface);
    --bg-card-solid: var(--ixi-surface);
    --bg-tertiary: var(--ixi-surface-tile);
    --bg-hover: var(--ixi-brand-softest);
    --border: var(--ixi-divider);
    --border-solid: #c4cdd2;
    --border-control: #7a8893;
    --border-hover: #677681;
    --text-primary: var(--ixi-text);
    --text-secondary: var(--ixi-text-secondary);
    --text-muted: var(--ixi-text-muted);
    --accent: var(--ixi-brand-deep);
    --accent-hover: #1e40af;
    --accent-light: var(--ixi-brand-softest);
    --accent-rgb: 29, 78, 216;
    --primary: var(--accent);
    --primary-hover: var(--accent-hover);
    --primary-focused: var(--ixi-brand);
    --primary-glow: rgba(37, 99, 235, .22);
    --on-accent: #ffffff;
    --on-action: #ffffff;
    --purple-expresso: #663f93;
    --bluish-purple: #594c9d;
    --deep-blue: #0d71bc;
    --dark-blue: #073b63;
    --gradient-expresso: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
    --gradient-expresso-hover: linear-gradient(90deg, #1d4ed8 0%, #1e40af 100%);

    --success: #187443;
    --success-soft: #e6f4ed;
    --success-action: #187443;
    --success-action-hover: #125c35;
    --warning: #875600;
    --warning-soft: #fff0cf;
    --warning-action: #f5b942;
    --warning-action-hover: #e5a52d;
    --on-warning: #352309;
    --danger: #b83232;
    --danger-rgb: 184, 50, 50;
    --danger-soft: #fde7e7;
    --danger-hover: #982727;
    --danger-action: #b83232;
    --danger-action-hover: #982727;
    --info: #0d6596;
    --info-soft: #e0f2fe;
    --info-action: #0d5f8e;
    --info-action-hover: #094d75;
    --surface: var(--ixi-surface);
    --surface-2: var(--ixi-surface-tile);
    --card: var(--ixi-surface);
    --bg: var(--ixi-canvas);
    --text: var(--ixi-text);
    --text-main: var(--ixi-text);
    --glass-bg: var(--ixi-surface);
    --glass-border: var(--border);

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-control: 8px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --shadow: 0 8px 24px rgba(31, 50, 55, .08);
    --shadow-sm: 0 1px 2px rgba(31, 50, 55, .06);
    --shadow-raised: 0 12px 32px rgba(31, 50, 55, .16);
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, .24);
    --focus-color: var(--accent);
    --motion-fast: 120ms;
    --motion-control: 170ms;
    --motion-screen: 260ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-enter: cubic-bezier(.16, 1, .3, 1);
}

html.theme-dark {
    color-scheme: dark;
    --ixi-brand: #4da3ff;
    --ixi-brand-bright: #75b7ff;
    --ixi-brand-mid: #3997f0;
    --ixi-brand-strong: #2d8cff;
    --ixi-brand-deep: #75b7ff;
    --ixi-brand-soft: #183654;
    --ixi-brand-softest: #122a42;
    --ixi-canvas: #080f1a;
    --ixi-canvas-cool: #0d1726;
    --ixi-surface: #121d2b;
    --ixi-surface-tile: #192638;
    --ixi-divider: #2a3b52;
    --ixi-text: #f4f8ff;
    --ixi-text-secondary: #b6c4d8;
    --ixi-text-muted: #9aadc4;
    --ixi-media: #080d14;
    --ixi-media-raised: #121e2b;
    --bg-secondary: var(--ixi-canvas-cool);
    --bg-hover: #20344d;
    --border-solid: #354963;
    --border-control: #62788f;
    --border-hover: #90a3b9;
    --accent: var(--ixi-brand);
    --accent-hover: var(--ixi-brand-bright);
    --accent-rgb: 77, 163, 255;
    --primary-glow: rgba(77, 163, 255, .24);
    --on-accent: #071321;
    --gradient-expresso: linear-gradient(90deg, #246bce 0%, #1d4f9b 100%);
    --gradient-expresso-hover: linear-gradient(90deg, #2b72cf 0%, #2460ad 100%);
    --success: #78dba6;
    --success-soft: #15392b;
    --warning: #f4c36d;
    --warning-soft: #432f13;
    --danger: #ffaaaa;
    --danger-rgb: 255, 170, 170;
    --danger-soft: #452124;
    --danger-hover: #ffc5c5;
    --info: #8bd4ff;
    --info-soft: #15364a;
    --shadow: 0 14px 38px rgba(0, 0, 0, .32);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-raised: 0 12px 32px rgba(0, 0, 0, .4);
    --focus-ring: 0 0 0 3px rgba(77, 163, 255, .34);
}

@media (prefers-contrast: more) {
    :root {
        --ixi-divider: #7b898e;
        --ixi-text-secondary: #34393b;
        --ixi-text-muted: #4a5052;
        --border-solid: #677681;
        --border-control: #52616c;
    }
    html.theme-dark {
        --ixi-divider: #8ea0b8;
        --ixi-text-secondary: #e0e8f4;
        --ixi-text-muted: #c8d6e8;
        --border-solid: #8ea0b8;
        --border-control: #a5b6cc;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    :root {
        --motion-fast: .01ms;
        --motion-control: .01ms;
        --motion-screen: .01ms;
    }
}