/* ==========================================================================
   Sky Maree Steele | Neurodiversity-Affirming Sensory & Bionic Reading Engine
   Path: /PHP/sensory/sensory.css
   Features:
   - UI Contrast Modes (Soft Low-Stimulation, High Contrast WCAG AAA, Ultra OLED, Warm Sepia)
   - Reduced Motion & Anti-Flashing overrides
   - High-Readability Neuro-Affirming Fonts (Lexend, Atkinson Hyperlegible, OpenDyslexic)
   - Two-Tone Bionic Reading formatting for <p> and site tags
   ========================================================================== */

/* 1. High-Readability Fonts Imports */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Lexend:wght@300;400;500;600;700;800&family=Comic+Neue:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --bionic-primary: #1E293B;       /* Default bold fixation color */
  --bionic-secondary: #64748B;     /* Default tail word color */
  --bionic-weight: 800;
  --sensory-line-height: 1.7;
  --sensory-letter-spacing: 0.02em;
  --sensory-word-spacing: 0.05em;
}

.dark {
  --bionic-primary: #F8FAFC;
  --bionic-secondary: #94A3B8;
}

/* ==========================================================================
   2. BIONIC READING TWO-TONE FORMATTING
   ========================================================================== */
.bionic-active p,
p.bionic-enabled {
  line-height: var(--sensory-line-height) !important;
  letter-spacing: var(--sensory-letter-spacing);
  word-spacing: var(--sensory-word-spacing);
}

.bionic-word {
  display: inline-block;
  white-space: pre-wrap;
}

.bionic-fixation {
  font-weight: var(--bionic-weight, 800) !important;
  color: var(--bionic-primary) !important;
  display: inline;
}

.bionic-tail {
  font-weight: 400 !important;
  color: var(--bionic-secondary) !important;
  opacity: 0.92;
  display: inline;
}

/* Tags with Bionic Text */
.bionic-tag {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}

.bionic-tag .bionic-fixation {
  font-weight: 800 !important;
  color: currentColor !important;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

/* ==========================================================================
   3. HIGH-READABILITY FONTS MODES
   ========================================================================== */
/* Lexend Mode: Specifically designed by educational researchers to reduce visual stress */
body.font-lexend,
body.font-lexend p,
body.font-lexend span,
body.font-lexend div,
body.font-lexend h1,
body.font-lexend h2,
body.font-lexend h3,
body.font-lexend h4,
body.font-lexend h5,
body.font-lexend button,
body.font-lexend a,
body.font-lexend input,
body.font-lexend textarea {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Atkinson Hyperlegible Mode: Developed by Braille Institute for maximum character distinction */
body.font-atkinson,
body.font-atkinson p,
body.font-atkinson span,
body.font-atkinson div,
body.font-atkinson h1,
body.font-atkinson h2,
body.font-atkinson h3,
body.font-atkinson h4,
body.font-atkinson button,
body.font-atkinson a {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}

/* Comic Neue Mode: High distinction irregular shapes friendly for dyslexia */
body.font-comicneue,
body.font-comicneue p,
body.font-comicneue span,
body.font-comicneue div,
body.font-comicneue h1,
body.font-comicneue h2,
body.font-comicneue h3 {
  font-family: 'Comic Neue', cursive, sans-serif !important;
}

/* Dyslexia Spacing Enhancement */
body.enhanced-letter-spacing p,
body.enhanced-letter-spacing span,
body.enhanced-letter-spacing a {
  letter-spacing: 0.04em !important;
  line-height: 1.85 !important;
  word-spacing: 0.08em !important;
}

/* ==========================================================================
   4. SENSORY & CONTRAST MODES
   ========================================================================== */

/* Sensory Friendly Mode: Muted saturation, reduced glare, calmer tones */
body.sensory-mode {
  filter: contrast(0.96) saturate(0.92);
}

body.sensory-mode img,
body.sensory-mode video {
  filter: saturate(0.85) brightness(0.95);
}

/* High Contrast Mode: WCAG AAA High Legibility */
body.high-contrast-mode {
  background-color: #0B0F17 !important;
  color: #FFFFFF !important;
}

body.high-contrast-mode .glass-card,
body.high-contrast-mode .bg-white,
body.high-contrast-mode .bg-gray-50,
body.high-contrast-mode .bg-duotone-clinical,
body.high-contrast-mode .bg-duotone-warm {
  background-color: #121824 !important;
  border-color: #38BDF8 !important;
  border-width: 1.5px !important;
  color: #FFFFFF !important;
}

body.high-contrast-mode p,
body.high-contrast-mode span:not([class*="bg-"]):not([class*="text-"]) {
  color: #F8FAFC !important;
}

body.high-contrast-mode a {
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px;
}

/* Ultra Dark OLED Mode: Pure deep black for photophobia and light sensitivity */
body.ultra-oled-mode {
  background-color: #000000 !important;
  color: #E2E8F0 !important;
}

body.ultra-oled-mode .glass-card,
body.ultra-oled-mode .bg-white,
body.ultra-oled-mode .bg-gray-50,
body.ultra-oled-mode .dark\:bg-\[\#151D28\] {
  background-color: #080808 !important;
  border-color: #27272A !important;
}

/* Warm Sepia Mode: Blue-light filter for evening reading and ADHD eye fatigue */
body.warm-sepia-mode {
  background-color: #F4ECE1 !important;
  color: #2B2118 !important;
}

body.warm-sepia-mode .glass-card,
body.warm-sepia-mode .bg-white {
  background-color: #FAF4EB !important;
  border-color: #D6C7B2 !important;
  color: #2B2118 !important;
}

/* ==========================================================================
   5. REDUCED MOTION OVERRIDES
   ========================================================================== */
body.reduced-motion,
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

body.reduced-motion .animate-bounce,
body.reduced-motion .animate-pulse,
body.reduced-motion .animate-spin {
  animation: none !important;
}