/* ============================================================
   A Gnome's Life - Earthy Color Theme
   ============================================================ */

:root {
    /* Core palette */
    --color-bg: #f5f0e8;
    --color-bg-dark: #e8dfd3;
    --color-text: #3a2e1f;
    --color-text-muted: #7a6e5f;
    --color-primary: #5a7247;
    --color-primary-dark: #3d5230;
    --color-primary-light: #7a9a64;
    --color-secondary: #8b6914;
    --color-secondary-light: #b8922e;
    --color-accent: #c4533a;
    --color-accent-light: #d97a66;
    --color-panel: #faf7f0;
    --color-panel-header: #f0ebe0;
    --color-border: #c9b99a;
    --color-border-light: #ddd2be;
    --color-shadow: rgba(58, 46, 31, 0.12);

    /* Status colors */
    --color-energy: #5a9e3a;
    --color-energy-mid: #c4b83a;
    --color-energy-low: #c45a3a;
    --color-happiness: #d4a935;
    --color-hunger: #c4a03a;
    --color-hunger-high: #c45a3a;
    --color-skill: #4a7a8c;
    --color-skill-bg: #d6e6ec;

    /* Misc */
    --color-highlight: rgba(90, 114, 71, 0.12);
    --color-success: #5a9e3a;
    --color-warning: #d4a935;
    --color-danger: #c4533a;
    --color-info: #4a7a8c;

    /* Fonts */
    --font-narrative: 'Georgia', 'Palatino Linotype', 'Book Antiqua', serif;
    --font-ui: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Courier New', 'Lucida Console', monospace;

    /* Spacing */
    --gap-xs: 4px;
    --gap-sm: 8px;
    --gap-md: 12px;
    --gap-lg: 16px;
    --gap-xl: 24px;

    /* Borders */
    --radius: 6px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-collapse: 300ms ease;
    --transition-modal: 200ms ease-out;
}

/* ---- Scrollbar styling ---- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-bg-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-bg-dark);
}

/* ---- Selection colors ---- */
::selection {
    background: var(--color-primary-light);
    color: #fff;
}

::-moz-selection {
    background: var(--color-primary-light);
    color: #fff;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-normal: 0ms;
        --transition-slow: 0ms;
        --transition-collapse: 0ms;
        --transition-modal: 0ms;
    }
    *, *::before, *::after {
        animation-duration: 0ms !important;
        transition-duration: 0ms !important;
    }
}