/* ============================================================
   VERA TOKENS — gemeinsames Fundament (Landing + App + Auth)
   Designsprache der Landing: Inter · JetBrains Mono · #ff6b00
   Light + Dark (html[data-theme="dark"])
   ============================================================ */

:root {
    /* Markenpalette (aus Landing-Tailwind-Config) */
    --vera-orange:      #ff6b00;   /* primary-container / CTA */
    --vera-orange-deep: #a04100;   /* primary / Links, aktive Zustände */
    --vera-orange-hover:#7a3000;   /* on-primary-fixed-variant / Hover */
    --vera-ink:         #1a1c1c;   /* on-surface */
    --vera-paper:       #f9f9f9;   /* surface */
    --vera-night:       #16161a;   /* App-Hintergrund dunkel */

    /* Flächen & Linien (Light) */
    --paper: var(--vera-paper);
    --surface: #ffffff;
    --surface-container: #eeeeee;
    --ink: var(--vera-ink);
    --ink-soft: #545f73;           /* secondary */
    --line: rgba(26, 28, 28, 0.12);
    --line-soft: rgba(26, 28, 28, 0.07);
    --orange: var(--vera-orange);
    --orange-cta: var(--vera-orange);
    --orange-cta-hover: #e05e00;
    --orange-soft: rgba(255, 107, 0, 0.08);

    /* Ampel */
    --status-green:     #1e8e3e;
    --status-orange:    #e8710a;
    --status-yellow:    #b58105;
    --status-red:       #d93025;
    --status-green-bg:  rgba(30, 142, 62, 0.12);
    --status-orange-bg: rgba(232, 113, 10, 0.12);
    --status-yellow-bg: rgba(181, 129, 5, 0.14);
    --status-red-bg:    rgba(217, 48, 37, 0.10);

    /* Form — kantiger, wie Landing (rounded 2px / lg 4px / xl 8px / full 12px) */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-card: 10px;
    --radius-pill: 8px;

    /* Schatten */
    --shadow-sm: 0 1px 2px rgba(26, 28, 28, 0.06);
    --shadow-md: 0 2px 8px rgba(26, 28, 28, 0.08);
    --shadow-lg: 0 8px 28px rgba(26, 28, 28, 0.14);
    --shadow-card: 0 1px 2px rgba(26, 28, 28, 0.05), 0 12px 36px rgba(26, 28, 28, 0.10);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);

    /* Typo — Inter für UI, JetBrains Mono für Labels/Zahlen */
    --font-satoshi: 'Inter', system-ui, -apple-system, sans-serif;
    --font-inter: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --container: 1180px;
}

/* ── Dark Mode: gleiche Sprache, dunkle Flächen ──
   Wichtig: ohne diesen Block stehen im Dark Mode weisse Karten
   mit hellgrauer Schrift auf dunklem Grund (Bug 06/2026). */
html[data-theme="dark"] {
    --paper: var(--vera-night);
    --surface: #1d1d22;
    --surface-container: #26262c;
    --ink: #e7e7ea;
    --ink-soft: #a3a8b4;
    --line: rgba(255, 255, 255, 0.10);
    --line-soft: rgba(255, 255, 255, 0.06);
    --orange-cta: var(--vera-orange);
    --orange-cta-hover: #ff7a2e;
    --orange-soft: rgba(255, 107, 0, 0.14);

    --status-green:  #4cc26a;
    --status-orange: #f5953d;
    --status-yellow: #d4a017;
    --status-red:    #e8655c;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
}