/* =============================================================
   DESIGN TOKENS · fuente única de verdad visual
   Los tokens --brand-* los inyecta assets/js/config/brand.js
   en tiempo de ejecución; acá quedan los valores por defecto.
   ============================================================= */
:root {
  /* ---- Marca (sobrescrito por brand.js) ---- */
  --brand-primary: #0E4A57;
  --brand-primary-dark: #0A363F;
  --brand-primary-light: #E7F1F3;
  --brand-accent: #17B3A3;
  --brand-accent-dark: #0F8F82;
  --brand-accent-light: #E2F7F4;
  --brand-highlight: #D99A4E;
  --brand-whatsapp: #25D366;

  /* ---- Tipografía ---- */
  --font-sans: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;

  --fs-display: clamp(2.1rem, 1.35rem + 3.2vw, 3.5rem);
  --fs-h1: clamp(1.85rem, 1.3rem + 2.4vw, 2.85rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --fs-h3: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --fs-lg: 1.0625rem;
  --fs-base: .9375rem;
  --fs-sm: .8125rem;
  --fs-xs: .75rem;
  --fs-2xs: .6875rem;

  --lh-tight: 1.12;
  --lh-snug: 1.32;
  --lh-base: 1.62;

  /* ---- Neutros ---- */
  --ink: #0F1B20;
  --ink-2: #35474E;
  --ink-3: #5E727A;
  --ink-4: #8A9AA1;
  --line: #E3EAED;
  --line-strong: #CBD8DD;
  --surface: #FFFFFF;
  --surface-2: #F7FAFB;
  --surface-3: #EEF4F6;
  --canvas: #F4F8F9;

  /* ---- Estados ---- */
  --ok: #12874A;      --ok-bg: #E4F5EB;   --ok-line: #B7E3C9;
  --warn: #B45309;    --warn-bg: #FEF3E2; --warn-line: #F6D9AE;
  --danger: #C0392E;  --danger-bg: #FDECEA; --danger-line: #F6C6C1;
  --info: #1D5FBF;    --info-bg: #E8F0FD; --info-line: #C2D8F7;
  --neutral-bg: #EEF2F4; --neutral-fg: #55666D;

  /* ---- Espaciado (escala 4) ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-7: 2rem;    --sp-8: 2.5rem;
  --sp-9: 3rem;    --sp-10: 4rem;   --sp-11: 5rem;   --sp-12: 6.5rem;

  /* ---- Radios ---- */
  --r-xs: 6px;  --r-sm: 9px;  --r-md: 13px;
  --r-lg: 18px; --r-xl: 26px; --r-full: 999px;

  /* ---- Sombras ---- */
  --sh-1: 0 1px 2px rgba(15,27,32,.05), 0 1px 3px rgba(15,27,32,.05);
  --sh-2: 0 2px 6px -2px rgba(15,27,32,.07), 0 8px 18px -6px rgba(15,27,32,.10);
  --sh-3: 0 4px 10px -4px rgba(15,27,32,.08), 0 18px 40px -12px rgba(15,27,32,.16);
  --sh-4: 0 24px 60px -18px rgba(15,27,32,.28);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* ---- Layout ---- */
  --wrap: 1180px;
  --wrap-narrow: 860px;
  --header-h: 74px;
  --sidebar-w: 252px;

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .15s var(--ease);
  --t-base: .25s var(--ease);
  --t-slow: .45s var(--ease-out);

  --z-sticky: 40;
  --z-header: 60;
  --z-drawer: 80;
  --z-modal: 100;
  --z-toast: 120;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}