/* ====================================================================
   NEUROTECH TDAH: 5 PARADIGMAS DE LAYOUT TRANSLACIONAIS EXPANDIDOS
   WCAG 2.1 AAA • Arnsten (HCN) • Barkley (POP) • Kooij (DLMO 480nm)
   1. Tactile Hardware | 2. Spatial Canvas | 3. Terminal TUI
   4. Bento Grid       | 5. Swiss Clinical Editorial
   ==================================================================== */

@import url("./paradigms/tactile.css");
@import url("./paradigms/spatial.css");
@import url("./paradigms/terminal.css");
@import url("./paradigms/bento.css");
@import url("./paradigms/editorial.css");

/* 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: TACTILE HARDWARE / CYBER NEUMORPHIC
   ==================================================================== */
:root, [data-paradigm="tactile"], [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: #FF5722;
  --accent-primary-text: #FFFFFF;
  --accent-secondary: #00E5FF;
  --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;
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Fira Code', monospace;
}

[data-paradigm="tactile"] body, [data-paradigm="cyber-neumorphic"] body,
[data-paradigm="tactile"] #mobile-app-root, [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="tactile"] .neuro-card, [data-paradigm="cyber-neumorphic"] .neuro-card,
[data-paradigm="tactile"] .bg-slate-900, [data-paradigm="cyber-neumorphic"] .bg-slate-900 {
  background-color: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
}

/* ====================================================================
   2. PARADIGMA: SPATIAL CANVAS / CLINICAL GLASS
   ==================================================================== */
[data-paradigm="spatial"], [data-paradigm="spatial-canvas"], [data-paradigm="clinical-glass"] {
  --bg-canvas: #090D16;
  --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: #38BDF8;
  --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);
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

[data-paradigm="spatial"] .neuro-card, [data-paradigm="clinical-glass"] .neuro-card {
  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;
}

/* ====================================================================
   3. PARADIGMA: TERMINAL TUI / OLED FOCUS
   ==================================================================== */
[data-paradigm="terminal"], [data-paradigm="oled-focus"] {
  --bg-canvas: #000000;
  --bg-surface: #070809;
  --bg-card: #0D0F12;
  --border-subtle: #1C2026;
  --border-focus: #FFB000;
  --text-high: #FFB000;
  --text-medium: #8892B0;
  --text-dim: #495670;
  --accent-primary: #FFB000;
  --accent-primary-text: #000000;
  --accent-secondary: #33FF77;
  --accent-sos: #FF3344;
  --accent-success: #33FF77;
  --card-radius: 0px;
  --button-radius: 0px;
  --card-shadow: none;
  --btn-shadow: none;
  --font-primary: 'Berkeley Mono', 'Fira Code', 'Atkinson Hyperlegible', monospace;
}

[data-paradigm="terminal"] body, [data-paradigm="oled-focus"] body,
[data-paradigm="terminal"] #mobile-app-root, [data-paradigm="oled-focus"] #mobile-app-root {
  background-color: #000000 !important;
  color: var(--text-high) !important;
  font-family: var(--font-primary) !important;
  font-variant-numeric: tabular-nums;
}

[data-paradigm="terminal"] .neuro-card, [data-paradigm="oled-focus"] .neuro-card {
  background-color: #070809 !important;
  border: 1px solid #1C2026 !important;
  border-radius: 0px !important;
  box-shadow: none !important;
}

[data-paradigm="terminal"] .btn-primary, [data-paradigm="oled-focus"] .btn-primary {
  background: #FFB000 !important;
  color: #000000 !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  font-weight: bold !important;
}

/* ====================================================================
   4. PARADIGMA: BENTO GRID / MATERIAL YOU 3
   ==================================================================== */
[data-paradigm="bento"], [data-paradigm="material-you"] {
  --bg-canvas: #0B0F19;
  --bg-surface: #131B2E;
  --bg-card: #182238;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-focus: #6366F1;
  --text-high: #F8FAFC;
  --text-medium: #94A3B8;
  --text-dim: #64748B;
  --accent-primary: #6366F1;
  --accent-primary-text: #FFFFFF;
  --accent-secondary: #EC4899;
  --accent-sos: #F43F5E;
  --accent-success: #10B981;
  --card-radius: 24px;
  --button-radius: 9999px;
  --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
  --btn-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-paradigm="bento"] body, [data-paradigm="material-you"] body,
[data-paradigm="bento"] #mobile-app-root, [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="bento"] .neuro-card, [data-paradigm="material-you"] .neuro-card {
  background-color: var(--bg-card) !important;
  border-radius: var(--card-radius) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--card-shadow) !important;
}

[data-paradigm="bento"] .btn-primary, [data-paradigm="material-you"] .btn-primary {
  background: var(--accent-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--button-radius) !important;
}

/* ====================================================================
   5. PARADIGMA: SWISS EDITORIAL / BIONIC E-INK
   ==================================================================== */
[data-paradigm="swiss"], [data-paradigm="editorial"], [data-paradigm="bionic-eink"] {
  --bg-canvas: #111215;
  --bg-surface: #17181D;
  --bg-card: #1D1E24;
  --border-subtle: #2A2C35;
  --border-focus: #D4AF37;
  --text-high: #EDECE8;
  --text-medium: #8E92A2;
  --text-dim: #5C6070;
  --accent-primary: #D4AF37;
  --accent-primary-text: #111215;
  --accent-secondary: #38BDF8;
  --accent-sos: #EF4444;
  --accent-success: #10B981;
  --card-radius: 4px;
  --button-radius: 4px;
  --card-shadow: 2px 2px 0px #000000;
  --btn-shadow: 2px 2px 0px #000000;
  --font-primary: 'Newsreader', 'Times New Roman', serif;
}

[data-paradigm="swiss"] body, [data-paradigm="bionic-eink"] body,
[data-paradigm="swiss"] #mobile-app-root, [data-paradigm="bionic-eink"] #mobile-app-root {
  background-color: var(--bg-canvas) !important;
  color: var(--text-high) !important;
}

[data-paradigm="swiss"] .neuro-card, [data-paradigm="bionic-eink"] .neuro-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-left: 3px solid var(--accent-primary) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
}

[data-paradigm="swiss"] .btn-primary, [data-paradigm="bionic-eink"] .btn-primary {
  background: var(--accent-primary) !important;
  color: var(--accent-primary-text) !important;
  border-radius: var(--button-radius) !important;
  font-weight: 700 !important;
}