/*
  AJM NRW Design Tokens
  Farben stammen aus dem Logo (Blau #3CA4DC, Sterngelb #FFDE1D, Bogen-Navy #24348C).
  Radius-Regel: Buttons = Pille, Karten/Bilder = 16px, Eingabefelder = 10px.
  Eine Akzentfarbe (Blau). Gelb ist ausschließlich dem Spenden-Button vorbehalten.
*/
:root {
  color-scheme: light;

  /* Marke */
  --blau: #3ca4dc;
  --blau-tief: #0f6a9c;      /* Links und Text: 5.9:1 auf Weiß, 5.1:1 auf --flaeche-2 */
  --lapis: #0b2744;          /* tiefe Flächen: Footer, Hero-Overlay */
  --lapis-2: #123a63;
  --navy: #24348c;
  --sonne: #ffde1d;
  --auf-sonne: #1d1a00;

  /* Semantik hell */
  --bg: #f3f7fa;
  --flaeche: #ffffff;
  --flaeche-2: #e6f0f7;
  --text: #0a1a2b;
  --text-2: #3d5166;
  --linie: #d2dee8;
  --linie-stark: #a9bccb;
  --akzent: var(--blau);
  --akzent-text: var(--blau-tief);
  --auf-akzent: #04263d;     /* Text auf blauer Fläche, Kontrast 5.6:1 */
  --tief: var(--lapis);
  --auf-tief: #eaf3fa;
  --auf-tief-2: #b4c9db;
  --fokus: #0f6a9c;
  --fokus-auf-tief: #6cc0ee;
  --feld-rand: #74899d;      /* 3.6:1 auf Weiß: Kontur von Eingabefeldern (WCAG 1.4.11) */
  --akzent-auf-tief: #9ed6f5;
  --sand-hell: #fff5d6;      /* Fläche hinter dem Bibliothekslogo */
  --blau-hover: #56b4e6;
  --sonne-hover: #ffe84f;
  --schleier: #071522;       /* Abdunklung über Fotos */
  --logo-grund: transparent;
  --dauer-bildzoom: 400ms;
  --fehler: #b3261e;
  --erfolg: #1d6b3a;
  --schatten: 0 1px 2px rgb(11 39 68 / 0.06), 0 12px 32px -12px rgb(11 39 68 / 0.18);
  --schatten-hoch: 0 2px 4px rgb(11 39 68 / 0.08), 0 28px 60px -20px rgb(11 39 68 / 0.32);

  /* Typografie */
  --font-display: 'Archivo Variable', 'Archivo', system-ui, sans-serif;
  --font-text: 'Hanken Grotesk Variable', 'Hanken Grotesk', system-ui, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-s: 0.9375rem;
  --fs-m: 1.0625rem;
  --fs-l: 1.25rem;
  --fs-xl: clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem);
  --fs-2xl: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  --fs-3xl: clamp(2.4rem, 1.4rem + 4vw, 4.4rem);

  /* Raum */
  --rand: clamp(1rem, 4vw, 2.5rem);
  --breite: 82.5rem;
  --breite-text: 44rem;
  --abschnitt: clamp(3.5rem, 8vw, 7rem);

  /* Form */
  --r-feld: 10px;
  --r-karte: 16px;
  --r-pille: 999px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Ebenen */
  --z-header: 50;
  --z-menue: 60;
  --z-drawer: 70;
  --z-dialog: 80;
  --z-toast: 90;

  --header-h: 4.5rem;
}
@media (min-width: 1024px) {
  :root { --header-h: 6rem; }
}

/* Dunkel: folgt dem System, außer der Nutzer hat hell gewählt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #071522;
    --flaeche: #0c2033;
    --flaeche-2: #11304b;
    --text: #e9f1f8;
    --text-2: #a9bdce;
    --linie: #1d3a55;
    --linie-stark: #35587a;
    --akzent-text: #6cc0ee;
    --tief: #04101b;
    --fokus: #6cc0ee;
    --feld-rand: #5a7fa3;
    --logo-grund: #fff;
    --fehler: #ff8a80;
    --erfolg: #7ddba0;
    --schatten: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.6);
    --schatten-hoch: 0 2px 4px rgb(0 0 0 / 0.4), 0 28px 60px -20px rgb(0 0 0 / 0.7);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #071522;
  --flaeche: #0c2033;
  --flaeche-2: #11304b;
  --text: #e9f1f8;
  --text-2: #a9bdce;
  --linie: #1d3a55;
  --linie-stark: #35587a;
  --akzent-text: #6cc0ee;
  --tief: #04101b;
  --fokus: #6cc0ee;
  --feld-rand: #5a7fa3;
  --logo-grund: #fff;
  --fehler: #ff8a80;
  --erfolg: #7ddba0;
  --schatten: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.6);
  --schatten-hoch: 0 2px 4px rgb(0 0 0 / 0.4), 0 28px 60px -20px rgb(0 0 0 / 0.7);
}