/* ====================================================================
   NEUROTECH TDAH: 5 PARADIGMAS DE LAYOUT TRANSLACIONAIS
   WCAG 2.1 AAA • Arnsten (HCN) • Barkley (POP) • Kooij (DLMO 480nm)
   ==================================================================== */

/* Suavização de transição entre temas (respeita prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  body, .neuro-card, .touch-target, header, nav, #mobile-top-bar, #mobile-bottom-nav, div, section {
    transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease,
                color 0.15s ease,
                box-shadow 0.2s ease;
  }
}

/* ====================================================================
   1. PARADIGMA: CYBER NEUMORPHIC (Padrão Tátil Dopaminérgico)
   Affordances físicas táteis, relevo suave, feedback de pressão imediato
   ==================================================================== */
:root, [data-paradigm="cyber-neumorphic"] {
  --bg-canvas: #16191D;
  --bg-surface: #1B1F24;
  --bg-card: #1D2228;
  --border-subtle: #2A303A;
  --border-focus: #00D2D3;
  --text-high: #F0F3F7;
  --text-medium: #A0AEC0;
  --text-dim: #718096;
  --accent-primary: #00D2D3;
  --accent-primary-text: #0B1015;
  --accent-secondary: #70A1FF;
  --accent-sos: #FF4757;
  --accent-success: #2ED573;
  --card-radius: 20px;
  --button-radius: 14px;
  --card-shadow: 6px 6px 14px #101215, -6px -6px 14px #222831;
  --btn-shadow: 4px 4px 10px #101215, -4px -4px 10px #222831;
  --btn-active-shadow: inset 3px 3px 6px #101215, inset -3px -3px 6px #222831;
  --border-width: 1px;
  --backdrop-blur: 0px;
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Fira Code', monospace;
}

[data-paradigm="cyber-neumorphic"] body,
[data-paradigm="cyber-neumorphic"] #mobile-app-root {
  background-color: var(--bg-canvas) !important;
  color: var(--text-high) !important;
  font-family: var(--font-primary) !important;
}

[data-paradigm="cyber-neumorphic"] .neuro-card,
[data-paradigm="cyber-neumorphic"] .bg-slate-900,
[data-paradigm="cyber-neumorphic"] .bg-slate-900\/90 {
  background-color: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
}

[data-paradigm="cyber-neumorphic"] .bg-slate-950,
[data-paradigm="cyber-neumorphic"] .bg-slate-950\/60 {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
}

[data-paradigm="cyber-neumorphic"] .touch-target:not(.btn-primary):not(.nav-fab-hero-notch) {
  box-shadow: var(--btn-shadow);
}

[data-paradigm="cyber-neumorphic"] .touch-target:active:not(.btn-primary):not(.nav-fab-hero-notch) {
  box-shadow: var(--btn-active-shadow);
}

/* ====================================================================
   2. PARADIGMA: MINIMALISTA OLED FOCUS (Preto Puro & Zero Halation)
   Contraste máximo, Atkinson Hyperlegible, economia energética e foco absoluto
   ==================================================================== */
[data-paradigm="oled-focus"] {
  --bg-canvas: #000000;
  --bg-surface: #070809;
  --bg-card: #0D0F12;
  --border-subtle: #1C2026;
  --border-focus: #00E5FF;
  --text-high: #FFFFFF;
  --text-medium: #8892B0;
  --text-dim: #495670;
  --accent-primary: #00E5FF;
  --accent-primary-text: #000000;
  --accent-secondary: #FFB000;
  --accent-sos: #FF3344;
  --accent-success: #00FF66;
  --card-radius: 6px;
  --button-radius: 6px;
  --card-shadow: none;
  --btn-shadow: none;
  --btn-active-shadow: none;
  --border-width: 1px;
  --backdrop-blur: 0px;
  --font-primary: 'Atkinson Hyperlegible', monospace, sans-serif;
  --font-mono: 'Fira Code', monospace;
}

[data-paradigm="oled-focus"] body,
[data-paradigm="oled-focus"] #mobile-app-root {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  font-family: var(--font-primary) !important;
}

[data-paradigm="oled-focus"] .neuro-card,
[data-paradigm="oled-focus"] .bg-slate-900,
[data-paradigm="oled-focus"] .bg-slate-900\/90,
[data-paradigm="oled-focus"] .bg-\[\#16181A\],
[data-paradigm="oled-focus"] .bg-\[\#0f1113\] {
  background-color: #070809 !important;
  border-color: #1C2026 !important;
  border-radius: var(--card-radius) !important;
  box-shadow: none !important;
}

[data-paradigm="oled-focus"] .bg-slate-950,
[data-paradigm="oled-focus"] .bg-slate-950\/60 {
  background-color: #000000 !important;
  border-color: #161A20 !important;
}

[data-paradigm="oled-focus"] #mobile-top-bar,
[data-paradigm="oled-focus"] #mobile-bottom-nav,
[data-paradigm="oled-focus"] header {
  background-color: #000000 !important;
  border-color: #1C2026 !important;
}

[data-paradigm="oled-focus"] .btn-primary {
  background: #00E5FF !important;
  color: #000000 !important;
  border-radius: var(--button-radius) !important;
  box-shadow: none !important;
}

/* ====================================================================
   3. PARADIGMA: CLINICAL HEALTH GLASSMORPHISM (Apple Health & FHIR R4)
   Superfícies translúcidas gaussianas, desfoque elegante, padrão hospitalar moderno
   ==================================================================== */
[data-paradigm="clinical-glass"] {
  --bg-canvas: #0A0D14;
  --bg-surface: rgba(18, 24, 38, 0.75);
  --bg-card: rgba(26, 35, 54, 0.55);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-focus: rgba(56, 189, 248, 0.8);
  --text-high: #F8FAFC;
  --text-medium: #CBD5E1;
  --text-dim: #94A3B8;
  --accent-primary: #38BDF8;
  --accent-primary-text: #04121F;
  --accent-secondary: #818CF8;
  --accent-sos: #FB7185;
  --accent-success: #34D399;
  --card-radius: 20px;
  --button-radius: 12px;
  --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
  --btn-shadow: 0 4px 16px rgba(56, 189, 248, 0.25);
  --btn-active-shadow: scale(0.97);
  --border-width: 1px;
  --backdrop-blur: blur(20px);
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Inter', monospace;
}

[data-paradigm="clinical-glass"] body,
[data-paradigm="clinical-glass"] #mobile-app-root {
  background-color: var(--bg-canvas) !important;
  color: var(--text-high) !important;
  font-family: var(--font-primary) !important;
}

[data-paradigm="clinical-glass"] .neuro-card,
[data-paradigm="clinical-glass"] .bg-slate-900,
[data-paradigm="clinical-glass"] .bg-slate-900\/90 {
  background: var(--bg-card) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
}

[data-paradigm="clinical-glass"] .bg-slate-950,
[data-paradigm="clinical-glass"] .bg-slate-950\/60 {
  background: rgba(14, 19, 30, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-paradigm="clinical-glass"] #mobile-top-bar,
[data-paradigm="clinical-glass"] #mobile-bottom-nav,
[data-paradigm="clinical-glass"] header {
  background: rgba(10, 13, 20, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ====================================================================
   4. PARADIGMA: MATERIAL YOU 3 FLUENT (Android 14/15 Nativo)
   Bordas 3xl expressivas, pílulas circulares, paleta dinâmica pastel
   ==================================================================== */
[data-paradigm="material-you"] {
  --bg-canvas: #111318;
  --bg-surface: #1B1D22;
  --bg-card: #22242A;
  --border-subtle: #2D3037;
  --border-focus: #A8C7FA;
  --text-high: #E2E2E6;
  --text-medium: #C4C6D0;
  --text-dim: #8E9099;
  --accent-primary: #A8C7FA;
  --accent-primary-text: #062E6F;
  --accent-secondary: #D0BCFF;
  --accent-sos: #F2B8B5;
  --accent-success: #C4EED0;
  --card-radius: 28px;
  --button-radius: 9999px;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --btn-shadow: 0 4px 14px rgba(168, 199, 250, 0.25);
  --btn-active-shadow: scale(0.96);
  --border-width: 1px;
  --backdrop-blur: 0px;
  --font-primary: 'Inter', Roboto, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', monospace;
}

[data-paradigm="material-you"] body,
[data-paradigm="material-you"] #mobile-app-root {
  background-color: var(--bg-canvas) !important;
  color: var(--text-high) !important;
  font-family: var(--font-primary) !important;
}

[data-paradigm="material-you"] .neuro-card,
[data-paradigm="material-you"] .bg-slate-900,
[data-paradigm="material-you"] .bg-slate-900\/90 {
  background-color: var(--bg-card) !important;
  border-radius: var(--card-radius) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--card-shadow) !important;
}

[data-paradigm="material-you"] .btn-primary,
[data-paradigm="material-you"] .touch-target:not(.neuro-card) {
  border-radius: var(--button-radius) !important;
}

/* ====================================================================
   5. PARADIGMA: BIONIC E-INK / PAPER MODE (Anti-Fadiga & Sandra Kooij)
   Bloqueio circadiano 480nm, contraste editorial, zero fadiga astênica
   ==================================================================== */
[data-paradigm="bionic-eink"] {
  --bg-canvas: #0E0F10;
  --bg-surface: #17181A;
  --bg-card: #1F2124;
  --border-subtle: #40444C;
  --border-focus: #FFFFFF;
  --text-high: #FFFFFF;
  --text-medium: #D0D4DC;
  --text-dim: #8E94A0;
  --accent-primary: #FFFFFF;
  --accent-primary-text: #000000;
  --accent-secondary: #A0A5B0;
  --accent-sos: #FFFFFF;
  --accent-success: #D0D4DC;
  --card-radius: 8px;
  --button-radius: 8px;
  --card-shadow: 3px 3px 0px #000000;
  --btn-shadow: 3px 3px 0px #000000;
  --btn-active-shadow: translate(2px, 2px);
  --border-width: 2px;
  --backdrop-blur: 0px;
  --font-primary: 'Atkinson Hyperlegible', serif, sans-serif;
  --font-mono: 'Fira Code', monospace;
}

[data-paradigm="bionic-eink"] body,
[data-paradigm="bionic-eink"] #mobile-app-root {
  background-color: #0E0F10 !important;
  color: #FFFFFF !important;
  font-family: var(--font-primary) !important;
}

[data-paradigm="bionic-eink"] .neuro-card,
[data-paradigm="bionic-eink"] .bg-slate-900,
[data-paradigm="bionic-eink"] .bg-slate-900\/90 {
  background-color: #17181A !important;
  border: 2px solid #40444C !important;
  border-radius: 8px !important;
  box-shadow: 3px 3px 0px #000000 !important;
}

[data-paradigm="bionic-eink"] .bg-slate-950,
[data-paradigm="bionic-eink"] .bg-slate-950\/60 {
  background-color: #0E0F10 !important;
  border: 1px solid #333842 !important;
}

[data-paradigm="bionic-eink"] .btn-primary {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 3px 3px 0px #000000 !important;
  border-radius: 8px !important;
}

[data-paradigm="bionic-eink"] #mobile-top-bar,
[data-paradigm="bionic-eink"] #mobile-bottom-nav,
[data-paradigm="bionic-eink"] header {
  background-color: #0E0F10 !important;
  border-color: #40444C !important;
}