/* =========================================================
   RAZ CLOUD THEME ENGINE v1
   Visual tokens only.
   IMPORTANT: Never controls sidebar geometry.
   ========================================================= */

:root {

    --raz-primary: #2c7be5;
    --raz-primary-rgb: 44,123,229;

    --raz-accent: #00d27a;
    --raz-accent-rgb: 0,210,122;

    --raz-info: #27bcfd;
    --raz-warning: #f5803e;
    --raz-danger: #e63757;

    --raz-bg: #0b1727;
    --raz-surface: #121e2d;
    --raz-surface-2: #172638;
    --raz-surface-3: #232e3c;

    --raz-text: #edf2f9;
    --raz-muted: #9da9bb;
    --raz-muted-2: #748194;

    --raz-border: rgba(255,255,255,.075);

    --raz-radius: 6px;

    --raz-font:
        "Poppins",
        "Segoe UI",
        Arial,
        sans-serif;

    --raz-shadow:
        0 1px 2px rgba(0,0,0,.35);

    --raz-card-opacity: 1;

    --raz-transition: .18s;
}


/* =========================================================
   LIGHT
   ========================================================= */

html[data-raz-theme="light"] {

    --raz-bg: #edf2f9;

    --raz-surface: #ffffff;
    --raz-surface-2: #f9fafd;
    --raz-surface-3: #edf2f9;

    --raz-text: #344050;
    --raz-muted: #5e6e82;
    --raz-muted-2: #748194;

    --raz-border: #d8e2ef;

    --raz-shadow:
        0 7px 14px rgba(65,69,88,.08),
        0 3px 6px rgba(0,0,0,.05);
}


/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {

    background:
        var(--raz-bg) !important;

    color:
        var(--raz-text);

    font-family:
        var(--raz-font);

    transition:
        background var(--raz-transition),
        color var(--raz-transition);
}


body,
button,
input,
select,
textarea {

    font-family:
        var(--raz-font);
}


.main {

    background:
        var(--raz-bg) !important;
}


/* =========================================================
   COMPATIBILITY TOKENS
   Existing RAZ pages
   ========================================================= */

:root {

    --src-bg:
        var(--raz-bg);

    --src-card:
        var(--raz-surface);

    --src-card-2:
        var(--raz-surface-2);

    --src-border:
        var(--raz-border);

    --src-border-strong:
        var(--raz-border);

    --src-text:
        var(--raz-text);

    --src-muted:
        var(--raz-muted);

    --src-muted-2:
        var(--raz-muted-2);

    --src-primary:
        var(--raz-primary);

    --src-success:
        var(--raz-accent);

    --src-info:
        var(--raz-info);

    --src-warning:
        var(--raz-warning);

    --src-danger:
        var(--raz-danger);

    --src-radius:
        var(--raz-radius);

    --src-shadow:
        var(--raz-shadow);

    --accent:
        var(--raz-primary);

    --good:
        var(--raz-accent);

    --warning:
        var(--raz-warning);

    --danger:
        var(--raz-danger);

    --text:
        var(--raz-text);

    --muted:
        var(--raz-muted);

    --surface:
        var(--raz-surface);

    --border:
        var(--raz-border);
}


/* =========================================================
   CARDS
   ========================================================= */

.source-card,
.ops-card,
.dashboard-stat,
.system-summary article,
.network-summary article,
.diag-item,
.quick-action {

    border-color:
        var(--raz-border) !important;

    border-radius:
        var(--raz-radius) !important;

    background:
        var(--raz-surface) !important;

    box-shadow:
        var(--raz-shadow);

    transition:
        background var(--raz-transition),
        border-color var(--raz-transition);
}


/* =========================================================
   FORMS
   ========================================================= */

input,
select,
textarea {

    border-color:
        var(--raz-border) !important;

    border-radius:
        var(--raz-radius) !important;

    background:
        var(--raz-surface-2) !important;

    color:
        var(--raz-text) !important;
}


input:focus,
select:focus,
textarea:focus {

    border-color:
        var(--raz-primary) !important;

    box-shadow:
        0 0 0 3px
        rgba(
            var(--raz-primary-rgb),
            .12
        ) !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.source-btn.primary,
.ops-button.primary,
button.primary {

    background:
        var(--raz-primary) !important;

    border-color:
        var(--raz-primary) !important;

    color:
        white !important;
}


/* =========================================================
   TABLE
   ========================================================= */

.source-table th,
.ops-table th {

    background:
        var(--raz-surface-2) !important;

    border-color:
        var(--raz-border) !important;
}


.source-table td,
.ops-table td {

    border-color:
        var(--raz-border) !important;
}


/* =========================================================
   CARD STYLES
   ========================================================= */

html[data-raz-card="flat"]
.source-card,

html[data-raz-card="flat"]
.ops-card {

    box-shadow:
        none !important;
}


html[data-raz-card="soft"]
.source-card,

html[data-raz-card="soft"]
.ops-card {

    box-shadow:
        var(--raz-shadow) !important;
}


html[data-raz-card="glass"]
.source-card,

html[data-raz-card="glass"]
.ops-card {

    background:
        color-mix(
            in srgb,
            var(--raz-surface)
            72%,
            transparent
        ) !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


html[data-raz-card="minimal"]
.source-card,

html[data-raz-card="minimal"]
.ops-card {

    background:
        transparent !important;

    box-shadow:
        none !important;
}


html[data-raz-card="cyber"]
.source-card,

html[data-raz-card="cyber"]
.ops-card {

    box-shadow:
        0 0 0 1px
        rgba(
            var(--raz-primary-rgb),
            .20
        ),
        0 0 22px
        rgba(
            var(--raz-primary-rgb),
            .06) !important;
}