/* ============================================================
   havelo — Design Tokens
   "Organized Warmth" — strukturierte Klarheit + menschliche Wärme
   Verbindlich abgeleitet aus dem finalen Archibald-Logo (CI v2.0)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Primärpalette ---- */
  --slate:    #0B283E;  /* Primärfarbe, Text, Tiefe, dunkler BG */
  --cream:    #FBF6ED;  /* Heller BG, Wärme, Papier-Gefühl     */
  --ember:    #C85C24;  /* Primärer Akzent, CTA, die Fliege    */
  --ember-d:  #B94E1D;  /* Ember dunkel, Hover, Schatten       */
  --ember-text: #A8431A; /* Ember für Text auf hellem Tint (AA) */
  --gold:     #E0AE4E;  /* Highlights, Premium, der Kreis      */

  /* ---- Sekundärpalette ---- */
  --moss:     #2D4A3E;  /* Natur, Nachhaltigkeit               */
  --sand:     #E8DDD0;  /* Sekundärer BG, Tiefe                */
  --sage:     #7BAF8A;  /* Erfolg, Positiv, Gesundheit         */

  /* ---- Slate-Abstufungen (für Text-Opazität & Borders) ---- */
  /* BFSG/WCAG 2.1 AA: Textstufen auf ≥4.5:1 (weißer/cremer BG) angehoben.
     -70 = 5.7:1, -55 = 4.7:1, -40 = 4.1:1. -12/-06 nur für Borders/Flächen. */
  --slate-70: rgba(11, 40, 62, 0.72);
  --slate-55: rgba(11, 40, 62, 0.66);
  --slate-40: rgba(11, 40, 62, 0.64);
  --slate-line: rgba(11, 40, 62, 0.30);  /* sichtbare Borders/Trenner (UI ≥3:1) */
  --slate-12: rgba(11, 40, 62, 0.16);
  --slate-06: rgba(11, 40, 62, 0.06);

  /* ---- BFSG 1.4.11: Bedienelement-Rahmen (≥3:1 auf weiß/creme) ---- */
  --control-border: rgba(11, 40, 62, 0.52);
  /* ---- BFSG: Fehler-/Pflichtfeld-Zustände ---- */
  --field-error:    #B3261E;  /* 6.5:1 auf weiß — Rahmen & Text */
  --field-error-bg: rgba(179, 38, 30, 0.07);

  /* ---- BFSG: Fokus-Indikator ---- */
  --focus-ring:   #0B283E;
  --focus-ring-2: #FBF6ED;

  /* ---- Modul-Farben ---- */
  --mod-lebensmittel: #5B8C5A;  /* Grün, frisch          */
  --mod-ernaehrung:   #7BA07B;  /* Hellgrün, vital       */
  --mod-einkauf:      #4A7C8E;  /* Blau-Grau, strukturiert */
  --mod-finanzen:     #8E6B3A;  /* Warmes Braun-Gold     */
  --mod-kalender:     #5A6E8C;  /* Mitternachtsblau      */
  --mod-aufgaben:     #8C5A6E;  /* Pflaume, Fokus        */
  --mod-dokumente:    #6E5A8C;  /* Lavendel, Sicherheit  */
  --mod-steuer:       #8C7A5A;  /* Khaki, Kompetenz      */
  --mod-haushalt:     #5A8C8C;  /* Teal, Heimgefühl      */

  /* ---- Typografie ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ---- Schatten (Slate-getönt) ---- */
  --shadow-sm: 0 1px 3px rgba(11, 40, 62, 0.06);
  --shadow-md: 0 2px 8px rgba(11, 40, 62, 0.08);
  --shadow-lg: 0 4px 16px rgba(11, 40, 62, 0.12);
  --shadow-xl: 0 8px 32px rgba(11, 40, 62, 0.16);

  /* ---- Radien ---- */
  --radius-sm:   4px;
  --radius-md:   8px;   /* Buttons */
  --radius-lg:   12px;  /* Cards   */
  --radius-xl:   20px;  /* Chips   */
  --radius-full: 9999px;

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
  --transition-slow: 400ms ease-out;
}

/* ============================================================
   BFSG / WCAG 2.1 AA — globale Zugänglichkeit
   (gilt für alle Screens, die havelo-tokens.css laden)
   ============================================================ */

/* Sichtbarer Tastatur-Fokus: kräftiger Ring mit Kontrast-Offset.
   Nur bei Tastaturnutzung (:focus-visible), nicht bei Maus-Klick. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="switch"]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 5px var(--focus-ring-2);
}
/* Auf dunklem Grund (Slate-Sidebar / Briefing) den Ring invertieren */
.side :focus-visible,
.sidebar :focus-visible,
.briefing :focus-visible {
  outline-color: var(--cream);
  box-shadow: 0 0 0 5px rgba(11,40,62,0.6);
}

/* Screenreader-only Utility (für Labels/Skip-Links) */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--slate); color: var(--cream); padding: 11px 18px;
  border-radius: var(--radius-md); font-weight: 700; font-size: 14px;
  text-decoration: none; transition: top var(--transition-fast);
}
.skip-link:focus { top: 12px; }

/* Bewegung reduzieren, wenn vom Nutzer gewünscht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mehr Kontrast, wenn vom System angefordert */
@media (prefers-contrast: more) {
  :root {
    --slate-70: rgba(11, 40, 62, 0.86);
    --slate-55: rgba(11, 40, 62, 0.80);
    --slate-40: rgba(11, 40, 62, 0.72);
    --slate-12: rgba(11, 40, 62, 0.32);
    --control-border: rgba(11, 40, 62, 0.7);
  }
}

/* ---- Pflichtfeld-Markierung (nicht nur Farbe: Symbol + Text) ---- */
.req-mark { color: var(--field-error); font-weight: 700; margin-left: 2px; }
.req-mark::after { content: "*"; }