/* TallerStatus — tokens de diseño v1.0 (paquete de rediseño). Todos los colores, espacios y tamaños viven aquí. */
:root {
  color-scheme: light;

  /* Brand */
  --ts-navy-950: #0B1422;
  --ts-navy-900: #102033;
  --ts-navy-800: #18324B;
  --ts-blue-700: #20527A;
  --ts-blue-600: #286A98;
  --ts-blue-100: #E7F1F8;
  --ts-green-700: #16804A;
  --ts-green-600: #1C9A5A;
  --ts-green-100: #E6F6EC;
  --ts-amber-700: #9A5A08;
  --ts-amber-500: #E9A23B;
  --ts-amber-100: #FFF4DE;
  --ts-red-700: #B42318;
  --ts-red-100: #FDEAE8;

  /* Surfaces and text */
  --ts-bg: #F4F7FA;
  --ts-surface: #FFFFFF;
  --ts-surface-muted: #EEF2F6;
  --ts-border: #D8E0E8;
  --ts-text: #172331;
  --ts-text-muted: #5C6B7A;
  --ts-text-inverse: #FFFFFF;
  --ts-focus: #55B5ED;

  /* Typography */
  --ts-font-sans: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ts-text-xs: 0.75rem;
  --ts-text-sm: 0.875rem;
  --ts-text-md: 1rem;
  --ts-text-lg: 1.125rem;
  --ts-heading-sm: 1.25rem;
  --ts-heading-md: 1.5rem;
  --ts-heading-lg: clamp(1.75rem, 2.4vw, 2.25rem);
  --ts-line-tight: 1.2;
  --ts-line-normal: 1.5;

  /* 4 px spacing scale */
  --ts-space-1: 0.25rem;
  --ts-space-2: 0.5rem;
  --ts-space-3: 0.75rem;
  --ts-space-4: 1rem;
  --ts-space-5: 1.25rem;
  --ts-space-6: 1.5rem;
  --ts-space-8: 2rem;
  --ts-space-10: 2.5rem;
  --ts-space-12: 3rem;
  --ts-space-16: 4rem;

  /* Shape, depth, motion */
  --ts-radius-sm: 0.5rem;
  --ts-radius-md: 0.75rem;
  --ts-radius-lg: 1rem;
  --ts-radius-xl: 1.25rem;
  --ts-radius-pill: 999px;
  --ts-shadow-card: 0 1px 3px rgb(16 32 51 / 8%), 0 6px 20px rgb(16 32 51 / 4%);
  --ts-shadow-popover: 0 12px 32px rgb(11 20 34 / 18%);
  --ts-duration-fast: 120ms;
  --ts-duration-normal: 200ms;
  --ts-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --ts-sidebar-width: 16rem;
  --ts-sidebar-collapsed: 5rem;
  --ts-header-height: 4rem;
  --ts-content-max: 90rem;
  --ts-touch-target: 2.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 3px solid var(--ts-focus); outline-offset: 2px; }

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