/* Design-Tokens von AresCards. Komponenten verwenden nur diese Variablen, keine festen Farben.
   Hell und dunkel stehen je Farbe nebeneinander: light-dark(hell, dunkel) richtet sich nach color-scheme. Ohne Wahl gilt
   die Einstellung des Systems; data-theme am <html> (Cookie, siehe ThemeSetup) legt hell oder dunkel fest. */
:root {
    color-scheme: light dark;

    /* Marke: Ares-Rot und Bronze */
    --color-brand-50: light-dark(#fcf1ed, #3a221d);
    --color-brand-100: light-dark(#f8dccf, #4f2b22);
    --color-brand-500: light-dark(#c0412c, #c64530);
    --color-brand-600: light-dark(#a53523, #d75a43);
    --color-brand-700: light-dark(#87291a, #f3a491);
    --color-accent-500: light-dark(#c98a3c, #dc9d4f);

    /* Flächen */
    --color-bg: light-dark(#f3f4f6, #15171b);
    --color-bg-accent: light-dark(#e8ecf4, #1b2230);
    --color-surface: light-dark(#ffffff, #23262d);
    --color-surface-sunken: light-dark(#ebedf0, #17191d);
    --color-surface-hover: light-dark(#e2e5e9, #31353d);
    --color-border: light-dark(#d9dce1, #363b44);
    --color-border-strong: light-dark(#b4b9c2, #4d5460);
    --color-focus: light-dark(#2f6fd8, #79a7f7);
    /* Leichte Abdunklung (hell) bzw. Aufhellung (dunkel) für Hover auf beliebigem Grund. */
    --color-overlay-hover: light-dark(rgba(9, 30, 66, 0.08), rgba(255, 255, 255, 0.08));
    --color-overlay-ghost: light-dark(rgba(9, 30, 66, 0.12), rgba(255, 255, 255, 0.1));

    /* Text */
    --color-text: light-dark(#1c2230, #e3e6eb);
    --color-text-subtle: light-dark(#556073, #b0b7c2);
    --color-text-muted: light-dark(#79828f, #8d95a1);
    --color-text-inverse: #ffffff;
    --color-link: light-dark(#a53523, #f2937e);

    /* Status: *-solid sind Flächen mit weißer Schrift, die übrigen Farben Schrift auf normalem Grund. */
    --color-success: light-dark(#1d7a4c, #5fcf95);
    --color-success-bg: light-dark(#e2f4e9, #16352a);
    --color-success-solid: light-dark(#1d7a4c, #1f7d50);
    --color-warning: light-dark(#8a5f00, #e9bd55);
    --color-warning-bg: light-dark(#fff3d4, #3a2f15);
    --color-danger: light-dark(#be352b, #f1776c);
    --color-danger-bg: light-dark(#fce7e5, #45201d);
    --color-danger-solid: light-dark(#be352b, #c4392f);
    --color-danger-solid-hover: light-dark(#a22b22, #d4483d);
    --color-info: light-dark(#2160bd, #79abf5);
    --color-info-bg: light-dark(#e4eefc, #1a2b47);

    /* Kopfleiste (in beiden Varianten dunkel) */
    --color-topbar-bg: light-dark(#1f1a1d, #0f0d0e);
    --color-topbar-text: #f5efeb;
    --color-topbar-hover: rgba(255, 255, 255, 0.12);
    --color-topbar-active: rgba(255, 255, 255, 0.2);

    /* Label-Farben (Kartenlabels, Phase 3) */
    --label-green: #3fb27c;
    --label-yellow: #eec12f;
    --label-orange: #f2994a;
    --label-red: #e4554b;
    --label-purple: #8a6fdf;
    --label-blue: #4b8ced;
    --label-sky: #4cb3d4;
    --label-lime: #8bbd40;
    --label-pink: #d96aa8;
    --label-gray: #8a93a3;

    /* Board-Hintergründe (eigene Farbverläufe) */
    --board-ember: linear-gradient(135deg, #d4583c 0%, #87291a 100%);
    --board-bronze: linear-gradient(135deg, #d39a4f 0%, #8a5821 100%);
    --board-forest: linear-gradient(135deg, #3f9a6a 0%, #1d553b 100%);
    --board-ocean: linear-gradient(135deg, #3d8fd6 0%, #1d4b8a 100%);
    --board-dusk: linear-gradient(135deg, #e07a5a 0%, #69408f 100%);
    --board-plum: linear-gradient(135deg, #9a5bc4 0%, #4b2870 100%);
    --board-slate: linear-gradient(135deg, #6d7a8c 0%, #313946 100%);
    --board-sand: linear-gradient(135deg, #d9b678 0%, #a77a3c 100%);
    --board-mint: linear-gradient(135deg, #4fbfa8 0%, #237a6d 100%);
    --board-night: linear-gradient(135deg, #3a3f63 0%, #13152a 100%);

    /* Avatar-Hintergründe (Initialen) */
    --avatar-1: #c0412c;
    --avatar-2: #2160bd;
    --avatar-3: #1d7a4c;
    --avatar-4: #8a6fdf;
    --avatar-5: #c98a3c;
    --avatar-6: #4cb3d4;

    /* Form */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    --shadow-card: 0 1px 1px light-dark(rgba(28, 34, 48, 0.18), rgba(0, 0, 0, 0.5)), 0 0 1px light-dark(rgba(28, 34, 48, 0.28), rgba(255, 255, 255, 0.12));
    --shadow-raised: 0 4px 10px -2px light-dark(rgba(28, 34, 48, 0.18), rgba(0, 0, 0, 0.55)), 0 0 1px light-dark(rgba(28, 34, 48, 0.3), rgba(255, 255, 255, 0.14));
    --shadow-overlay: 0 10px 28px -6px light-dark(rgba(28, 34, 48, 0.3), rgba(0, 0, 0, 0.65)), 0 0 1px light-dark(rgba(28, 34, 48, 0.32), rgba(255, 255, 255, 0.16));

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

    /* Schrift: System-Schriften, keine externen Font-Server */
    --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;

    --topbar-height: 48px;
    --transition-fast: 120ms ease;
}

/* Browser ohne light-dark() (z. B. Safari vor 17.5) bekommen die helle Variante statt gar keiner Farben. */
@supports not (color: light-dark(#000, #fff)) {
    :root {
        --color-brand-50: #fcf1ed;
        --color-brand-100: #f8dccf;
        --color-brand-500: #c0412c;
        --color-brand-600: #a53523;
        --color-brand-700: #87291a;
        --color-accent-500: #c98a3c;
        --color-bg: #f3f4f6;
        --color-bg-accent: #e8ecf4;
        --color-surface: #ffffff;
        --color-surface-sunken: #ebedf0;
        --color-surface-hover: #e2e5e9;
        --color-border: #d9dce1;
        --color-border-strong: #b4b9c2;
        --color-focus: #2f6fd8;
        --color-overlay-hover: rgba(9, 30, 66, 0.08);
        --color-overlay-ghost: rgba(9, 30, 66, 0.12);
        --color-text: #1c2230;
        --color-text-subtle: #556073;
        --color-text-muted: #79828f;
        --color-link: #a53523;
        --color-success: #1d7a4c;
        --color-success-bg: #e2f4e9;
        --color-success-solid: #1d7a4c;
        --color-warning: #8a5f00;
        --color-warning-bg: #fff3d4;
        --color-danger: #be352b;
        --color-danger-bg: #fce7e5;
        --color-danger-solid: #be352b;
        --color-danger-solid-hover: #a22b22;
        --color-info: #2160bd;
        --color-info-bg: #e4eefc;
        --color-topbar-bg: #1f1a1d;
    }
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Weniger Bewegung, wenn das System es verlangt. */
@media (prefers-reduced-motion: reduce) {
    :root { --transition-fast: 0s; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}