/* ==========================================================================
   BookTo — Design Tokens

   Angeglichen an assistuk.net (Design-Handoff Juli 2026, Befund 11).
   Wo Farbe etwas bedeutet — Auswahl, Fokus, Scan-Rahmen — traegt immer
   zusaetzlich eine Form mit (Rand, Haken, Rahmen), damit es in allen
   Farbschemata und bei Farbfehlsichtigkeit erkennbar bleibt.
   ========================================================================== */

:root {
  /* ── AssistUK-Blau ── */
  --color-primary:        #4b698c;
  --color-primary-light:  #6388ad;
  --color-primary-dark:   #3a5a7c;
  --color-primary-deep:   #1a3a6a;
  --color-primary-bg:     #eef2f7;

  --color-secondary:      #ce0f0a;

  /* ── Neutral ── */
  --color-bg:             #f5f5f7;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f0f1f4;
  --color-border:         #e0e0e0;
  --color-border-strong:  #bdbdbd;
  --color-hairline:       rgba(0,0,0,.06);

  --color-text:           #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted:     #525252;
  /* Die Schrift auf gefüllten Primärflächen. Sie MUSS in jedem Schema zur
     dortigen --color-primary passen: in Dunkel und Hohem Kontrast wird das
     Blau hell, und Weiß darauf ergab gemessen nur 2,48:1 bzw. 2,14:1 —
     also am schlechtesten genau dort, wo jemand die Einstellung wegen
     seiner Augen gewählt hat. */
  --color-text-inverse:   #ffffff;

  /* ── Rueckmeldung ── */
  --color-success:    #2f6b3f;
  --color-success-bg: #eef7ee;
  --color-warning:    #8a5a00;
  --color-warning-bg: #fdf3e3;
  --color-error:      #b3261e;
  --color-error-bg:   #fdeceb;
  --color-info:       #2563eb;

  /* ── Fokus, Scan und Verweilen ──
     EIN eigener Ton, nie gleich --color-primary: auf gefuellten Blauflaechen
     waere ein blauer Ring unsichtbar (Befund 03). Derselbe Ton traegt
     Tastaturfokus, Scan-Rahmen und Verweil-Ziel — eine Regel, ein Ton. */
  --color-focus:      #cc6600;
  --color-focus-fill: rgba(204,102,0,.18);

  /* ── Lese-Hervorhebung ── */
  --color-hl-word:     #ffe082;
  --color-hl-sentence: #e8f0fb;

  /* ── Schrift ── */
  --font-headline: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-label:    'Oswald', 'DM Sans', system-ui, sans-serif;
  --font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Untergrenze 16 px: darunter faengt Lesen an, Arbeit zu werden (Befund 07). */
  --text-min:   1rem;
  --text-xs:    1rem;
  --text-sm:    1.0625rem;
  --text-base:  1.125rem;
  --text-lg:    1.375rem;
  --text-xl:    1.75rem;
  --text-2xl:   2.25rem;
  --text-3xl:   3rem;
  /* Buchtext: bewusst gross — die Zielgruppe liest mit Muehe. */
  --text-story: 2rem;

  --leading-tight:  1.25;
  --leading-normal: 1.55;
  --leading-loose:  1.9;

  /* ── Abstaende (4-8-12-16-24-32-48-64) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  /* ── Radien / Schatten ── */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.10);
  --shadow-md: 0 4px 14px rgba(0,0,0,.12);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.16);
  --shadow-hover: 0 12px 40px rgba(0,0,0,.12);

  /* ── Glas ── */
  --glass:        rgba(255,255,255,.72);
  --glass-strong: rgba(255,255,255,.88);
  --glass-blur:   blur(20px);

  /* ── Trefferflaechen ──
     64 px ist das Mass fuer Augensteuerung; Hauptaktionen 88 px. */
  --target-min:     64px;
  --target-dwell:   64px;
  --target-primary: 88px;
  --target-big:     120px;

  /* ── Bewegung ── */
  --ease:        cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: .12s var(--ease);
  --transition:      .35s var(--ease);
  --transition-enter: .6s var(--ease);

  --z-base: 1;
  --z-bar: 500;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-cursor: 9999;
}

/* ── Schriftgroesse global ── */
html[data-fontscale="large"]  { font-size: 19px; }
html[data-fontscale="xlarge"] { font-size: 22px; }

/* ── Hoher Kontrast ── */
html[data-contrast="high"] {
  --color-bg:             #000000;
  --color-surface:        #0d0d0d;
  --color-surface-alt:    #1a1a1a;
  --color-border:         #ffffff;
  --color-border-strong:  #ffffff;
  --color-hairline:       rgba(255,255,255,.5);
  --color-text:           #ffffff;
  --color-text-secondary: #f0f0f0;
  --color-text-muted:     #e0e0e0;
  /* Schwarz auf dem hellen Blau: 10,2:1 statt 2,14:1 mit Weiß. */
  --color-text-inverse:   #000000;
  --color-primary:        #7fb3ff;
  --color-primary-light:  #a8ccff;
  --color-primary-dark:   #5590dd;
  --color-primary-deep:   #001b3d;
  --color-primary-bg:     #001b3d;
  --color-hl-word:        #ffee58;
  --color-hl-sentence:    #003366;
  --color-focus:          #ffa640;
  --color-focus-fill:     rgba(255,166,64,.28);
  --color-error:          #ff8a80;
  --color-error-bg:       #3a0f0c;
  --color-success:        #7ee59a;
  --color-success-bg:     #06240f;
  --color-warning:        #ffc46b;
  --color-warning-bg:     #2e1f00;
  --glass:                rgba(0,0,0,.86);
  --glass-strong:         rgba(0,0,0,.94);
}

/* ── Dunkel ── */
html[data-contrast="dark"] {
  --color-bg:             #14181d;
  --color-surface:        #1c2228;
  --color-surface-alt:    #232a31;
  --color-border:         #39424c;
  --color-border-strong:  #5a6572;
  --color-hairline:       rgba(255,255,255,.10);
  --color-text:           #f2f5f8;
  --color-text-secondary: #c8d0d8;
  --color-text-muted:     #aab4bf;
  /* Dunkles Marineblau auf dem hellen Blau: 7,2:1 statt 2,48:1 mit Weiß. */
  --color-text-inverse:   #0e1a2b;
  --color-primary:        #7fa8d4;
  --color-primary-light:  #9dc0e4;
  --color-primary-dark:   #5f8ab8;
  --color-primary-deep:   #0e1a2b;
  --color-primary-bg:     #223243;
  --color-hl-word:        #b58900;
  --color-hl-sentence:    #22394f;
  --color-focus:          #ffa640;
  --color-focus-fill:     rgba(255,166,64,.24);
  --color-error:          #ef9a93;
  --color-error-bg:       #34120f;
  --color-success:        #8fd6a4;
  --color-success-bg:     #10281a;
  --color-warning:        #e8b767;
  --color-warning-bg:     #2c2110;
  --glass:                rgba(20,24,29,.78);
  --glass-strong:         rgba(20,24,29,.92);
}

/* ── Sepia (warm, blendet weniger — wie assistuk.net) ── */
html[data-contrast="sepia"] {
  --color-bg:             #f4ecd8;
  --color-surface:        #fdf6e3;
  --color-surface-alt:    #eee4cd;
  --color-border:         #d6c9aa;
  --color-border-strong:  #a89a7b;
  --color-hairline:       rgba(90,70,30,.14);
  --color-text:           #33291a;
  --color-text-secondary: #5b4b32;
  --color-text-muted:     #6b5a3e;
  --color-primary:        #40608a;
  --color-primary-bg:     #e6e0cb;
  --color-hl-sentence:    #ece2c4;
  --glass:                rgba(253,246,227,.80);
  --glass-strong:         rgba(253,246,227,.93);
}

/* ── Blaufilter (weniger Blauanteil, abends angenehmer) ── */
html[data-contrast="blue"] {
  --color-bg:             #eaf2f8;
  --color-surface:        #f7fbfe;
  --color-surface-alt:    #dfeaf4;
  --color-border:         #c2d4e4;
  --color-border-strong:  #91aac3;
  --color-hairline:       rgba(20,50,80,.10);
  --color-text:           #12222f;
  --color-text-secondary: #33475a;
  --color-text-muted:     #415668;
  --color-primary-bg:     #dce8f4;
  --color-hl-sentence:    #d7e6f5;
  --glass:                rgba(247,251,254,.78);
  --glass-strong:         rgba(247,251,254,.92);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}