/* ============================================================
   OC UP! – zentrales Designsystem (eine Quelle für alle Seiten)
   Palette abgeleitet vom Logo: Olive + Orange + Anthrazit auf
   warmem Off-White. Ersetzt die frueheren, uneinheitlichen
   Paletten (#007AFF iOS-Blau, #0071e3 Apple-Blau, Braun etc.).

   Einbinden in jeder Seite:
     <link rel="stylesheet" href="/app/theme.css">   (bzw. relativer Pfad)
   plus die zwei Fonts + Phosphor Icons (siehe Kommentar unten).
   ============================================================ */

/* Fonts + Icons werden LOKAL gehostet (DSGVO - keine Google/CDN-Verbindungen im
   Browser der Nutzer:innen). In den <head> jeder Seite gehoert zusaetzlich:
   <link rel="stylesheet" href="assets/fonts/fonts.css">
   <link rel="stylesheet" href="assets/phosphor/style.css">   (nur Seiten mit Icons)
   Die Dateien unter assets/ erzeugt einmalig das Skript setup_local_assets.sh
   (auf dem Server ausfuehren, siehe Kommentar im Skript). */

:root {
    /* Markenfarben */
    --olive: #7C9A2E;
    --olive-dark: #5A7220;
    --olive-tint: #EEF3DE;
    --orange: #CF7D00;
    --orange-dark: #9C5E00;
    --orange-tint: #FBEDD8;

    /* Neutrale Toene (warm statt iOS-kaltgrau) */
    --ink: #2C2A26;
    --ink-soft: #6B6862;
    --bg: #F7F5F0;
    --card: #FFFFFF;
    --border: #E7E3D8;
    --danger: #C23B22;
    --danger-tint: #F9E7E3;

    /* Abgeleitete Rollen (damit bestehende Klassen weiterfunktionieren) */
    --accent: var(--olive);
    --accent-dark: var(--olive-dark);
    --accent-tint: var(--olive-tint);
    --text: var(--ink);
    --text-sec: var(--ink-soft);

    /* Typografie */
    --font-head: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Radien & Schatten – ein System statt 5 verschiedener Werte */
    --radius-sm: 9px;
    --radius: 14px;
    --radius-lg: 16px;
    --shadow: 0 1px 3px rgba(44, 42, 38, 0.06);
}

/* Dunkelmodus: greift automatisch bei System-Dunkelmodus (sofern nicht manuell
   auf hell gestellt) ODER wenn die Person ihn per Umschalter in der App aktiviert
   hat (data-theme="dark" auf <html>, gespeichert in localStorage "ocup_theme"). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink: #F2F0EB;
        --ink-soft: #A8A49B;
        --bg: #191815;
        --card: #24221E;
        --border: #3A372F;
        --olive-tint: #2E3320;
        --orange-tint: #3A2C17;
        --danger-tint: #3D231E;
        --olive-dark: #A5C455;
        --orange-dark: #E8A23C;
        --shadow: none;
    }
}
:root[data-theme="dark"] {
    --ink: #F2F0EB;
    --ink-soft: #A8A49B;
    --bg: #191815;
    --card: #24221E;
    --border: #3A372F;
    --olive-tint: #2E3320;
    --orange-tint: #3A2C17;
    --danger-tint: #3D231E;
    --olive-dark: #A5C455;
    --orange-dark: #E8A23C;
    --shadow: none;
}

/* Basiselemente – gelten ueberall, wo theme.css eingebunden ist */
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .wordmark, .section-label {
    font-family: var(--font-head);
}

/* Wortmarke "OC UP!" in Logofarben */
.wordmark { font-weight: 800; letter-spacing: -0.01em; }
.wordmark .wm-oc { color: var(--olive); }
.wordmark .wm-up { color: var(--orange); }

/* Kleingedruckte Abschnitts-Label */
.section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-sec);
}

/* Karten */
.card, .form-group, .setup-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* Buttons */
.btn {
    font-family: var(--font-head);
    font-weight: 700;
    border-radius: var(--radius);
    background: var(--olive);
    color: #fff;
    border: none;
}
.btn:active { opacity: 0.85; }
.btn-outline {
    background: transparent;
    color: var(--olive-dark);
    border: 1.5px solid var(--olive);
}

/* Badges (Prioritaet etc.) */
.badge, .prio-badge {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 10px;
    padding: 3px 9px;
    border-radius: 7px;
}
.badge-high { background: var(--orange-tint); color: var(--orange-dark); }
.badge-normal { background: var(--olive-tint); color: var(--olive-dark); }
.badge-danger { background: var(--danger-tint); color: var(--danger); }

/* Auswahl-Chips (Faecher) */
.chip {
    border: 1.5px solid var(--olive);
    color: var(--olive-dark);
    background: var(--olive-tint);
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.chip.off {
    border-color: var(--border);
    color: var(--text-sec);
    background: transparent;
}

/* Avatar-Bubbles (Absender) – eckig-weich statt Kreis, wie im Mockup */
.avatar-bubble {
    border-radius: var(--radius-sm);
    background: var(--olive-tint);
    color: var(--olive-dark);
    font-family: var(--font-head);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Formularfelder */
input[type="text"], input[type="email"], input[type="password"], select, textarea {
    font-family: var(--font-body);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--olive);
    box-shadow: 0 0 0 3px rgba(124, 154, 46, 0.18);
}

/* Banner */
.error-banner { background: var(--danger-tint); color: var(--danger); border-radius: var(--radius); }
.success-banner { background: var(--olive-tint); color: var(--olive-dark); border-radius: var(--radius); }
.notice-banner { background: var(--orange-tint); color: var(--orange-dark); border-radius: var(--radius); }