/* Lyncia shared color tokens — light default, dark via system or data-theme */

:root {
  /* Desktop interaction. --focus-ring stays the soft halo inputs already use;
     --focus-outline is the solid keyboard indicator (2px perimeter, 3:1). */
  --focus-ring: rgba(11, 87, 208, 0.18);
  --focus-outline: #0b57d0;
  --focus-ring-offset: 2px;
  --surface-hover: #eef2f8;
  --row-hover: #f2f6fc;
  --primary: #0b57d0;
  --primary-dark: #00348a;
  --primary-hover: #0a4bb4;
  --primary-light: #eaf1ff;
  --primary-gradient-end: #3b82f6;
  --primary-mid: #0b57d0;
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --accent-light: #ffe7b8;
  --accent-text: #6b3d00;
  --accent-border: #fcd34d;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-muted: #eef2f8;
  --surface-container: #e6ecf6;
  --surface-elevated: #ffffff;
  --border: #d8e0ec;
  --border-strong: #bcc8d9;
  --border-light: #eaeff6;
  --text: #101828;
  --text-secondary: #3a4557;
  --text-muted: #4a5567;
  --text-subtle: #647084;
  --success: #0f7b3f;
  --success-bg: #d9f5e4;
  --success-border: #a7e3c0;
  --danger: #c0341d;
  --danger-bg: #fde4df;
  --danger-border: #f5b8ad;
  --danger-bg-hover: #fee2e2;
  --whatsapp: #25d366;
  --whatsapp-hover: #1da851;
  --whatsapp-bg: #ecfdf5;
  --whatsapp-text: #047857;
  --whatsapp-bubble-bg: #e7fce8;
  --whatsapp-bubble-border: #bbf7d0;
  --whatsapp-bubble-text: #14532d;
  --on-primary: #ffffff;
  --on-danger: #ffffff;
  --on-whatsapp: #04310f;
  --mock-frame: #0f172a;
  --hero-gradient-mid: #1e40af;
  --hero-gradient-end: #172554;
  --header-scrim: rgba(255, 255, 255, 0.92);
  --footer-bg: #0f172a;
  --footer-text: #94a3b8;
  --footer-heading: #ffffff;
  --ripple: rgba(11, 87, 208, 0.12);
  --chip-hover: var(--surface-container);
  --unread-fade: rgba(29, 78, 216, 0.04);
  --spinner-track: rgba(255, 255, 255, 0.35);
  --knob-shadow: rgba(0, 0, 0, 0.18);
  --hero-mock-shadow: rgba(15, 23, 42, 0.2);
  --hero-overlay-88: rgba(255, 255, 255, 0.88);
  --hero-overlay-92: rgba(255, 255, 255, 0.92);
  --hero-logo-bg: rgba(255, 255, 255, 0.16);
  --hero-logo-border: rgba(255, 255, 255, 0.22);
  --hero-check-bg: rgba(255, 255, 255, 0.18);
  --hero-orb: rgba(255, 255, 255, 0.08);
  --hero-orb-dim: rgba(255, 255, 255, 0.06);
  --hero-mock-bg: rgba(255, 255, 255, 0.12);
  --hero-mock-border: rgba(255, 255, 255, 0.2);
  --hero-mock-bar: rgba(255, 255, 255, 0.55);
  --hero-mock-line: rgba(255, 255, 255, 0.28);
  --hero-mock-pill: rgba(255, 255, 255, 0.22);
  --shadow-rgb: 15, 23, 42;
  --primary-shadow: rgba(29, 78, 216, 0.35);
  --whatsapp-shadow: rgba(37, 211, 102, 0.35);
  --toggle-knob: #ffffff;
  --logo-bg: transparent;

  --brand: var(--primary);
  --brand-hover: var(--primary-hover);
  --brand-light: var(--primary-light);
  --surface-alt: var(--surface-muted);

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --focus-ring: rgba(168, 199, 250, 0.22);
  --focus-outline: #a8c7fa;
  --focus-ring-offset: 2px;
  --surface-hover: #1c242f;
  --row-hover: #1a222d;
    --primary: #a8c7fa;
    --primary-dark: #d3e2ff;
    --primary-hover: #c2d9ff;
    --primary-light: #1b2637;
    --primary-gradient-end: #3b82f6;
    --primary-mid: #a8c7fa;
    --accent: #fbbf24;
    --accent-hover: #f59e0b;
    --accent-light: #4a2e00;
    --accent-text: #ffdfa0;
    --accent-border: #b45309;
    --bg: #0e131b;
    --surface: #151b25;
    --surface-muted: #1c242f;
    --surface-container: #212a36;
    --surface-elevated: #1c242f;
    --border: #2f3a49;
    --border-strong: #455263;
    --border-light: #232c38;
    --text: #e7edf5;
    --text-secondary: #c2ccdb;
    --text-muted: #a6b2c4;
    --text-subtle: #7d8b9e;
    --success: #5bd98b;
    --success-bg: #123a24;
    --success-border: #1d5537;
    --danger: #ff9182;
    --danger-bg: #4a1b14;
    --danger-border: #6d2a20;
    --danger-bg-hover: #991b1b;
    --whatsapp: #25d366;
    --whatsapp-hover: #1da851;
    --whatsapp-bg: #14532d;
    --whatsapp-text: #86efac;
    --whatsapp-bubble-bg: #14532d;
    --whatsapp-bubble-border: #166534;
    --whatsapp-bubble-text: #bbf7d0;
    --on-primary: #00306e;
    --on-danger: #3b0906;
    --on-whatsapp: #04310f;
    --mock-frame: #020617;
    --hero-gradient-mid: #1e3a8a;
    --hero-gradient-end: #0b1220;
    --header-scrim: rgba(17, 24, 39, 0.92);
    --footer-bg: #020617;
    --footer-text: #94a3b8;
    --footer-heading: #f1f5f9;
    --ripple: rgba(168, 199, 250, 0.16);
    --unread-fade: rgba(96, 165, 250, 0.08);
    --hero-mock-shadow: rgba(0, 0, 0, 0.35);
    --shadow-rgb: 0, 0, 0;
    --primary-shadow: rgba(96, 165, 250, 0.25);
    --whatsapp-shadow: rgba(37, 211, 102, 0.3);
    --toggle-knob: #f8fafc;
    --logo-bg: rgba(255, 255, 255, 0.06);

    --slate-50: #0b1220;
    --slate-100: #111827;
    --slate-200: #1f2937;
    --slate-300: #334155;
    --slate-400: #475569;
    --slate-500: #64748b;
    --slate-600: #94a3b8;
    --slate-700: #cbd5e1;
    --slate-800: #e2e8f0;
    --slate-900: #f1f5f9;
  }
}

:root[data-theme="dark"] {
  --focus-ring: rgba(168, 199, 250, 0.22);
  --focus-outline: #a8c7fa;
  --focus-ring-offset: 2px;
  --surface-hover: #1c242f;
  --row-hover: #1a222d;
  --primary: #a8c7fa;
  --primary-dark: #d3e2ff;
  --primary-hover: #c2d9ff;
  --primary-light: #1b2637;
  --primary-gradient-end: #3b82f6;
  --primary-mid: #a8c7fa;
  --accent: #fbbf24;
  --accent-hover: #f59e0b;
  --accent-light: #4a2e00;
  --accent-text: #ffdfa0;
  --accent-border: #b45309;
  --bg: #0e131b;
  --surface: #151b25;
  --surface-muted: #1c242f;
  --surface-container: #212a36;
  --surface-elevated: #1c242f;
  --border: #2f3a49;
  --border-strong: #455263;
  --border-light: #232c38;
  --text: #e7edf5;
  --text-secondary: #c2ccdb;
  --text-muted: #a6b2c4;
  --text-subtle: #7d8b9e;
  --success: #5bd98b;
  --success-bg: #123a24;
  --success-border: #1d5537;
  --danger: #ff9182;
  --danger-bg: #4a1b14;
  --danger-border: #6d2a20;
  --danger-bg-hover: #991b1b;
  --whatsapp: #25d366;
  --whatsapp-hover: #1da851;
  --whatsapp-bg: #14532d;
  --whatsapp-text: #86efac;
  --whatsapp-bubble-bg: #14532d;
  --whatsapp-bubble-border: #166534;
  --whatsapp-bubble-text: #bbf7d0;
  --on-primary: #00306e;
  --on-danger: #3b0906;
  --on-whatsapp: #04310f;
  --mock-frame: #020617;
  --hero-gradient-mid: #1e3a8a;
  --hero-gradient-end: #0b1220;
  --header-scrim: rgba(17, 24, 39, 0.92);
  --footer-bg: #020617;
  --footer-text: #94a3b8;
  --footer-heading: #f1f5f9;
  --ripple: rgba(168, 199, 250, 0.16);
  --unread-fade: rgba(96, 165, 250, 0.08);
  --hero-mock-shadow: rgba(0, 0, 0, 0.35);
  --shadow-rgb: 0, 0, 0;
  --primary-shadow: rgba(96, 165, 250, 0.25);
  --whatsapp-shadow: rgba(37, 211, 102, 0.3);
  --toggle-knob: #f8fafc;
  --logo-bg: rgba(255, 255, 255, 0.06);

  --slate-50: #0b1220;
  --slate-100: #111827;
  --slate-200: #1f2937;
  --slate-300: #334155;
  --slate-400: #475569;
  --slate-500: #64748b;
  --slate-600: #94a3b8;
  --slate-700: #cbd5e1;
  --slate-800: #e2e8f0;
  --slate-900: #f1f5f9;
}

.brand-logo {
  background: var(--logo-bg);
  border-radius: 8px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  line-height: 0;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background var(--transition, 180ms ease), border-color var(--transition, 180ms ease);
}

.theme-toggle:hover {
  background: var(--surface-muted);
  border-color: var(--border-strong);
}

.theme-toggle svg {
  display: block;
}

.theme-mode-toggle {
  margin-top: 8px;
}

.theme-mode-btn {
  flex: 1;
  min-height: 44px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.theme-mode-btn.active {
  background: var(--brand);
  color: var(--on-primary);
  box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.06);
}

.segmented .theme-mode-btn.active {
  background: var(--brand);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(var(--shadow-rgb), 0.06));
}