/* =========================================================================
   Enfoque Estratégico · Tokens de diseño (modo claro / oscuro)
   Regla: ningún componente usa colores literales; todo sale de estas variables.
   El tema se fija con <html data-theme="light|dark"> (script inline en _Layout,
   preferencia guardada en localStorage). Sin JS se respeta prefers-color-scheme.
   ========================================================================= */

:root {
  color-scheme: light;

  /* Superficies */
  --bg: #f5f9fd;
  --bg-glow: radial-gradient(circle at 15% -10%, #eaf5ff 0, transparent 32%);
  --surface: #ffffff;
  --surface-2: #f7fafc;
  --surface-3: #edf3f8;
  --surface-sunken: #fbfdff;
  --surface-hover: #f4f9fd;
  --surface-selected: #eaf5ff;
  --overlay: rgba(7, 26, 43, .60);
  --glass-bg: rgba(9, 41, 68, .85);
  --glass-border: rgba(255, 255, 255, .15);
  --grid-line: rgba(255, 255, 255, .03);

  /* Texto */
  --text: #0d2741;
  --text-muted: #5a7188;
  --text-subtle: #7b8ea1;
  --text-on-brand: #ffffff;
  --text-link: #0a63c9;

  /* Bordes y foco */
  --border: #d9e5ef;
  --border-subtle: #edf2f6;
  --border-strong: #b9cddd;
  --focus-ring: 0 0 0 3px rgba(8, 118, 231, .22);

  /* Marca */
  --brand-navy: #092c4b;
  --brand-navy-900: #031c31;
  --brand-ink: #0d273e;
  --brand-blue: #0876e7;
  --brand-blue-600: #0758cb;
  --brand-blue-700: #075ebf;
  --brand-cyan: #17b9ee;
  --brand-red: #c8102e;
  --brand-purple: #7047eb;
  --hero-highlight: #1db8ee;
  --hero-ai: #b68cff;

  --gradient-primary: linear-gradient(135deg, #0758cb, #0b6fd8);
  --gradient-primary-hover: linear-gradient(135deg, #064fb6, #0a63c4);
  --gradient-step-active: linear-gradient(110deg, #0b80ee, #0758cb);
  --gradient-hero: linear-gradient(100deg, #031c31 0%, #073150 62%, #0b567c 100%);
  --gradient-footer: linear-gradient(90deg, #061f35, #072c4b);
  --gradient-soft: linear-gradient(135deg, #f8fcff, #eef7ff);
  --gradient-ai: linear-gradient(135deg, #7047eb, #0876e7);

  /* Navegación */
  --nav-bg: var(--surface);
  --nav-border: #dfe8ef;
  --nav-item: #173650;
  --nav-item-hover-bg: #eef6ff;
  --nav-item-hover: #086ad5;
  --nav-active-bg: #092c4b;
  --nav-active-fg: #ffffff;
  --step-bg: #edf3f8;
  --step-num-bg: #dce7f0;
  --step-num-fg: #173650;
  --step-small: #5f7487;

  /* Estados */
  --success: #16a36d;
  --success-bg: #dcf7e9;
  --success-fg: #087f4e;
  --warning: #f59e0b;
  --warning-bg: #fff3d8;
  --warning-fg: #8a5800;
  --danger: #ef4444;
  --danger-bg: #fff0f2;
  --danger-fg: #b9102b;
  --info: #0876e7;
  --info-bg: #eaf5ff;
  --info-fg: #075ebf;
  --ai: #7047eb;
  --ai-bg: #f2ecff;
  --ai-fg: #5b34d1;

  /* Gráficas */
  --chart-1: #0877e8;
  --chart-2: #12b86a;
  --chart-3: #7047eb;
  --chart-4: #f59e0b;
  --chart-5: #d9329c;
  --chart-6: #18aee3;
  --chart-7: #ef4444;
  --chart-8: #0db8ae;
  --chart-grid: #edf3f7;
  --chart-axis: #70849a;
  --chart-track: #e9f0f5;
  --chart-point-fill: #ffffff;

  /* Canales (marca) */
  --ch-whatsapp: #12b86a;
  --ch-instagram: #d9329c;
  --ch-facebook: #1474df;
  --ch-webchat: #18aee3;
  --ch-email: #ef4444;

  /* Cadena "Así hacemos visible tu empresa" */
  --chain-0: #344c63;
  --chain-1: #0a71e8;
  --chain-2: #0879ea;
  --chain-3: #0874e6;
  --chain-4: #096bdc;
  --chain-5: #175bd7;
  --chain-6: #343fd5;
  --chain-7: #7624e6;

  --toast-bg: #0b263d;
  --toast-fg: #ffffff;

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(11, 38, 61, .05);
  --shadow-sm: 0 4px 12px rgba(11, 38, 61, .06);
  --shadow-md: 0 10px 28px rgba(11, 38, 61, .09);
  --shadow-lg: 0 24px 70px rgba(8, 34, 54, .12);
  --shadow-modal: 0 30px 90px rgba(3, 31, 52, .34);
  --shadow-primary: 0 9px 24px rgba(11, 115, 224, .18);

  /* Tipografía */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 27px;
  --fs-hero: clamp(30px, 2.2vw + 12px, 42px);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;

  /* Radios */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --gutter: clamp(16px, 3.1vw, 48px);

  /* Capas */
  --z-raised: 2;
  --z-sticky: 20;
  --z-footer: 40;
  --z-nav: 50;
  --z-dropdown: 60;
  --z-drawer: 80;
  --z-overlay: 90;
  --z-modal: 100;
  --z-toast: 110;

  /* Medidas del shell */
  --nav-h: 70px;
  --sidebar-w: 255px;
  --hit: 40px;

  --transition: 160ms ease;
}

/* Tema oscuro: se aplica si el usuario lo eligió, o si el sistema lo prefiere y no eligió claro. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #07131f;
  --bg-glow: radial-gradient(circle at 15% -10%, rgba(23, 185, 238, .08) 0, transparent 32%);
  --surface: #0d1f30;
  --surface-2: #12293e;
  --surface-3: #163049;
  --surface-sunken: #0a1926;
  --surface-hover: #132c44;
  --surface-selected: #0f3150;
  --overlay: rgba(0, 6, 12, .72);
  --glass-bg: rgba(3, 17, 31, .80);
  --glass-border: rgba(255, 255, 255, .12);
  --grid-line: rgba(255, 255, 255, .025);

  --text: #e6f0f8;
  --text-muted: #93a9bc;
  --text-subtle: #7f98ad;
  --text-on-brand: #ffffff;
  --text-link: #5aa7ff;

  --border: #20384b;
  --border-subtle: #182d3f;
  --border-strong: #4e6f8c;
  --focus-ring: 0 0 0 3px rgba(59, 147, 245, .45);

  --brand-navy: #1b4a74;
  --brand-navy-900: #020d18;
  --brand-ink: #e6f0f8;
  --brand-blue: #3b93f5;
  --brand-blue-600: #0b6fd8;
  --brand-blue-700: #0758cb;
  --brand-cyan: #38c6f4;
  --brand-red: #ff5c70;
  --brand-purple: #9b7bff;
  --hero-highlight: #38c6f4;
  --hero-ai: #c4b2ff;

  --gradient-primary: linear-gradient(135deg, #0758cb, #0b6fd8);
  --gradient-primary-hover: linear-gradient(135deg, #0a63d6, #1a7be6);
  --gradient-step-active: linear-gradient(110deg, #0b6fd8, #0a4fae);
  --gradient-hero: linear-gradient(100deg, #020d18 0%, #06243d 62%, #0a4566 100%);
  --gradient-footer: linear-gradient(90deg, #03111f, #062038);
  --gradient-soft: linear-gradient(135deg, #102639, #0f2c46);
  --gradient-ai: linear-gradient(135deg, #6b4ae0, #1f7fe6);

  --nav-bg: #0b1a29;
  --nav-border: #1a3045;
  --nav-item: #c9d8e6;
  --nav-item-hover-bg: #12293e;
  --nav-item-hover: #5aa7ff;
  --nav-active-bg: #1b4a74;
  --nav-active-fg: #ffffff;
  --step-bg: #10263a;
  --step-num-bg: #1a3550;
  --step-num-fg: #d3e2ef;
  --step-small: #93a9bc;

  --success: #2fd08f;
  --success-bg: rgba(47, 208, 143, .14);
  --success-fg: #5ee0a9;
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, .14);
  --warning-fg: #fcd34d;
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, .14);
  --danger-fg: #fca5a5;
  --info: #3b93f5;
  --info-bg: rgba(59, 147, 245, .16);
  --info-fg: #8cc2ff;
  --ai: #9b7bff;
  --ai-bg: rgba(155, 123, 255, .16);
  --ai-fg: #c4b2ff;

  --chart-1: #3b93f5;
  --chart-2: #2fd08f;
  --chart-3: #9b7bff;
  --chart-4: #fbbf24;
  --chart-5: #f062b8;
  --chart-6: #4cc9f0;
  --chart-7: #f87171;
  --chart-8: #2dd4bf;
  --chart-grid: #1c3448;
  --chart-axis: #93a9bc;
  --chart-track: #1a3247;
  --chart-point-fill: #0d1f30;

  --ch-whatsapp: #2fd08f;
  --ch-instagram: #f062b8;
  --ch-facebook: #4f8ff7;
  --ch-webchat: #4cc9f0;
  --ch-email: #f87171;

  --toast-bg: #e6f0f8;
  --toast-fg: #0d2741;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, .35);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .55);
  --shadow-modal: 0 30px 90px rgba(0, 0, 0, .6);
  --shadow-primary: 0 9px 24px rgba(11, 111, 216, .35);
}

/* Sin JavaScript: respetar la preferencia del sistema (mismos valores que [data-theme="dark"]). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #07131f;
    --surface: #0d1f30;
    --surface-2: #12293e;
    --surface-3: #163049;
    --surface-sunken: #0a1926;
    --surface-hover: #132c44;
    --surface-selected: #0f3150;
    --text: #e6f0f8;
    --text-muted: #93a9bc;
    --text-subtle: #7f98ad;
    --text-link: #5aa7ff;
    --border: #20384b;
    --border-subtle: #182d3f;
    --border-strong: #4e6f8c;
    --nav-bg: #0b1a29;
    --nav-border: #1a3045;
    --nav-item: #c9d8e6;
    --nav-active-bg: #1b4a74;
    --step-bg: #10263a;
    --step-num-bg: #1a3550;
    --step-num-fg: #d3e2ef;
    --step-small: #93a9bc;
    --brand-blue: #3b93f5;
  }
}