:root {

    /* =========================================================
       PLATFORM BRAND / UI ACCENT

       IMPORTANT:
       Variable names are retained for backward compatibility.

       Despite the legacy "--brand-green" naming, these tokens
       now represent the platform's neutral UI accent colour.

       Use for:
       - primary buttons
       - active controls
       - selected tabs
       - navigation states
       - focus states
       - general interface emphasis

       Do NOT use these tokens to represent JLP electoral data.

       Party colours remain:
       --party-jlp
       --party-pnp

       TODO:
       Rename these variables in a future controlled refactor.
       ========================================================= */

    --brand-green: #3567d4;
    --brand-green-hover: #2855bd;
    --brand-green-soft: #edf2ff;


    /* =========================================================
       DASHBOARD UI ACCENT

       These inherit from the neutral platform accent.

       Dashboard controls should use these variables instead of
       party colours or hard-coded green values.

       Because these are defined in :root, they work in both
       light and dark mode.
       ========================================================= */

    --dashboard-accent: var(--brand-green);
    --dashboard-accent-hover: var(--brand-green-hover);
    --dashboard-accent-soft: var(--brand-green-soft);


    /* =========================================================
       ELECTORAL PARTY COLOURS
       ========================================================= */

    --party-jlp: #0a9b5b;
    --party-pnp: #ff6a1a;


    /* =========================================================
       BASE
       ========================================================= */

    --page-bg: #f5f7fa;

    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-muted: #eef2f6;


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

    --text-primary: #122033;
    --text-secondary: #4f6072;
    --text-muted: #7b8998;
    --text-inverse: #ffffff;


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

    --border: #dce3ea;
    --border-strong: #c8d2dc;


    /* =========================================================
       SIDEBAR

       Sidebar active state is a neutral UI selection colour.
       It must not use the JLP party colour.
       ========================================================= */

    --sidebar-bg: #082433;
    --sidebar-bg-deep: #061d2a;

    --sidebar-text: #d9e6ed;
    --sidebar-muted: #91a6b2;

    /* Compatibility alias used by existing sidebar CSS */
    --sidebar-text-muted: var(--sidebar-muted);

    --sidebar-active: var(--dashboard-accent);


    /* =========================================================
       STATES

       Success remains green because it represents application
       status, not electoral party identity.

       Party data should always use:
       --party-jlp
       --party-pnp
       ========================================================= */

    --success: #0a9b5b;
    --warning: #c78a17;
    --danger: #d84d4d;
    --info: #2f6edb;


    /* =========================================================
       RADIUS
       ========================================================= */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-pill: 999px;


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

    --shadow-sm:
        0 2px 8px
        rgba(
            15,
            23,
            42,
            0.06
        );

    --shadow-md:
        0 8px 24px
        rgba(
            15,
            23,
            42,
            0.08
        );


    /* =========================================================
       LAYOUT
       ========================================================= */

    --sidebar-width: 220px;
    --header-height: 72px;


    /* =========================================================
       SPACING
       ========================================================= */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;


    /* =========================================================
       MOTION
       ========================================================= */

    --transition-fast: 150ms ease;
    --transition-normal: 220ms ease;


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

       Neutral platform blue rather than electoral green.
       ========================================================= */

    --focus-ring:
        rgba(
            53,
            103,
            212,
            0.22
        );


    /* =========================================================
       FONT
       ========================================================= */

    --font-sans:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* =========================================================
   DARK THEME
   ========================================================= */

html[data-theme="dark"] {

    /* =========================================================
       BASE
       ========================================================= */

    --page-bg: #08131b;

    --surface: #0f1e29;
    --surface-soft: #142631;
    --surface-muted: #1b303d;


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

    --text-primary: #edf4f7;
    --text-secondary: #bccbd4;
    --text-muted: #8da2af;


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

    --border: #263b48;
    --border-strong: #35505f;


    /* =========================================================
       PLATFORM UI ACCENT

       Legacy "--brand-green-soft" name retained.
       Value is now neutral blue.

       --dashboard-accent-soft automatically follows this
       because it references --brand-green-soft in :root.
       ========================================================= */

    --brand-green-soft:
        rgba(
            53,
            103,
            212,
            0.15
        );


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

    --shadow-sm:
        0 2px 10px
        rgba(
            0,
            0,
            0,
            0.24
        );

    --shadow-md:
        0 10px 28px
        rgba(
            0,
            0,
            0,
            0.3
        );
}