/* ─────────────────────────────────────────────────────────────
 * Color & token vars (Phase 65 → 66)
 *
 * Status colors are FROZEN — same as iot.test (see memory:
 * feedback_iot_ui_design_rules). Two themes share these tokens:
 *
 *   • LIGHT theme — login page + any public-facing page.
 *   • DARK theme  — admin dashboard (matches reference screenshot 2).
 * ─────────────────────────────────────────────────────────── */
:root {
    /* ── Status palette (frozen, theme-independent) ── */
    --color-ok:        #87C253;
    --color-warn:      #FBC217;
    --color-danger:    #FB1717;
    --color-disabled:  #B4B8C0;
    --color-info:      #2196f3;

    /* ── Light-theme neutrals ── */
    --bg-page:         #f3f5f9;
    --bg-card:         #ffffff;
    --text-1:          #1d2532;
    --text-2:          #5d6878;
    --border-1:        #e6e9ef;

    /* ── Effects ── */
    --shadow-1:        0 1px 2px rgba(20, 30, 50, 0.04),
                       0 8px 24px rgba(20, 30, 50, 0.06);
    --shadow-2:        0 24px 60px rgba(20, 30, 50, 0.18);

    /* ── Radius ── */
    --radius-1:        8px;
    --radius-2:        14px;
    --radius-3:        20px;

    /* ── Spacing scale ── */
    --space-1:         4px;
    --space-2:         8px;
    --space-3:         16px;
    --space-4:         24px;
    --space-5:         32px;
    --space-6:         48px;

    /* ── Login-page brand gradient ── */
    --grad-signin:     linear-gradient(135deg, #6fc44b 0%, #2d8c50 100%);

    /* ── DARK theme (Phase 66 — admin dashboard) ──────────────────
     * Phase 65 follow-up — dark is the default; tokens repeat under
     * the `[data-theme="dark"]` selector below so future pages can
     * scope the theme by setting the attribute on a subtree without
     * touching the rest of the doc. A `[data-theme="light"]` block
     * stub sits below ready to override these.
     */
    --bg-dark:         #0d1b2a;
    --bg-dark-2:       #0a1422;        /* sidebar, slightly darker than page */
    --bg-dark-card:    #15263b;
    --bg-dark-elev:    #1d2f47;        /* hover / active rows */
    --text-on-dark-1:  #e8edf3;
    --text-on-dark-2:  #8a98ac;
    --text-on-dark-3:  #5a6a82;        /* deepest muted (section headers) */
    --border-dark:     rgba(255,255,255,0.06);

    /* ── Stat-card gradients (4 vibrant hues, recycle for 10 cards) ── */
    --grad-blue:       linear-gradient(135deg, #2f6fd6 0%, #1f4f9f 100%);
    --grad-green:      linear-gradient(135deg, #45c272 0%, #21934f 100%);
    --grad-orange:     linear-gradient(135deg, #f59e2d 0%, #c97812 100%);
    --grad-red:        linear-gradient(135deg, #f25555 0%, #c52727 100%);
}

/* ─────────────────────────────────────────────────────────────
 * data-theme="dark" — explicit selector form (Phase 65 follow-up).
 *
 * The defaults under :root above already paint dark, but this block
 * lets a subtree opt into the same theme by setting the attribute,
 * which is the standard pattern for theme switchers + per-section
 * overrides. The values are identical to the defaults — kept in
 * sync if either changes.
 * ─────────────────────────────────────────────────────────── */
:root[data-theme="dark"], [data-theme="dark"] {
    --bg-dark:         #0d1b2a;
    --bg-dark-2:       #0a1422;
    --bg-dark-card:    #15263b;
    --bg-dark-elev:    #1d2f47;
    --text-on-dark-1:  #e8edf3;
    --text-on-dark-2:  #8a98ac;
    --text-on-dark-3:  #5a6a82;
    --border-dark:     rgba(255,255,255,0.06);
}

/* ─────────────────────────────────────────────────────────────
 * data-theme="light" — opt-in light override.
 *
 * Re-maps the dark-side tokens to light-friendly values so existing
 * components that read `var(--bg-dark)` / `var(--text-on-dark-1)`
 * keep working on a light page without rewriting their classes.
 * Switch a subtree with `<div data-theme="light">…</div>`.
 * ─────────────────────────────────────────────────────────── */
:root[data-theme="light"], [data-theme="light"] {
    --bg-dark:         #f3f5f9;
    --bg-dark-2:       #ffffff;
    --bg-dark-card:    #ffffff;
    --bg-dark-elev:    #eef1f6;
    --text-on-dark-1:  #1d2532;
    --text-on-dark-2:  #5d6878;
    --text-on-dark-3:  #8a98ac;
    --border-dark:     rgba(20,30,50,0.10);
}