/*
 * Blue semantic color system
 * --------------------------------
 * Change this file to recolor the complete Blue website. Component CSS
 * must consume these tokens instead of introducing page-specific colors.
 */

:root {
    --pb-preview-light-bg: #f4f7fb;
    --pb-preview-light-text: #10233f;
    --pb-preview-light-glow: #246bfd;
    --pb-preview-dark-bg: #07101f;
    --pb-preview-dark-text: #f3f7ff;
    --pb-preview-dark-glow: #2f7cff;
    --pb-preview-primary: #246bfd;
    --pb-preview-primary-deep: #0b4edb;
    --pb-preview-shadow: rgba(25, 75, 160, 0.12);
    --pb-preview-button-shadow: rgba(36, 107, 253, 0.24);
}

html[data-site-theme="blue"][data-theme-mode="light"] {
    color-scheme: light;

    --pb-canvas: #f4f7fb;
    --pb-canvas-elevated: #edf3f9;
    --pb-surface: #ffffff;
    --pb-surface-soft: #f8fafc;
    --pb-surface-muted: #edf4ff;
    --pb-surface-raised: #ffffff;
    --pb-nav: rgba(255, 255, 255, 0.92);
    --pb-sidebar: rgba(255, 255, 255, 0.88);
    --pb-input: #ffffff;
    --pb-input-focus: #ffffff;
    --pb-overlay: rgba(7, 20, 40, 0.58);

    --pb-heading: #10233f;
    --pb-text: #243a57;
    --pb-muted: #60738c;
    --pb-subtle: #8a9aae;
    --pb-on-primary: #ffffff;
    --pb-on-dark: #f5f8ff;

    --pb-primary: #246bfd;
    --pb-primary-hover: #1759dc;
    --pb-primary-active: #0c48c4;
    --pb-primary-soft: #e8f0ff;
    --pb-accent: #00a6df;
    --pb-accent-soft: #e3f8ff;
    --pb-positive: #0b9567;
    --pb-positive-soft: #e5f8f0;
    --pb-warning: #ca7d00;
    --pb-warning-soft: #fff5d9;
    --pb-danger: #dc3d52;
    --pb-danger-soft: #ffedf0;

    --pb-border: #dce6f1;
    --pb-border-strong: #c6d5e7;
    --pb-divider: #e8eef5;
    --pb-focus: #246bfd;

    --pb-topbar: #0b2141;
    --pb-topbar-text: #e5efff;
    --pb-topbar-control: rgba(255, 255, 255, 0.1);
    --pb-topbar-control-hover: rgba(255, 255, 255, 0.17);
    --pb-topbar-border: rgba(255, 255, 255, 0.14);

    --pb-hero-start: #fafdff;
    --pb-hero-end: #eaf2ff;
    --pb-hero-glow: rgba(36, 107, 253, 0.15);
    --pb-chart-grid: rgba(36, 107, 253, 0.12);
    --pb-chart-line: #246bfd;

    --pb-band: #0a2244;
    --pb-band-raised: rgba(255, 255, 255, 0.08);
    --pb-band-border: rgba(255, 255, 255, 0.14);
    --pb-band-text: #f4f8ff;
    --pb-band-muted: #b8c9e1;

    --pb-footer: #07162c;
    --pb-footer-raised: rgba(255, 255, 255, 0.065);
    --pb-footer-border: rgba(255, 255, 255, 0.12);
    --pb-footer-text: #edf4ff;
    --pb-footer-muted: #a9bbd2;

    --pb-primary-rgb: 36, 107, 253;
    --pb-accent-rgb: 0, 166, 223;
    --pb-positive-rgb: 11, 149, 103;
    --pb-warning-rgb: 202, 125, 0;
    --pb-danger-rgb: 220, 61, 82;
    --pb-shadow-rgb: 17, 43, 78;

    --pb-shadow-xs: 0 1px 2px rgba(17, 43, 78, 0.05);
    --pb-shadow-sm: 0 6px 18px rgba(17, 43, 78, 0.07);
    --pb-shadow-md: 0 14px 34px rgba(17, 43, 78, 0.1);
    --pb-shadow-lg: 0 28px 70px rgba(17, 43, 78, 0.14);
    --pb-ring: 0 0 0 4px rgba(36, 107, 253, 0.14);

    --pb-gradient-brand: linear-gradient(135deg, #246bfd 0%, #0754d8 100%);
    --pb-gradient-hero: linear-gradient(135deg, #fafdff 0%, #eaf2ff 100%);
    --pb-gradient-positive: linear-gradient(135deg, #0da876 0%, #07815b 100%);
    --pb-gradient-danger: linear-gradient(135deg, #ed5266 0%, #c62e45 100%);
}

html[data-site-theme="blue"][data-theme-mode="dark"] {
    color-scheme: dark;

    --pb-canvas: #07101f;
    --pb-canvas-elevated: #0a1526;
    --pb-surface: #0e1b2d;
    --pb-surface-soft: #101f33;
    --pb-surface-muted: #122945;
    --pb-surface-raised: #14243a;
    --pb-nav: rgba(7, 16, 31, 0.92);
    --pb-sidebar: rgba(12, 26, 44, 0.9);
    --pb-input: #0a1728;
    --pb-input-focus: #0d1d31;
    --pb-overlay: rgba(1, 6, 15, 0.76);

    --pb-heading: #f3f7ff;
    --pb-text: #d8e3f3;
    --pb-muted: #99adc5;
    --pb-subtle: #6e849e;
    --pb-on-primary: #ffffff;
    --pb-on-dark: #f5f8ff;

    --pb-primary: #4f8cff;
    --pb-primary-hover: #70a3ff;
    --pb-primary-active: #3478f6;
    --pb-primary-soft: rgba(79, 140, 255, 0.14);
    --pb-accent: #29c2f1;
    --pb-accent-soft: rgba(41, 194, 241, 0.12);
    --pb-positive: #38c995;
    --pb-positive-soft: rgba(56, 201, 149, 0.12);
    --pb-warning: #f1b84b;
    --pb-warning-soft: rgba(241, 184, 75, 0.13);
    --pb-danger: #ff6b7d;
    --pb-danger-soft: rgba(255, 107, 125, 0.13);

    --pb-border: #203753;
    --pb-border-strong: #315174;
    --pb-divider: #192d47;
    --pb-focus: #70a3ff;

    --pb-topbar: #030a15;
    --pb-topbar-text: #dce9fa;
    --pb-topbar-control: rgba(255, 255, 255, 0.075);
    --pb-topbar-control-hover: rgba(255, 255, 255, 0.13);
    --pb-topbar-border: rgba(255, 255, 255, 0.1);

    --pb-hero-start: #0d1b2f;
    --pb-hero-end: #0a203c;
    --pb-hero-glow: rgba(79, 140, 255, 0.2);
    --pb-chart-grid: rgba(112, 163, 255, 0.15);
    --pb-chart-line: #70a3ff;

    --pb-band: #061426;
    --pb-band-raised: rgba(255, 255, 255, 0.055);
    --pb-band-border: rgba(255, 255, 255, 0.11);
    --pb-band-text: #f3f7ff;
    --pb-band-muted: #a7bbd3;

    --pb-footer: #030914;
    --pb-footer-raised: rgba(255, 255, 255, 0.05);
    --pb-footer-border: rgba(255, 255, 255, 0.1);
    --pb-footer-text: #edf4ff;
    --pb-footer-muted: #91a6c0;

    --pb-primary-rgb: 79, 140, 255;
    --pb-accent-rgb: 41, 194, 241;
    --pb-positive-rgb: 56, 201, 149;
    --pb-warning-rgb: 241, 184, 75;
    --pb-danger-rgb: 255, 107, 125;
    --pb-shadow-rgb: 0, 4, 12;

    --pb-shadow-xs: 0 1px 2px rgba(0, 4, 12, 0.22);
    --pb-shadow-sm: 0 7px 20px rgba(0, 4, 12, 0.24);
    --pb-shadow-md: 0 16px 38px rgba(0, 4, 12, 0.3);
    --pb-shadow-lg: 0 30px 76px rgba(0, 4, 12, 0.38);
    --pb-ring: 0 0 0 4px rgba(79, 140, 255, 0.17);

    --pb-gradient-brand: linear-gradient(135deg, #4f8cff 0%, #246bfd 100%);
    --pb-gradient-hero: linear-gradient(135deg, #0d1b2f 0%, #0a203c 100%);
    --pb-gradient-positive: linear-gradient(135deg, #38c995 0%, #12986c 100%);
    --pb-gradient-danger: linear-gradient(135deg, #ff6b7d 0%, #d63d55 100%);
}

/* Compatibility aliases used by existing shared components and settings UI. */
html[data-site-theme="blue"] {
    --site-bg: var(--pb-canvas);
    --site-bg-alt: var(--pb-canvas-elevated);
    --site-surface: var(--pb-surface);
    --site-surface-strong: var(--pb-surface-raised);
    --site-nav: var(--pb-nav);
    --site-topbar: var(--pb-topbar);
    --site-footer: var(--pb-footer);
    --site-text: var(--pb-heading);
    --site-muted: var(--pb-muted);
    --site-primary: var(--pb-primary);
    --site-primary-hover: var(--pb-primary-hover);
    --site-accent: var(--pb-accent);
    --site-primary-rgb: var(--pb-primary-rgb);
    --site-accent-rgb: var(--pb-accent-rgb);
    --site-border: var(--pb-border);
    --site-border-strong: var(--pb-border-strong);
    --site-shadow: var(--pb-shadow-md);
}