/* ==========================================================
   HomeBase · Design-Tokens
   ----------------------------------------------------------
   Einzige Quelle für Farben, Radien, Schatten und Abstände.
   Hell = :root, Dunkel = html[data-theme="dark"].

   Wird NACH homebase.css / darkmode.css geladen, damit die
   älteren Variablen (--surface, --wt-card, ...) hier auf die
   Tokens umgebogen werden.
   ========================================================== */

:root {
    color-scheme: light;

    /* Flächen */
    --hb-bg: #f3f5f9;
    --hb-surface: #ffffff;
    --hb-surface-2: #f7f8fb;
    --hb-surface-3: #eef1f6;
    --hb-overlay: rgba(255, 255, 255, 0.82);

    /* Linien */
    --hb-border: #e3e7ee;
    --hb-border-strong: #cfd6e2;

    /* Text */
    --hb-text: #151b28;
    --hb-text-2: #3a4356;
    --hb-muted: #6b7487;
    --hb-faint: #98a1b2;

    /* Akzent (HomeBase-Indigo) */
    --hb-accent: #4f5df5;
    --hb-accent-hover: #3f4de2;
    --hb-accent-soft: rgba(79, 93, 245, 0.1);
    --hb-accent-text: #3f4de2;
    --hb-on-accent: #ffffff;

    /* Status */
    --hb-success: #16a34a;
    --hb-success-soft: rgba(22, 163, 74, 0.1);
    --hb-warning: #d97706;
    --hb-warning-soft: rgba(217, 119, 6, 0.12);
    --hb-danger: #dc2626;
    --hb-danger-soft: rgba(220, 38, 38, 0.1);
    --hb-info: #0284c7;
    --hb-info-soft: rgba(2, 132, 199, 0.1);

    /* Bereiche im Haushalt */
    --hb-power: #f59e0b;
    --hb-water: #0ea5e9;
    --hb-pellets: #c2410c;
    --hb-heating: #ef4444;
    --hb-vehicle: #6366f1;

    /* Form */
    --hb-radius-sm: 8px;
    --hb-radius: 12px;
    --hb-radius-lg: 16px;
    --hb-radius-xl: 20px;

    --hb-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --hb-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
        0 6px 20px rgba(16, 24, 40, 0.06);
    --hb-shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.12);

    --hb-focus: 0 0 0 3px rgba(79, 93, 245, 0.25);

    /* Layout */
    --hb-page-width: 1320px;
    --hb-page-pad: 32px;

    --hb-font:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --hb-bg: #0d1015;
    --hb-surface: #151920;
    --hb-surface-2: #1b2029;
    --hb-surface-3: #222833;
    --hb-overlay: rgba(21, 25, 32, 0.82);

    --hb-border: #272d38;
    --hb-border-strong: #394150;

    --hb-text: #eef1f6;
    --hb-text-2: #c4cad6;
    --hb-muted: #8e98aa;
    --hb-faint: #636d7f;

    --hb-accent: #7b88ff;
    --hb-accent-hover: #929dff;
    --hb-accent-soft: rgba(123, 136, 255, 0.14);
    --hb-accent-text: #a3adff;
    --hb-on-accent: #0d1015;

    --hb-success: #34d399;
    --hb-success-soft: rgba(52, 211, 153, 0.12);
    --hb-warning: #fbbf24;
    --hb-warning-soft: rgba(251, 191, 36, 0.12);
    --hb-danger: #f87171;
    --hb-danger-soft: rgba(248, 113, 113, 0.12);
    --hb-info: #38bdf8;
    --hb-info-soft: rgba(56, 189, 248, 0.12);

    --hb-power: #fbbf24;
    --hb-water: #38bdf8;
    --hb-pellets: #fb923c;
    --hb-heating: #f87171;
    --hb-vehicle: #818cf8;

    --hb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --hb-shadow: 0 1px 2px rgba(0, 0, 0, 0.25),
        0 8px 24px rgba(0, 0, 0, 0.25);
    --hb-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);

    --hb-focus: 0 0 0 3px rgba(123, 136, 255, 0.35);
}

@media (max-width: 1100px) {
    :root {
        --hb-page-pad: 24px;
    }
}

@media (max-width: 700px) {
    :root {
        --hb-page-pad: 16px;
    }
}


/* ----------------------------------------------------------
   Ältere Variablen auf die Tokens umbiegen
   (homebase.css, darkmode.css, weighttrack.css)
   ---------------------------------------------------------- */

:root,
html[data-theme="dark"] {
    --background: var(--hb-bg);
    --surface: var(--hb-surface);
    --surface-hover: var(--hb-surface-2);
    --text: var(--hb-text);
    --muted: var(--hb-muted);
    --border: var(--hb-border);
    --accent: var(--hb-accent);
    --accent-hover: var(--hb-accent-hover);
    --danger: var(--hb-danger);
    --success: var(--hb-success);
    --shadow: var(--hb-shadow);
    --primary: var(--hb-accent);
}

:root,
html[data-theme="dark"],
html[data-theme="dark"] .weighttrack-page,
.weighttrack-page,
html[data-theme="dark"] .history-page-v627,
.history-page-v627,
html[data-theme="dark"] .milestone-page,
.milestone-page {
    --wt-card: var(--hb-surface);
    --wt-text: var(--hb-text);
    --wt-muted: var(--hb-muted);
    --wt-line: var(--hb-border);
    --wt-soft: var(--hb-surface-3);
    --wt-input: var(--hb-surface);
    --wt-original-card: var(--hb-surface);
    --wt-original-text: var(--hb-text);
    --wt-original-muted: var(--hb-muted);
    --wt-original-line: var(--hb-border);
    --wt-original-accent: var(--hb-accent);
    --wt-original-danger: var(--hb-danger);
    --wt-original-soft: var(--hb-surface-3);
}