/* ═══════════════════════════════════════════════════════════════════════════
 * AVR Flow Manager — Design tokens v2 (OKLCH)
 *
 * Principios (del DESIGN_SYSTEM.md):
 * - Paleta en OKLCH para escala perceptualmente uniforme
 * - Neutrales tintados hacia hue 28° (coral de marca)
 * - Chroma reducida cerca de extremos de luminosidad
 * - Danger diferenciado del coral de marca (hue 12° vs 28°)
 *
 * Compat: se mantienen los aliases antiguos (--accent, --border-color, etc.)
 * para no romper código legacy.
 * ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand coral (hue 28°) ── */
  --brand-50:  oklch(97% 0.015 28);
  --brand-100: oklch(92% 0.045 28);
  --brand-300: oklch(76% 0.135 28);
  --brand-500: oklch(63% 0.195 28);   /* #e94836 — color principal */
  --brand-600: oklch(56% 0.185 28);
  --brand-700: oklch(46% 0.165 28);

  /* Brand alpha (overlays semi-transparentes) */
  --brand-alpha-05: color-mix(in oklch, var(--brand-500) 5%, transparent);
  --brand-alpha-10: color-mix(in oklch, var(--brand-500) 10%, transparent);
  --brand-alpha-15: color-mix(in oklch, var(--brand-500) 15%, transparent);
  --brand-alpha-20: color-mix(in oklch, var(--brand-500) 20%, transparent);
  --brand-alpha-30: color-mix(in oklch, var(--brand-500) 30%, transparent);

  /* ── Superficies (dark, tintadas hacia coral) ── */
  --bg-canvas:    oklch(15% 0.008 28);
  --bg-primary:   oklch(19% 0.009 28);
  --bg-secondary: oklch(23% 0.010 28);
  --bg-tertiary:  oklch(28% 0.011 28);
  --bg-overlay:   oklch(33% 0.011 28);

  /* ── Borders ── */
  --border-subtle:  oklch(27% 0.009 28);
  --border-default: oklch(34% 0.012 28);
  --border-strong:  oklch(45% 0.015 28);
  --border-focus:   var(--brand-500);

  /* ── Texto ── */
  --text-primary:   oklch(94% 0.008 28);
  --text-secondary: oklch(68% 0.010 28);
  --text-muted:     oklch(52% 0.012 28);
  --text-on-brand:  oklch(98% 0 0);       /* no pure white */
  --text-link:      var(--brand-500);

  /* ── Semántica (hues separados del brand) ── */
  --color-success:    oklch(72% 0.18 150);
  --color-success-bg: color-mix(in oklch, var(--color-success) 14%, transparent);

  --color-warning:    oklch(78% 0.15 75);
  --color-warning-bg: color-mix(in oklch, var(--color-warning) 14%, transparent);

  --color-danger:     oklch(60% 0.22 12);   /* magenta-red, separado del coral */
  --color-danger-bg:  color-mix(in oklch, var(--color-danger) 14%, transparent);

  --color-info:       oklch(68% 0.15 230);
  --color-info-bg:    color-mix(in oklch, var(--color-info) 14%, transparent);

  /* Extras de categoría (para badges multi-canal / tipos de acción) */
  --color-purple:     oklch(65% 0.19 295);
  --color-teal:       oklch(70% 0.13 190);
  --color-pink:       oklch(68% 0.21 350);

  /* ── Aliases para retrocompat con CSS legacy ── */
  --accent:          var(--brand-500);
  --accent-hover:    var(--brand-600);
  --accent-primary:  var(--brand-500);
  --accent-success:  var(--color-success);
  --accent-warn:     var(--color-warning);
  --accent-warning:  var(--color-warning);
  --accent-danger:   var(--color-danger);
  --border-color:    var(--border-default);
  --border:          var(--border-default);
  --success:         var(--color-success);
  --warning:         var(--color-warning);
  --danger:          var(--color-danger);
  --purple:          var(--color-purple);
  --teal:            var(--color-teal);
  --pink:            var(--color-pink);

  /* ── Tipografía ── */
  --font-display: 'Clash Display', 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, Monaco, monospace;

  /* Escala modular ratio 1.25 (anchor 16px) */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.563rem;    /* 25px */
  --text-2xl:  1.953rem;    /* 31px */
  --text-3xl:  2.441rem;    /* 39px */

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ── Espacio (4pt base) ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Radius ── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Sombras (OKLCH-neutral, sin tintado) ── */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.22);
  --shadow-md: 0 2px 8px oklch(0% 0 0 / 0.32);
  --shadow:    0 2px 12px oklch(0% 0 0 / 0.32);
  --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.42);
  --shadow-xl: 0 16px 48px oklch(0% 0 0 / 0.52);
  --shadow-brand: 0 4px 16px color-mix(in oklch, var(--brand-500) 28%, transparent);

  /* ── Transiciones ── */
  --t-fast: 100ms ease;
  --t-base: 150ms ease;
  --t-slow: 250ms ease;
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Z-index scale ── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-sidebar:  300;
  --z-header:   400;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;

  /* ── Layout ── */
  --sidebar-width: 240px;
  --header-height: 64px;
}

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