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

/* ============================================
   Font size scaling
   Override EVERY element — Tailwind sets fixed px
   values via utility classes that don't inherit.
   ============================================ */
body.font-size-small { font-size: 14px !important; }
body.font-size-default { font-size: 16px !important; }
body.font-size-large { font-size: 18px !important; }
body.font-size-xlarge { font-size: 20px !important; }

/* Scale all Tailwind text utilities */
body.font-size-small *, body.font-size-large *, body.font-size-xlarge * {
  font-size: inherit !important;
}
/* Restore relative sizing for elements that need to be smaller/larger */
body.font-size-small h1, body.font-size-large h1, body.font-size-xlarge h1 { font-size: 1.5em !important; }
body.font-size-small h2, body.font-size-large h2, body.font-size-xlarge h2 { font-size: 1.25em !important; }
body.font-size-small h3, body.font-size-large h3, body.font-size-xlarge h3 { font-size: 1.1em !important; }
body.font-size-small .text-xs, body.font-size-large .text-xs, body.font-size-xlarge .text-xs { font-size: 0.75em !important; }
body.font-size-small .text-sm, body.font-size-large .text-sm, body.font-size-xlarge .text-sm { font-size: 0.875em !important; }
body.font-size-small .text-lg, body.font-size-large .text-lg, body.font-size-xlarge .text-lg { font-size: 1.125em !important; }
body.font-size-small .text-xl, body.font-size-large .text-xl, body.font-size-xlarge .text-xl { font-size: 1.25em !important; }
body.font-size-small .text-2xl, body.font-size-large .text-2xl, body.font-size-xlarge .text-2xl { font-size: 1.5em !important; }
body.font-size-small .text-base, body.font-size-large .text-base, body.font-size-xlarge .text-base { font-size: 1em !important; }

/* ---- 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;
  text-transform: uppercase;
  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;
  text-transform: uppercase;
  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;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px !important;
}

/* ---- 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);
}