:root {

    /* ===========================
       COLOR PRIMITIVES
    ============================ */

    --green-50: #edf8f1;
    --green-100: #d9f0e2;
    --green-600: #217a4c;
    --green-700: #1b6840;
    --green-800: #155333;

    --gray-50: #f5f7f6;
    --gray-100: #eef1ef;
    --gray-300: #d8dedb;
    --gray-500: #566159;
    --gray-800: #1b211e;

    --red-50: #fff1f1;
    --red-200: #f4c7c9;
    --red-600: #b8323a;
    --red-800: #84242a;

    --amber-50: #fff8e6;
    --amber-300: #e6c46d;
    --amber-800: #765510;

    /* ===========================
       SEMANTIC COLORS
    ============================ */

    --color-brand: var(--green-600);
    --color-brand-hover: var(--green-700);
    --color-brand-active: var(--green-800);
    --color-on-brand: #ffffff;
    --color-brand-surface: var(--green-50);
    --color-brand-surface-hover: var(--green-100);
    --color-brand-border: #a9d6ba;
    --color-brand-text: #17613b;
    --color-primary-control: var(--color-brand);
    --color-primary-control-border: var(--color-brand-hover);
    --color-primary-control-hover: var(--color-brand-hover);
    --color-primary-control-hover-border: var(--color-brand-active);
    --color-on-primary-control: var(--color-on-brand);

    --color-background: var(--gray-50);
    --color-surface: #ffffff;
    --color-surface-subtle: var(--gray-100);
    --color-surface-raised: #ffffff;
    --color-surface-hover: #e9efeb;
    --color-surface-selected: #e2f1e8;
    --color-surface-disabled: #e9ecea;

    --color-text: var(--gray-800);
    --color-text-muted: var(--gray-500);
    --color-text-subtle: #6d7771;
    --color-text-disabled: #7c8580;
    --color-border: var(--gray-300);
    --color-border-strong: #b7c2bc;
    --color-divider: #e2e7e4;

    --color-danger: var(--red-600);
    --color-on-danger: #ffffff;
    --color-danger-surface: var(--red-50);
    --color-danger-border: var(--red-200);
    --color-danger-text: var(--red-800);

    --color-success: #1b7446;
    --color-success-surface: #e9f6ee;
    --color-success-border: #acd7bd;
    --color-success-text: #155d37;
    --color-warning-surface: var(--amber-50);
    --color-warning-border: var(--amber-300);
    --color-warning-text: var(--amber-800);
    --color-info: #256f9b;
    --color-info-surface: #edf6fb;
    --color-info-border: #b8d8e9;
    --color-info-text: #245f82;

    /* Dashboard and data-visualization roles. */
    --color-accent-purple: #7f67a8;
    --color-accent-purple-surface: #f2eef8;
    --color-accent-purple-border: #cdbfe0;
    --color-accent-purple-text: #6f5599;
    --color-workflow-pending: #b7791f;
    --color-workflow-approved: var(--color-info);
    --color-workflow-scheduled: var(--color-accent-purple);
    --color-workflow-released: var(--color-success);
    --color-chart-grid: #e2e7e4;
    --color-chart-track: #e8efeb;
    --dashboard-hero-start: #f7fcf9;
    --dashboard-hero-end: #edf7f1;
    --dashboard-hero-orb: rgba(112, 190, 139, .22);
    --dashboard-brand-wash: rgba(33, 122, 76, .11);
    --dashboard-brand-wash-strong: rgba(33, 122, 76, .18);
    --dashboard-brand-border: rgba(33, 122, 76, .32);
    --dashboard-brand-decoration: rgba(33, 122, 76, .07);
    --dashboard-shadow-soft: rgba(18, 34, 25, .07);
    --dashboard-shadow-raised: rgba(18, 34, 25, .18);
    --dashboard-shadow-brand: rgba(27, 104, 64, .20);
    --dashboard-chart-brand-start: #67b384;
    --dashboard-chart-brand-end: #277a4d;
    --dashboard-chart-info-start: #79aec8;
    --dashboard-chart-info-end: #397da1;
    --dashboard-kpi-brand: #278457;
    --dashboard-kpi-info: #3180aa;
    --dashboard-kpi-warning: #b7791f;
    --dashboard-kpi-purple: #8069aa;

    --focus-ring-color: rgba(33, 122, 76, .25);
    --error-ring-color: rgba(184, 50, 58, .18);
    --color-overlay: rgba(13, 15, 14, .46);
    --color-notification-unread-surface: #f1f4f2;
    --shadow-color: rgba(18, 34, 25, .12);

    /* Existing aliases retained for compatibility. */
    --primary: var(--color-brand);
    --primary-hover: var(--color-brand-hover);
    --background: var(--color-background);
    --surface: var(--color-surface);
    --text: var(--color-text);
    --text-light: var(--color-text-muted);
    --border: var(--color-border);
    --error: var(--color-danger);
    --success: var(--color-success);

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

    --font-family:
        "Inter",
        "Segoe UI",
        sans-serif;

    /* ===========================
       SPACING AND SIZING
    ============================ */

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    --control-height: 44px;
    --control-height-large: 48px;
    --control-height-floating: 56px;
    --staff-button-height: 32px;
    --staff-button-height-compact: 28px;
    --staff-button-radius: 6px;
    --staff-button-padding-inline: 10px;

    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 16px;
    --radius-pill: 999px;

    --radius: var(--radius-medium);

    --shadow: 0 4px 8px var(--shadow-color);

    --duration-fast: 150ms;
    --duration-standard: 200ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);

    --transition: var(--duration-standard) var(--ease-out);

}

:root[data-theme="dark"] {
    /* Graphite surfaces do the structural work; emerald is an accent. */
    --green-50: #16271f;
    --green-100: #20382c;
    --green-600: #4fb987;
    --green-700: #63c896;
    --green-800: #3ca677;

    --gray-50: #111313;
    --gray-100: #1a1d1c;
    --gray-300: #313735;
    --gray-500: #a7ada9;
    --gray-800: #eef1ef;

    --red-50: #321d20;
    --red-200: #6f3e43;
    --red-600: #dd7d84;
    --red-800: #f4b7ba;

    --amber-50: #2b2518;
    --amber-300: #60502c;
    --amber-800: #efd28e;

    --color-brand: var(--green-600);
    --color-brand-hover: var(--green-700);
    --color-brand-active: var(--green-800);
    --color-on-brand: #0b1d15;
    --color-brand-surface: #16271f;
    --color-brand-surface-hover: #20382c;
    --color-brand-border: #315342;
    --color-brand-text: #8fd5ae;
    --color-primary-control: #156b49;
    --color-primary-control-border: #2b8a63;
    --color-primary-control-hover: #197a54;
    --color-primary-control-hover-border: #35a176;
    --color-on-primary-control: #f1f6f3;

    --color-background: #111313;
    --color-surface: #171a19;
    --color-surface-subtle: #1d201f;
    --color-surface-raised: #222524;
    --color-surface-hover: #282c2a;
    --color-surface-selected: #1c3026;
    --color-surface-disabled: #242826;

    --color-text: #eef1ef;
    --color-text-muted: #a7ada9;
    --color-text-subtle: #8e9691;
    --color-text-disabled: #77807b;
    --color-border: #313735;
    --color-border-strong: #48504c;
    --color-divider: #292e2c;

    --color-danger: #dd7d84;
    --color-on-danger: #261113;
    --color-danger-surface: #321d20;
    --color-danger-border: #6f3e43;
    --color-danger-text: #f4b7ba;
    --color-success: #5bbf8d;
    --color-success-surface: #172b21;
    --color-success-border: #315a44;
    --color-success-text: #91d5ae;
    --color-warning-surface: #2b2518;
    --color-warning-border: #60502c;
    --color-warning-text: #efd28e;
    --color-info: #7faed3;
    --color-info-surface: #1b2b37;
    --color-info-border: #3d5970;
    --color-info-text: #b3d1e5;

    --color-accent-purple: #af9ac7;
    --color-accent-purple-surface: #292331;
    --color-accent-purple-border: #5c5068;
    --color-accent-purple-text: #d0c0df;
    --color-workflow-pending: #c9a65a;
    --color-workflow-approved: var(--color-info);
    --color-workflow-scheduled: var(--color-accent-purple);
    --color-workflow-released: var(--color-success);
    --color-chart-grid: #313735;
    --color-chart-track: #242826;
    --dashboard-hero-start: #161918;
    --dashboard-hero-end: #111313;
    --dashboard-hero-orb: rgba(79, 185, 135, .06);
    --dashboard-brand-wash: rgba(79, 185, 135, .10);
    --dashboard-brand-wash-strong: rgba(79, 185, 135, .15);
    --dashboard-brand-border: rgba(79, 185, 135, .30);
    --dashboard-brand-decoration: rgba(79, 185, 135, .06);
    --dashboard-shadow-soft: rgba(0, 0, 0, .18);
    --dashboard-shadow-raised: rgba(0, 0, 0, .32);
    --dashboard-shadow-brand: rgba(0, 0, 0, .24);
    --dashboard-chart-brand-start: #61bd8e;
    --dashboard-chart-brand-end: #3d9a70;
    --dashboard-chart-info-start: #91b9d8;
    --dashboard-chart-info-end: #5e91bb;
    --dashboard-kpi-brand: #4b9974;
    --dashboard-kpi-info: #6f96b3;
    --dashboard-kpi-warning: #aa8d50;
    --dashboard-kpi-purple: #8f7ca7;

    --focus-ring-color: rgba(79, 185, 135, .27);
    --error-ring-color: rgba(221, 125, 132, .24);
    --color-overlay: rgba(0, 0, 0, .46);
    --color-notification-unread-surface: #202422;
    --shadow-color: rgba(0, 0, 0, .30);
}

:root[data-theme] {
    background-color: var(--color-background);
    color: var(--color-text);
}

/* Theme token swaps are atomic. Normal component motion resumes after paint. */
:root[data-theme-changing],
:root[data-theme-changing] *,
:root[data-theme-changing] *::before,
:root[data-theme-changing] *::after {
    transition: none !important;
}

@media (pointer: coarse) {
    :root {
        --staff-button-height: 44px;
        --staff-button-height-compact: 40px;
    }
}