/* ==========================================================
   OBS DESIGN SYSTEM
   BLUE THEME
   ========================================================== */

:root {

    /* ======================================================
       BRAND COLORS
       ====================================================== */

    --obs-primary: #38bdf8;

    --obs-primary-hover: #7dd3fc;

    --obs-primary-active: #0ea5e9;

    --obs-success: #22c55e;

    --obs-success-hover: #4ade80;

    --obs-warning: #f59e0b;

    --obs-danger: #fb7185;

    --obs-danger-hover: #fda4af;

    --obs-info: #38bdf8;

    /* ======================================================
       BACKGROUND
       ====================================================== */

    --obs-bg-page: #04121f;

    --obs-bg-page-secondary: #062c46;

    --obs-bg-page-tertiary: #0a3b5e;

    /* ======================================================
       SURFACE
       ====================================================== */

    --obs-surface-1: rgba(125, 211, 252, 0.12);

    --obs-surface-2: rgba(125, 211, 252, 0.07);

    --obs-surface-3: rgba(125, 211, 252, 0.04);

    --obs-surface-hover: rgba(56, 189, 248, 0.12);

    /* ======================================================
       TEXT
       ====================================================== */

    --obs-text-primary: rgba(240, 249, 255, 0.96);

    --obs-text-secondary: rgba(224, 242, 254, 0.76);

    --obs-text-muted: rgba(186, 230, 253, 0.62);

    --obs-text-disabled: rgba(186, 230, 253, 0.40);

    --obs-text-on-primary: #03131e;

    /* ======================================================
       INPUT
       ====================================================== */

    --obs-input-bg: rgba(3, 20, 35, 0.48);

    --obs-input-bg-focus: rgba(3, 20, 35, 0.68);

    --obs-input-bg-disabled: rgba(3, 20, 35, 0.30);

    --obs-input-text: var(--obs-text-primary);

    --obs-input-placeholder: rgba(186, 230, 253, 0.52);

    --obs-input-icon: rgba(186, 230, 253, 0.82);

    /* ======================================================
       BORDER
       ====================================================== */

    --obs-border-primary: rgba(125, 211, 252, 0.22);

    --obs-border-secondary: rgba(125, 211, 252, 0.12);

    --obs-border-hover: rgba(56, 189, 248, 0.58);

    /* ======================================================
       BUTTON
       ====================================================== */

    --obs-button-primary-text: #03131e;

    --obs-button-success-text: #03170b;

    --obs-button-danger-text: #29050b;

    --obs-button-spinner-track: rgba(3, 19, 30, 0.35);

    --obs-button-spinner-color: rgba(3, 19, 30, 0.95);

    /* ======================================================
       STATUS SURFACES
       ====================================================== */

    --obs-success-surface: rgba(34, 197, 94, 0.10);

    --obs-success-border: rgba(34, 197, 94, 0.35);

    --obs-danger-surface: rgba(251, 113, 133, 0.11);

    --obs-danger-border: rgba(251, 113, 133, 0.36);

    /* ======================================================
       SHADOW
       ====================================================== */

    --obs-shadow-sm: 0 4px 12px rgba(0, 8, 18, 0.28);

    --obs-shadow-md: 0 14px 34px rgba(0, 8, 18, 0.42);

    --obs-shadow-lg: 0 22px 70px rgba(0, 8, 18, 0.62);

    --obs-shadow-inset-soft: inset 0 1px 0 rgba(224, 242, 254, 0.12);

    --obs-shadow-inset-strong: inset 0 1px 0 rgba(224, 242, 254, 0.30);

    /* ======================================================
       FOCUS
       ====================================================== */

    --obs-focus-ring: 0 0 0 5px rgba(56, 189, 248, 0.22);

    --obs-danger-focus-ring: 0 0 0 5px rgba(251, 113, 133, 0.18);

    --obs-success-focus-ring: 0 0 0 5px rgba(34, 197, 94, 0.18);

    /* ======================================================
       GLASS / EFFECT
       ====================================================== */

    --obs-glass-surface:
        linear-gradient(
            180deg,
            rgba(125, 211, 252, 0.13),
            rgba(14, 165, 233, 0.07)
        );

    --obs-brand-gradient:
        linear-gradient(
            135deg,
            rgba(56, 189, 248, 0.98),
            rgba(34, 211, 238, 0.94)
        );

    --obs-page-background:
        radial-gradient(
            1200px 650px at 18% 10%,
            rgba(56, 189, 248, 0.30),
            transparent 60%
        ),
        radial-gradient(
            900px 600px at 85% 18%,
            rgba(14, 165, 233, 0.22),
            transparent 60%
        ),
        radial-gradient(
            700px 450px at 50% 95%,
            rgba(34, 211, 238, 0.12),
            transparent 60%
        ),
        linear-gradient(
            160deg,
            var(--obs-bg-page),
            var(--obs-bg-page-secondary)
        );

    --obs-page-glow:
        radial-gradient(
            520px 420px at 20% 20%,
            rgba(56, 189, 248, 0.24),
            transparent 60%
        ),
        radial-gradient(
            520px 420px at 80% 30%,
            rgba(14, 165, 233, 0.20),
            transparent 60%
        ),
        radial-gradient(
            520px 420px at 50% 85%,
            rgba(34, 211, 238, 0.12),
            transparent 60%
        );

    --obs-panel-glow:
        radial-gradient(
            650px 350px at 10% 10%,
            rgba(56, 189, 248, 0.26),
            transparent 55%
        ),
        radial-gradient(
            650px 350px at 90% 20%,
            rgba(34, 211, 238, 0.18),
            transparent 55%
        );

    /* ======================================================
       APPLICATION SHELL
       ====================================================== */

    --obs-shell-bg:
        radial-gradient(
            1200px 600px at 35% 0%,
            rgba(56,189,248,.22),
            transparent 65%
        ),
        radial-gradient(
            900px 500px at 85% 25%,
            rgba(14,165,233,.18),
            transparent 60%
        ),
        linear-gradient(
            180deg,
            #04121f 0%,
            #061b2d 100%
        );

    --obs-content-bg:
        radial-gradient(
            1200px 520px at top center,
            rgba(56,189,248,.16),
            transparent 60%
        ),
        linear-gradient(
            180deg,
            #08223b 0%,
            #0a2946 45%,
            #071e35 100%
        );

    --obs-content-surface:
        radial-gradient(
            circle at 20% 15%,
            rgba(56,189,248,.22),
            transparent 55%
        ),
        radial-gradient(
            circle at 80% 30%,
            rgba(34,211,238,.16),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            #0b2945 0%,
            #081f35 100%
        );

    --obs-content-inner-border: inset 0 0 0 1px rgba(125,211,252,.08);

    --obs-content-shadow: 0 20px 50px rgba(0,10,20,.55);

    --obs-content-top-highlight: inset 0 1px 0 rgba(125,211,252,.06);

    /* ======================================================
       BUSY OVERLAY
       ====================================================== */

    --obs-busy-overlay: rgba(0, 0, 0, 0.35);

    --obs-busy-spinner-track: rgba(255, 255, 255, 0.25);

    /* ======================================================
       DIVIDER / PROGRESS
       ====================================================== */

    --obs-divider-color: rgba(125, 211, 252, 0.16);

    --obs-progress-track: rgba(125, 211, 252, 0.10);

    /* ======================================================
       POPUP / DROPDOWN
       ====================================================== */

    --obs-popup-bg: rgba(15, 48, 76, 0.96);
    --obs-popup-border: rgba(125, 211, 252, 0.24);
    --obs-popup-shadow: 0 22px 70px rgba(0, 8, 18, 0.60);

    /* ======================================================
       THEME PREVIEWS
       ====================================================== */

    --obs-theme-preview-dark-1: #070b14;
    --obs-theme-preview-dark-2: #38bdf8;

    --obs-theme-preview-light-1: #ffffff;
    --obs-theme-preview-light-2: #0284c7;

    --obs-theme-preview-blue-1: #04121f;
    --obs-theme-preview-blue-2: #38bdf8;

    --obs-theme-preview-green-1: #03140f;
    --obs-theme-preview-green-2: #34d399;


--obs-color-scheme: dark;

    --obs-control-text: #edf7ff;
    --obs-control-placeholder: rgba(237, 247, 255, 0.55);
    --obs-control-bg: rgba(7, 30, 55, 0.58);
    --obs-control-bg-focus: rgba(7, 30, 55, 0.78);
    --obs-control-border: rgba(130, 202, 255, 0.24);
    --obs-control-border-hover: rgba(82, 182, 255, 0.58);
    --obs-control-border-focus: rgba(82, 182, 255, 0.82);
    --obs-control-focus-ring: 0 0 0 5px rgba(82, 182, 255, 0.20);
    --obs-control-disabled-text: rgba(237, 247, 255, 0.42);
    --obs-control-disabled-bg: rgba(255, 255, 255, 0.05);
    --obs-control-disabled-border: rgba(130, 202, 255, 0.14);

    --obs-table-bg: transparent;
    --obs-table-container-bg: rgba(17, 58, 91, 0.35);
    --obs-table-container-border: rgba(130, 202, 255, 0.20);
    --obs-table-container-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --obs-table-border: rgba(130, 202, 255, 0.12);
    --obs-table-header-bg: linear-gradient(180deg, #245f8f, #17456c);
    --obs-table-header-text: #f4fbff;
    --obs-table-cell-bg: rgba(255, 255, 255, 0.045);
    --obs-table-cell-text: rgba(237, 247, 255, 0.82);
    --obs-table-row-hover-bg: rgba(82, 182, 255, 0.18);
    --obs-table-row-hover-text: #ffffff;
    --obs-table-footer-bg: rgba(255, 255, 255, 0.045);
    --obs-table-footer-text: rgba(237, 247, 255, 0.82);

    --obs-scrollbar-track: rgba(255, 255, 255, 0.07);
    --obs-scrollbar-thumb: rgba(82, 182, 255, 0.72);
    --obs-scrollbar-thumb-hover: rgba(82, 182, 255, 0.92);

    --obs-error-panel-text: #ffffff;
    --obs-error-panel-bg: rgba(255, 105, 135, 0.12);
    --obs-error-panel-border: rgba(255, 105, 135, 0.40);

}