/* ================================
   Global color variables (pfSense style)
   ================================ */
:root {
    --accent: #4da3ff;
    --accent-rgb: 77, 163, 255;
    --accent-hover: #1f8bff;

    --bg-dark: #111;
    --bg-light: #f9f9f9;
    --bg-frame: #e8e8e8;

    --text-light: #e6e6e6;
    --text-dark: #222;

    --border-light: #ccc;
    --border-dark: #999;

    --shadow-soft: rgba(0, 0, 0, 0.12);
    --shadow-strong: rgba(0, 0, 0, 0.25);

    --icon-color: var(--accent);
    --icon-color-hover: var(--accent-hover);

    --bg-hover: rgba(0, 0, 0, 0.04);
    --bg-hover-accent: rgba(var(--accent-rgb), 0.08);

    --bg-selected: rgba(var(--accent-rgb), 0.12);
    --border-selected: rgba(var(--accent-rgb), 0.4);
}