:root {
    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;

    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* === FUNDAMENTAL COLOR SCHEME === */
    --color-light-gray: #eeeeee;
    --color-gray: #919d98;
    --color-dark-grey: #1a1a1a;
    --color-dark-green: #0f221e;
    --color-green: #286c3f;
    --color-light-green: #48cb4f;
    --color-white: #ffffff;
    --color-black: #000000;
    
    --color-red: #ff3333;
    --color-red-light: #ff7777;

    /* === TEXT COLORS === */
    --color-text-primary: var(--color-black);
    --color-text-secondary: var(--color-white);
    --color-text-tertiary: var(--color-gray);
    --color-text-special: var(--color-white);
    --color-highlight-primary: var(--color-light-green);
    --color-highlight-secondary: var(--color-green);
    --color-background-primary: var(--color-white);
    --color-background-secondary: var(--color-light-gray);
    --color-background-special: var(--color-dark-green);
    
    /* === BUTTON COLORS === */
    --color-button-primary-bg: var(--color-highlight-secondary);
    --color-button-primary-text: var(--color-text-secondary);
    --color-button-primary-hover-bg: var(--color-highlight-primary);

    --color-button-success-bg: var(--color-green);
    --color-button-success-text: var(--color-text-secondary);
    --color-button-success-hover-bg: var(--color-light-green);

    --color-button-secondary-bg: var(--color-gray);
    --color-button-secondary-text: var(--color-black);
    --color-button-secondary-hover-bg: var(--color-text-tertiary);
    
    --color-button-danger-bg: var(--color-red-light);
    --color-button-danger-text: var(--color-text-secondary);
    --color-button-danger-hover-bg: var(--color-red);

    --color-button-disabled-bg: var(--color-dark-grey);
    --color-button-disabled-text: var(--color-text-tertiary);

    /* === FORM COLORS === */
    --color-input-bg: var(--color-background-primary);
    --color-input-text: var(--color-text-primary);
    --color-input-border: var(--color-text-tertiary);
    --color-input-focus-border: var(--color-highlight-primary);

    /* === CARD & PANEL COLORS === */
    --color-card-bg: var(--color-background-primary);
    --color-card-border: var(--color-text-tertiary);
    --color-card-shadow: rgba(0, 0, 0, 0.2);
    --color-card-hover-bg: var(--color-background-secondary);
    --color-card-text: var(--color-text-primary);
    --color-card-highlight: var(--color-highlight-primary);

    /* === STATUS LIST === */
    --color-status-bg: var(--color-background-secondary);
    --color-status-border: var(--color-text-tertiary);
}


@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: var(--color-white);
        --color-text-secondary: var(--color-white);
        --color-text-tertiary: var(--color-gray);
        --color-text-special: var(--color-white);
        --color-highlight-primary: var(--color-light-green);
        --color-highlight-secondary: var(--color-green);
        --color-background-primary: var(--color-dark-grey);
        --color-background-secondary: var(--color-dark-green);
        --color-background-special: var(--color-dark-green);
    }
}

:root[data-theme="light"] {
    --color-text-primary: var(--color-black);
    --color-text-secondary: var(--color-white);
    --color-text-tertiary: var(--color-gray);
    --color-text-special: var(--color-white);
    --color-highlight-primary: var(--color-light-green);
    --color-highlight-secondary: var(--color-green);
    --color-background-primary: var(--color-white);
    --color-background-secondary: var(--color-light-gray);
    --color-background-special: var(--color-dark-green);
}

:root[data-theme="dark"] {
    --color-text-primary: var(--color-white);
    --color-text-secondary: var(--color-white);
    --color-text-tertiary: var(--color-gray);
    --color-text-special: var(--color-white);
    --color-highlight-primary: var(--color-light-green);
    --color-highlight-secondary: var(--color-green);
    --color-background-primary: var(--color-dark-grey);
    --color-background-secondary: var(--color-dark-green);
    --color-background-special: var(--color-dark-green);
}

* {
    transition: background-color 0.2s ease, color 0.2s ease;
}