/* ============================================
   Respoken Themes — loaded separately from Tailwind
   These override CSS custom properties and structural
   styles after Tailwind has compiled.
   ============================================ */

/* ---- THEME: GDL (default) ---- */
body.theme-gdl, body:not([class*="theme-"]) {
  --color-primary: #2C3E50;
  --color-accent: #2486AF;
  --color-accent-end: #27AE60;
  --color-surface: #ffffff;
  --color-background: #f3f6f5;
  --color-border: #d1d8e0;
  --color-border-input: #b8c2cc;
  --color-text: #343a40;
  --color-text-muted: #6c757d;
}

/* ---- THEME: Material Design 3 ---- */
body.theme-material {
  --color-primary: #1D1B20;
  --color-accent: #6750A4;
  --color-accent-end: #7DC4E4;
  --color-surface: #FFFBFE;
  --color-background: #FEF7FF;
  --color-border: #E7E0EC;
  --color-border-input: #CAC4D0;
  --color-text: #1D1B20;
  --color-text-muted: #79747E;
  --color-danger: #B3261E;
  font-family: "Roboto", "Inter", -apple-system, sans-serif !important;
  font-size: 14px;
  letter-spacing: 0.01em;
}
body.theme-material .bg-accent-gradient {
  background: #6750A4 !important;
  border-radius: 100px !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 13px;
}
body.theme-material aside {
  background: #F3EDF7 !important;
  border-color: transparent !important;
}
body.theme-material .rounded-xl,
body.theme-material .rounded-2xl {
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04) !important;
  border-color: transparent !important;
}
body.theme-material input,
body.theme-material textarea,
body.theme-material select {
  border-radius: 8px 8px 0 0 !important;
  border: none !important;
  border-bottom: 2px solid #CAC4D0 !important;
  background: #F7F2FA !important;
}
body.theme-material input:focus,
body.theme-material textarea:focus,
body.theme-material select:focus {
  border-bottom-color: #6750A4 !important;
}
body.theme-material .glass-header {
  background: rgba(254, 247, 255, 0.95) !important;
}
body.theme-material h2, body.theme-material h3 {
  font-weight: 400;
}

/* ---- THEME: Material Nordic ---- */
/* Material Design 3 structure (pill buttons, elevated surfaces,
   bottom-border inputs) with Nordic palette (navy, sky blue, crisp white) */
body.theme-material-nordic {
  --color-primary: #0F172A;
  --color-accent: #0EA5E9;
  --color-accent-end: #06B6D4;
  --color-surface: #FFFFFF;
  --color-background: #F8FAFC;
  --color-border: #E2E8F0;
  --color-border-input: #CBD5E1;
  --color-text: #0F172A;
  --color-text-muted: #64748B;
  --color-danger: #EF4444;
  font-family: "Inter", "Helvetica Neue", -apple-system, sans-serif !important;
  font-size: 14px;
  letter-spacing: 0.005em;
}
body.theme-material-nordic .bg-accent-gradient {
  background: #0EA5E9 !important;
  border-radius: 100px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 13px;
}
body.theme-material-nordic aside {
  background: #FFFFFF !important;
  border-color: transparent !important;
}
body.theme-material-nordic .rounded-xl,
body.theme-material-nordic .rounded-2xl {
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.03) !important;
  border-color: transparent !important;
}
body.theme-material-nordic input,
body.theme-material-nordic textarea,
body.theme-material-nordic select {
  border-radius: 8px 8px 0 0 !important;
  border: none !important;
  border-bottom: 2px solid #CBD5E1 !important;
  background: #F8FAFC !important;
}
body.theme-material-nordic input:focus,
body.theme-material-nordic textarea:focus,
body.theme-material-nordic select:focus {
  border-bottom-color: #0EA5E9 !important;
}
body.theme-material-nordic .glass-header {
  background: rgba(248, 250, 252, 0.95) !important;
}
body.theme-material-nordic h2 {
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
body.theme-material-nordic h3 {
  font-weight: 600;
}

/* ---- THEME: Ink (dark writer's desk) ---- */
body.theme-ink {
  --color-primary: #F0E6D3;
  --color-accent: #D4A843;
  --color-accent-end: #C77D3A;
  --color-surface: #2A2520;
  --color-background: #1E1A16;
  --color-border: #3D3630;
  --color-border-input: #524A42;
  --color-text: #DDD5C8;
  --color-text-muted: #9E9488;
  --color-danger: #CF6679;
  font-family: "Georgia", "Palatino", serif !important;
  font-size: 17px;
  line-height: 1.75;
}
body.theme-ink .bg-accent-gradient {
  background: linear-gradient(135deg, #D4A843 0%, #C77D3A 100%) !important;
}
body.theme-ink aside {
  background: #252018 !important;
  border-color: #3D3630 !important;
}
body.theme-ink .rounded-xl,
body.theme-ink .rounded-2xl {
  background-color: #2A2520 !important;
  border-color: #3D3630 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
body.theme-ink input,
body.theme-ink textarea,
body.theme-ink select {
  background: #332E28 !important;
  border-color: #524A42 !important;
  color: #DDD5C8 !important;
  font-family: "Georgia", serif !important;
}
body.theme-ink input::placeholder,
body.theme-ink textarea::placeholder {
  color: #7A7268 !important;
  font-style: italic;
}
body.theme-ink .glass-header {
  background: rgba(30, 26, 22, 0.95) !important;
}
body.theme-ink .animate-slide-in {
  background-color: #2A2520 !important;
}
body.theme-ink a { color: #D4A843; }
body.theme-ink button { color: #DDD5C8; }

/* ---- THEME: Nordic ---- */
body.theme-nordic {
  --color-primary: #0F172A;
  --color-accent: #0EA5E9;
  --color-accent-end: #06B6D4;
  --color-surface: #FFFFFF;
  --color-background: #F8FAFC;
  --color-border: #E2E8F0;
  --color-border-input: #CBD5E1;
  --color-text: #0F172A;
  --color-text-muted: #64748B;
  --color-danger: #EF4444;
  font-family: "Inter", "Helvetica Neue", -apple-system, sans-serif !important;
  font-size: 14px;
  letter-spacing: -0.005em;
}
body.theme-nordic .bg-accent-gradient {
  background: #0EA5E9 !important;
  border-radius: 4px !important;
  font-weight: 600;
}
body.theme-nordic .rounded-xl { border-radius: 4px !important; }
body.theme-nordic .rounded-2xl { border-radius: 6px !important; }
body.theme-nordic .rounded-lg { border-radius: 3px !important; }
body.theme-nordic .rounded-xl,
body.theme-nordic .rounded-2xl {
  box-shadow: none !important;
}
body.theme-nordic aside {
  background: #FFFFFF !important;
}
body.theme-nordic input,
body.theme-nordic textarea,
body.theme-nordic select {
  border-radius: 3px !important;
  font-size: 13px;
}
body.theme-nordic h2 {
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}
body.theme-nordic h3 {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* ---- THEME: Neumorphic ---- */
body.theme-neumorph {
  --color-primary: #3D3D3D;
  --color-accent: #2B9E9E;
  --color-accent-end: #5BB5A2;
  --color-surface: #E4E0DB;
  --color-background: #DDD8D3;
  --color-border: transparent;
  --color-border-input: transparent;
  --color-text: #3D3D3D;
  --color-text-muted: #7A7570;
  --color-danger: #D05050;
}
body.theme-neumorph .bg-accent-gradient {
  background: linear-gradient(135deg, #2B9E9E 0%, #5BB5A2 100%) !important;
  box-shadow: 4px 4px 8px rgba(0,0,0,0.12), -4px -4px 8px rgba(255,255,255,0.5);
  border-radius: 14px !important;
}
body.theme-neumorph .glass-header {
  background: rgba(228, 224, 219, 0.95) !important;
}
body.theme-neumorph aside {
  background: #DDD8D3 !important;
  border-color: transparent !important;
  box-shadow: 4px 0 12px rgba(0,0,0,0.05);
}
body.theme-neumorph .rounded-xl,
body.theme-neumorph .rounded-2xl {
  background: #E4E0DB !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 8px 8px 16px rgba(0,0,0,0.1), -8px -8px 16px rgba(255,255,255,0.7) !important;
}
body.theme-neumorph input,
body.theme-neumorph textarea,
body.theme-neumorph select {
  background: #DDD8D3 !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: inset 4px 4px 8px rgba(0,0,0,0.08), inset -4px -4px 8px rgba(255,255,255,0.6) !important;
}
body.theme-neumorph button[class*="border-border"] {
  border: none !important;
  box-shadow: 3px 3px 6px rgba(0,0,0,0.08), -3px -3px 6px rgba(255,255,255,0.6);
}

/* -------------------------------------------------------------------------
   Echo review cards (right panel) — `public/themes.css` is loaded after the
   Tailwind bundle, so these !important rules beat theme + utility overrides.
   Light fill + same-hue header/icon via structure classes from EchoCompanion.
   ------------------------------------------------------------------------- */
.echo-panel-card {
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

.echo-panel-card[data-echo-tone="info"] {
  background-color: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-left: 4px solid #0284c7 !important;
  box-shadow: 0 1px 2px rgba(14, 165, 233, 0.07) !important;
}
.echo-panel-card[data-echo-tone="info"] .echo-panel-card__heading {
  color: #0369a1 !important;
}
.echo-panel-card[data-echo-tone="info"] .echo-panel-card__body {
  color: #475569 !important;
}

.echo-panel-card[data-echo-tone="strength"] {
  background-color: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  border-left: 4px solid #059669 !important;
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.07) !important;
}
.echo-panel-card[data-echo-tone="strength"] .echo-panel-card__heading {
  color: #047857 !important;
}
.echo-panel-card[data-echo-tone="strength"] .echo-panel-card__body {
  color: #475569 !important;
}

.echo-panel-card[data-echo-tone="risk"] {
  background-color: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  border-left: 4px solid #ea580c !important;
  box-shadow: 0 1px 2px rgba(234, 88, 12, 0.07) !important;
}
.echo-panel-card[data-echo-tone="risk"] .echo-panel-card__heading {
  color: #c2410c !important;
}
.echo-panel-card[data-echo-tone="risk"] .echo-panel-card__body {
  color: #57534e !important;
}

/* Ink: keep cards reading as light paper on the dark chrome */
body.theme-ink .echo-panel-card[data-echo-tone="info"] {
  background-color: #f0f9ff !important;
  border-color: #7dd3fc !important;
  border-left-color: #0284c7 !important;
}
body.theme-ink .echo-panel-card[data-echo-tone="strength"] {
  background-color: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
  border-left-color: #059669 !important;
}
body.theme-ink .echo-panel-card[data-echo-tone="risk"] {
  background-color: #fff7ed !important;
  border-color: #fdba74 !important;
  border-left-color: #ea580c !important;
}