/* ==========================================================
   OBS DESIGN SYSTEM
   LIGHT THEME
   ========================================================== */

:root {

    /* ======================================================
       BRAND COLORS
       ====================================================== */
    --obs-color-scheme: light;

    --obs-primary: #0284c7;

    --obs-primary-hover: #0369a1;

    --obs-primary-active: #075985;

    --obs-success: #16a34a;

    --obs-success-hover: #15803d;

    --obs-warning: #d97706;

    --obs-danger: #e11d48;

    --obs-danger-hover: #be123c;

    --obs-info: #0284c7;

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

    --obs-bg-page: #eef4f8;

    --obs-bg-page-secondary: #dbeaf2;

    --obs-bg-page-tertiary: #c9dfe9;

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

    --obs-surface-1: rgba(255, 255, 255, 0.92);

    --obs-surface-2: rgba(255, 255, 255, 0.72);

    --obs-surface-3: rgba(255, 255, 255, 0.55);

    --obs-surface-hover: rgba(2, 132, 199, 0.08);

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

    --obs-text-primary: rgba(15, 23, 42, 0.94);

    --obs-text-secondary: rgba(15, 23, 42, 0.72);

    --obs-text-muted: rgba(15, 23, 42, 0.60);

    --obs-text-disabled: rgba(15, 23, 42, 0.42);

    --obs-text-on-primary: #ffffff;

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

    --obs-input-bg: rgba(255, 255, 255, 0.72);

    --obs-input-bg-focus: rgba(255, 255, 255, 0.96);

    --obs-input-bg-disabled: rgba(226, 232, 240, 0.72);

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

    --obs-input-placeholder: rgba(15, 23, 42, 0.48);

    --obs-input-icon: rgba(15, 23, 42, 0.65);

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

    --obs-border-primary: rgba(15, 23, 42, 0.16);

    --obs-border-secondary: rgba(15, 23, 42, 0.10);

    --obs-border-hover: rgba(2, 132, 199, 0.42);

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

    --obs-button-primary-text: #ffffff;

    --obs-button-success-text: #ffffff;

    --obs-button-danger-text: #ffffff;

    --obs-button-spinner-track: rgba(255, 255, 255, 0.38);

    --obs-button-spinner-color: rgba(255, 255, 255, 0.96);

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

    --obs-success-surface: rgba(22, 163, 74, 0.08);

    --obs-success-border: rgba(22, 163, 74, 0.28);

    --obs-danger-surface: rgba(225, 29, 72, 0.08);

    --obs-danger-border: rgba(225, 29, 72, 0.28);

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

    --obs-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.12);

    --obs-shadow-md: 0 14px 34px rgba(15, 23, 42, 0.16);

    --obs-shadow-lg: 0 22px 70px rgba(15, 23, 42, 0.22);

    --obs-shadow-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.65);

    --obs-shadow-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.82);

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

    --obs-focus-ring: 0 0 0 5px rgba(2, 132, 199, 0.18);

    --obs-danger-focus-ring: 0 0 0 5px rgba(225, 29, 72, 0.16);

    --obs-success-focus-ring: 0 0 0 5px rgba(22, 163, 74, 0.16);

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

    --obs-glass-surface:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.88),
            rgba(255, 255, 255, 0.68)
        );

    --obs-brand-gradient:
        linear-gradient(
            135deg,
            rgba(2, 132, 199, 0.96),
            rgba(22, 163, 74, 0.94)
        );

    --obs-page-background:
        radial-gradient(
            1200px 650px at 18% 10%,
            rgba(14, 165, 233, 0.18),
            transparent 60%
        ),
        radial-gradient(
            900px 600px at 85% 18%,
            rgba(34, 197, 94, 0.12),
            transparent 60%
        ),
        radial-gradient(
            700px 450px at 50% 95%,
            rgba(244, 63, 94, 0.07),
            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(14, 165, 233, 0.15),
            transparent 60%
        ),
        radial-gradient(
            520px 420px at 80% 30%,
            rgba(34, 197, 94, 0.10),
            transparent 60%
        ),
        radial-gradient(
            520px 420px at 50% 85%,
            rgba(244, 63, 94, 0.06),
            transparent 60%
        );

    --obs-panel-glow:
        radial-gradient(
            650px 350px at 10% 10%,
            rgba(14, 165, 233, 0.13),
            transparent 55%
        ),
        radial-gradient(
            650px 350px at 90% 20%,
            rgba(34, 197, 94, 0.10),
            transparent 55%
        );

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

    --obs-shell-bg:
        linear-gradient(
            180deg,
            #eef4f8,
            #dbeaf2
        );

    --obs-content-bg:
        linear-gradient(
            180deg,
            #f8fbfd,
            #edf4f8
        );

    --obs-content-surface:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96),
            rgba(255,255,255,.90)
        );

    --obs-content-inner-border: inset 0 0 0 1px rgba(15,23,42,.06);

    --obs-content-shadow: 0 12px 32px rgba(15,23,42,.10);

    --obs-content-top-highlight: inset 0 1px 0 rgba(255,255,255,.75);

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

    --obs-busy-overlay: rgba(15, 23, 42, 0.22);

    --obs-busy-spinner-track: rgba(15, 23, 42, 0.22);

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

    --obs-divider-color: rgba(15, 23, 42, 0.14);

    --obs-progress-track: rgba(15, 23, 42, 0.10);

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

    --obs-popup-bg: rgba(255, 255, 255, 0.97);
    --obs-popup-border: rgba(15, 23, 42, 0.16);
    --obs-popup-shadow: 0 22px 60px rgba(15, 23, 42, 0.20);

    /* ======================================================
       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-control-text: #172033;
    --obs-control-placeholder: #7a8598;
    --obs-control-bg: #ffffff;
    --obs-control-bg-focus: #ffffff;
    --obs-control-border: #cfd7e3;
    --obs-control-border-hover: #7cb7d8;
    --obs-control-border-focus: #2698d4;
    --obs-control-focus-ring: 0 0 0 5px rgba(38, 152, 212, 0.16);
    --obs-control-disabled-text: #8a94a4;
    --obs-control-disabled-bg: #f1f4f8;
    --obs-control-disabled-border: #d9e0e9;

    --obs-table-bg: #ffffff;
    --obs-table-container-bg: #ffffff;
    --obs-table-container-border: #d8e0ea;
    --obs-table-container-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    --obs-table-border: #e2e8f0;
    --obs-table-header-bg: linear-gradient(180deg, #eaf4fb, #dbeaf5);
    --obs-table-header-text: #17324a;
    --obs-table-cell-bg: #ffffff;
    --obs-table-cell-text: #334155;
    --obs-table-row-hover-bg: #e8f5fc;
    --obs-table-row-hover-text: #132f46;
    --obs-table-footer-bg: #f7fafc;
    --obs-table-footer-text: #475569;

    --obs-scrollbar-track: #eef2f6;
    --obs-scrollbar-thumb: #8ec5df;
    --obs-scrollbar-thumb-hover: #58a9cf;

    --obs-error-panel-text: #8a1c32;
    --obs-error-panel-bg: #fff0f3;
    --obs-error-panel-border: #f2a7b6;
    
    --obs-success-panel-text: #166534;
--obs-success-panel-bg: #f0fdf4;
--obs-success-panel-border: #86efac;

--obs-warning-panel-text: #92400e;
--obs-warning-panel-bg: #fffbeb;
--obs-warning-panel-border: #fcd34d;

--obs-info-panel-text: #1d4ed8;
--obs-info-panel-bg: #eff6ff;
--obs-info-panel-border: #93c5fd;

    /* ======================================================
       LABEL / TYPOGRAPHY COMPONENT
       ====================================================== */

    --obs-label-text: var(--obs-text-secondary);

    --obs-label-box-text: var(--obs-text-primary);
    --obs-label-box-bg: var(--obs-surface-2);
    --obs-label-box-border: var(--obs-border-primary);

    --obs-title-text: var(--obs-text-primary);
    --obs-subtitle-text: var(--obs-text-secondary);

    --obs-helper-text: var(--obs-text-muted);
    --obs-required-text: var(--obs-danger);
    --obs-muted-text: var(--obs-text-muted);
    
   
--obs-table-row-selected-bg: rgba(14,165,233,.15);
--obs-table-row-active-bg: rgba(14,165,233,.10);





--obs-badge-text: #ffffff;
--obs-badge-primary-bg: #0284c7;
--obs-badge-primary-shadow: 0 0 0 2px rgba(2,132,199,.18);


}