/* VeloStack Design-Tokens (#497): Designsprache Odoo 20, Farben veloflott.at.
 *
 * Eine Quelle fuer Verwaltung (Bootstrap) und Marktplatz (eigenes CSS).
 * Kontraste geprueft (tests/test_ui/test_design_tokens.py): Text >= 4,5:1.
 * Cyan und Limette sind auf Weiss nur Flaechen-/Rahmenfarben, nie Textfarbe
 * (2,9:1 bzw. 2,1:1); fuer Text gibt es die dunklen Varianten.
 */
:root {
    /* Markenfarben veloflott.at */
    --vf-blue: #006c97;          /* Primaer (statt Odoo-Lila)            5,85:1 auf Weiss */
    --vf-blue-hover: #005a7e;
    --vf-blue-dark: #03364a;     /* Kopf/Fokus-Rand                      12,9:1 */
    --vf-blue-subtle: #e5f1f6;   /* aktive Zeile, Facetten-Pill */
    --vf-on-blue: #ffffff;       /* Text auf --vf-blue */
    --vf-cyan: #00a7c1;          /* Akzent, nur Flaeche/Rand */
    --vf-cyan-text: #007f93;     /* Cyan als Text                        4,7:1 */
    --vf-lime: #93bf40;          /* Erfolg als Flaeche */
    --vf-lime-text: #4f7417;     /* Erfolg als Text */

    /* Neutrale Toene im Odoo-20-Stil */
    --vs-bg: #f3f4f6;            /* Seitenhintergrund (Webclient) */
    --vs-surface: #ffffff;       /* Sheets, Leisten, Karten */
    --vs-surface-muted: #f9fafb; /* Tabellenkopf, Hover */
    --vs-border: #d8dadd;
    --vs-border-strong: #b8bcc2;
    --vs-text: #1f2937;          /* 14,7:1 */
    --vs-text-muted: #5f6b75;    /* 5,5:1 auf Weiss, 5,0:1 auf --vs-bg */

    /* Status (Text >= 6:1, #491) */
    --vs-danger: #b02a37;
    --vs-danger-subtle: #f8e1e3;
    --vs-warning-text: #7a4b00;
    --vs-warning-subtle: #fff1d6;
    --vs-success: #146c43;
    --vs-success-subtle: #e3f1e8;
    --vs-info-subtle: #e5f1f6;

    /* Form */
    --vs-radius: 0.375rem;
    --vs-radius-pill: 999px;
    --vs-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    --vs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", Ubuntu, sans-serif;
    --vs-font-size: 0.875rem;    /* 14 px wie Odoo */
    --vs-font-size-small: 0.75rem;
    --vs-navbar-height: 2.875rem;
    --vs-gap: 1rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --vf-blue: #4fb3d9;
        --vf-blue-hover: #79c5e3;
        --vf-blue-subtle: #12313f;
        --vf-on-blue: #111827;      /* helles Blau braucht dunklen Text (7,9:1) */
        --vf-cyan-text: #5fd0e2;
        --vf-lime-text: #a8d468;
        --vs-bg: #111827;
        --vs-surface: #1f2937;
        --vs-surface-muted: #263243;
        --vs-border: #374151;
        --vs-border-strong: #4b5563;
        --vs-text: #e5e7eb;
        --vs-text-muted: #a3acb8;
        --vs-danger: #f08a94;
        --vs-danger-subtle: #3d1f24;
        --vs-warning-text: #f3c56b;
        --vs-warning-subtle: #3a2e14;
        --vs-success: #7fd19b;
        --vs-success-subtle: #173325;
        --vs-info-subtle: #12313f;
    }
}