/* ==========================================================================
   SUPERLOOM – Accessibility / User Preferences
   All prefers-* media queries in one place.
   Loaded after all other CSS so these always win.

   Covered:
   1. prefers-reduced-motion  → already partly in components.css + nav.css,
                                 consolidated and extended here
   2. prefers-color-scheme    → dark mode tokens + overrides
   3. prefers-contrast        → high contrast adjustments
   4. prefers-reduced-data    → no web fonts (system fallbacks only)
   ========================================================================== */


/* ==========================================================================
   1. prefers-reduced-motion
   Already active in components.css (.play-motion-line) and nav.css
   (.nav-overlay transition). This file adds the global catch-all.

   Rule: animations and transitions are opt-in for motion.
   Default state = no motion. Motion is layered on top.
   This is already your approach – this catch-all makes it bulletproof.
   ========================================================================== */



/* Smooth scroll nur wenn keine Motion-Preference */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {

  /* Global catch-all – anything not explicitly covered above */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  
}


/* ==========================================================================
   2. prefers-color-scheme: dark
   Remaps the same token names – all components use tokens, so they
   automatically inherit dark mode without any component-level changes.

   Contrast ratios checked against dark bg (#1A1A18):
   --color-text   #E8E8E4  → 14.2:1 AAA
   --color-meta   #A0A09A  → 4.6:1  AA normal text
   --color-card   #2A2A28  → surface, not used for text
   --color-border #3A3A38  → UI only, not text
   ========================================================================== */

/* @media (prefers-color-scheme: dark) {
  :root {
    --color-bg:      #1A1A18;
    --color-text:    #E8E8E4;
    --color-card:    #2A2A28;
    --color-border:  #3A3A38;
    --color-meta:    #A0A09A;
    --color-focus:   #E8E8E4;
  }

  /* Retina/Studio Display: antialiased macht hellen Text auf dunklem
     Hintergrund zu dünn und fast leuchtend. auto = subpixel-antialiased,
     besser für diese Kombination. */
  /*body {
    -webkit-font-smoothing: auto;
  }

  /* Inclusive Sans 300 wirkt auf dunklem Hintergrund durch den
     Rendering-Effekt noch dünner. 400 kompensiert das ohne die
     Fraunces-Elemente anzufassen (Serif hat durch ihre Form
     schon genug optische Stärke bei 300). */
  /*.text-copy,
  .footer-link,
  .footer-copyright,
  .footer-separator,
  .contact-label,
  .nav-link--primary,
  .nav-link--secondary {
    font-weight: 400;
  }

  /* Nav overlay border lines use hardcoded #202020 in nav.css –
     override here to match dark mode border token */
 /* .nav-group {
    border-top-color: var(--color-border);
  }

  .nav-group:last-child {
    border-bottom-color: var(--color-border);
  }
}


/* ==========================================================================
   3. prefers-contrast: more
   Strengthens borders and removes subtle color distinctions.
   Does not change layout or type sizes – only contrast values.

   WCAG 1.4.11: UI components need 3:1 against adjacent colours.
   At high contrast we push everything to maximum.
   ========================================================================== */

@media (prefers-contrast: more) {

  :root {
    /* Push meta text to full text colour – no more muted grey */
    --color-meta:   var(--color-text);
    /* Stronger border */
    --color-border: var(--color-text);
    /* Wider focus ring */
    --focus-width:  4px;
  }

  /* Card gets an explicit border so it's distinguishable without colour */
  .currently-card {
    outline: 2px solid var(--color-text);
    outline-offset: -2px;
  }

  /* Nav groups: stronger separator lines */
  .nav-group {
    border-top-width: 2px;
  }

  .nav-group:last-child {
    border-bottom-width: 2px;
  }

  /* Footer separators · become more visible */
  .footer-separator {
    color: var(--color-text);
  }
}


/* ==========================================================================
   4. prefers-reduced-data
   Skips custom fonts entirely – system fonts load instantly,
   no network request for .woff2 files.

   Note: @font-face with font-display: swap already handles slow connections
   reasonably well. This is for users who explicitly want less data.

   System font stacks match the roles:
   - Serif role (Fraunces)   → Georgia, 'Times New Roman', serif
   - Sans role (Inclusive)   → system-ui, sans-serif
   - Mono role (Departure)   → 'Courier New', monospace
   ========================================================================== */

@media (prefers-reduced-data: reduce) {

  /* Override font families globally via token reassignment */
  :root {
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-sans:  system-ui, -apple-system, sans-serif;
    --font-mono:  'Courier New', Courier, monospace;
  }

  /* Fraunces variable axes don't apply to Georgia – safe to neutralise */
  .logo__super,
  .text-headline,
  .currently-card__text,
  .contact-email,
  .subpage-title {
    font-variation-settings: normal;
    font-optical-sizing: auto;
  }
}



/* ==========================================================================
   FUTURE: prefers-reduced-transparency
   Relevant sobald Blur-Effekte oder halbtransparente Overlays eingesetzt
   werden (z.B. frosted glass nav, semi-transparente cards).
   Dann: backdrop-filter und opacity-basierte Effekte hier deaktivieren.

   @media (prefers-reduced-transparency: reduce) { ... }
   ========================================================================== */


/* ==========================================================================
   FUTURE: forced-colors (Windows High Contrast Mode)
   Token-Ansatz hilft hier bereits – Custom Properties werden durch
   System-Farben überschrieben. Falls SVG-Icons oder custom-gezeichnete
   Elemente (z.B. das Drei-Punkte-Icon als SVG) nicht korrekt dargestellt
   werden: forced-color-adjust: none gezielt einsetzen.
   CSS-Divs (aktuelles Nav-Icon) sind robuster als SVG in diesem Modus.

   @media (forced-colors: active) { ... }
   ========================================================================== */


/* ==========================================================================
   FUTURE: print
   Für Impressum und Datenschutz – werden gelegentlich gedruckt.
   Navigation, Footer, Cards ausblenden. Schrift auf reines Schwarz/Weiß.
   Externe Links mit href-Inhalt sichtbar machen (a[href]::after).

   @media print { ... }
   ========================================================================== */


/* ==========================================================================
   NOTE: Viewport / Browser-Zoom
   font-size via clamp() reagiert auf Viewport-Breite.
   Vor Go-Live testen: 200% Browser-Zoom (WCAG 1.4.4) darf Layout
   nicht brechen. Besonders prüfen: Header, Currently-Card, Footer.
   ========================================================================== */