/* Semantic Color Variables */
:root {
    /* --- Semantic Variables for Light Theme --- */
    /* Global */
    --sys-color-background-page: var(--color-white);
    --sys-color-background-surface: var(--color-white);
    --sys-color-background-inverted: var(--color-gray-900);
    --sys-color-background-elevated: var(--color-white);
    --sys-shadow-default: var(--shadow-md);

    /* Text */
    --sys-color-text-primary: var(--color-gray-900);
    --sys-color-text-secondary: var(--color-gray-600);
    --sys-color-text-subtle: var(--color-gray-500);
    --sys-color-text-inverted: var(--color-white);
    --sys-color-heading: var(--color-gray-900);

    /* Interactive */
    --sys-color-interactive: var(--color-blue-500);
    --sys-color-interactive-hover: var(--color-blue-600);
    --sys-color-interactive-active: var(--color-blue-700);
    --sys-color-interactive-disabled: var(--color-gray-300);

    /* Primary Action */
    --sys-color-primary-default: var(--color-blue-500);
    --sys-color-primary-hover: var(--color-blue-600);
    --sys-color-primary-active: var(--color-blue-700);
    --sys-color-primary-text: var(--color-white);

    /* Positive */
    --sys-color-positive-default: var(--color-green-500);
    --sys-color-positive-hover: var(--color-green-600);
    --sys-color-positive-active: var(--color-green-700);
    --sys-color-positive-text: var(--color-white);

    /* Negative */
    --sys-color-negative-default: var(--color-red-500);
    --sys-color-negative-hover: var(--color-red-600);
    --sys-color-negative-active: var(--color-red-700);
    --sys-color-negative-text: var(--color-white);

    /* Neutral */
    --sys-color-neutral-default: var(--color-gray-500);
    --sys-color-neutral-hover: var(--color-gray-600);
    --sys-color-neutral-active: var(--color-gray-700);
    --sys-color-neutral-text: var(--color-white);

    /* Secondary Action */
    --sys-color-secondary-default: var(--color-gray-200);
    --sys-color-secondary-hover: var(--color-gray-300);
    --sys-color-secondary-active: var(--color-gray-400);
    --sys-color-secondary-text: var(--color-gray-900);

    /* Borders & Dividers */
    --sys-color-border-default: var(--color-gray-300);
    --sys-color-border-subtle: var(--color-gray-200);
    --sys-color-divider-default: var(--color-gray-200);
    --sys-color-icon-default: var(--color-gray-600);

    /* Status */
    --sys-color-status-success: var(--color-green-500);
    --sys-color-status-success-background: var(--color-tea-green-300);
    --sys-color-status-success-text: var(--color-green-900);
    --sys-color-status-error: var(--color-red-500);
    --sys-color-status-error-background: var(--color-red-100);
    --sys-color-status-error-text: var(--color-red-900);
    --sys-color-status-warning: var(--color-yellow-500);
    --sys-color-status-warning-background: var(--color-yellow-100);
    --sys-color-status-warning-text: var(--color-yellow-900);
    --sys-color-status-info: var(--color-blue-500);
    --sys-color-status-info-background: var(--color-blue-100);
    --sys-color-status-info-text: var(--color-blue-900);

    /* Special Action Colors */
    --sys-color-special-default: var(--color-brand-purple);
    --sys-color-special-hover: var(--color-brand-purple-dark);
    --sys-color-special-active: var(--color-purple-800);
    --sys-color-special-text: var(--color-white);

    /* Submit Button Colors */
    --sys-color-submit-default: var(--color-brand-teal);
    --sys-color-submit-hover: var(--color-brand-teal-dark);
    --sys-color-submit-active: var(--color-teal-800);
    --sys-color-submit-text: var(--color-white);
}

/* Theme Overrides: Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        /* --- Semantic Variables for Dark Theme --- */
        --sys-color-background-page: var(--color-black);
        --sys-color-background-surface: var(--color-gray-900);
        --sys-color-background-inverted: var(--color-white);
        --sys-color-background-elevated: var(--color-gray-800);
        --sys-shadow-default: var(--shadow-lg);

        --sys-color-text-primary: var(--color-white);
        --sys-color-text-secondary: var(--color-gray-400);
        --sys-color-text-subtle: var(--color-gray-500);
        --sys-color-text-inverted: var(--color-gray-900);
        --sys-color-heading: var(--color-white);

        --sys-color-interactive: var(--color-blue-400);
        --sys-color-interactive-hover: var(--color-blue-300);
        --sys-color-interactive-active: var(--color-blue-200);
        --sys-color-interactive-disabled: var(--color-gray-700);

        --sys-color-primary-default: var(--color-blue-400);
        --sys-color-primary-hover: var(--color-blue-300);
        --sys-color-primary-active: var(--color-blue-200);
        --sys-color-primary-text: var(--color-gray-900);

        --sys-color-positive-default: var(--color-green-500);
        --sys-color-positive-hover: var(--color-green-400);
        --sys-color-positive-active: var(--color-green-300);
        --sys-color-positive-text: var(--color-gray-900);

        --sys-color-negative-default: var(--color-red-500);
        --sys-color-negative-hover: var(--color-red-400);
        --sys-color-negative-active: var(--color-red-300);
        --sys-color-negative-text: var(--color-gray-900);

        --sys-color-neutral-default: var(--color-gray-600);
        --sys-color-neutral-hover: var(--color-gray-500);
        --sys-color-neutral-active: var(--color-gray-400);
        --sys-color-neutral-text: var(--color-gray-900);

        --sys-color-secondary-default: var(--color-gray-800);
        --sys-color-secondary-hover: var(--color-gray-700);
        --sys-color-secondary-active: var(--color-gray-600);
        --sys-color-secondary-text: var(--color-white);

        --sys-color-border-default: var(--color-gray-700);
        --sys-color-border-subtle: var(--color-gray-800);
        --sys-color-divider-default: var(--color-gray-800);
        --sys-color-icon-default: var(--color-gray-400);

        --sys-color-status-success: var(--color-green-400);
        --sys-color-status-success-background: var(--color-green-900);
        --sys-color-status-success-text: var(--color-green-100);
        --sys-color-status-error: var(--color-red-400);
        --sys-color-status-error-background: var(--color-red-900);
        --sys-color-status-error-text: var(--color-red-100);
        --sys-color-status-warning: var(--color-yellow-400);
        --sys-color-status-warning-background: var(--color-yellow-900);
        --sys-color-status-warning-text: var(--color-yellow-100);
        --sys-color-status-info: var(--color-blue-400);
        --sys-color-status-info-background: var(--color-blue-900);
        --sys-color-status-info-text: var(--color-blue-100);

        /* Special Action Colors - Dark Mode */
        --sys-color-special-default: var(--color-purple-400);
        --sys-color-special-hover: var(--color-purple-300);
        --sys-color-special-active: var(--color-purple-200);
        --sys-color-special-text: var(--color-gray-900);

        /* Submit Button Colors - Dark Mode */
        --sys-color-submit-default: var(--color-teal-600);
        --sys-color-submit-hover: var(--color-teal-500);
        --sys-color-submit-active: var(--color-teal-400);
        --sys-color-submit-text: var(--color-gray-900);

        color-scheme: dark;
    }
}