:root {
  /* Color — fondos */
  --dialz-color-bg: #232323;
  --dialz-color-bg-soft: #2a2a2a;
  --dialz-color-bg-elevated: #303030;
  --dialz-color-canvas: #171717;

  /* Color — marca */
  --dialz-color-cream: #f0ece3;
  --dialz-color-teal: #24ada5;
  --dialz-color-teal-hover: #1f9790;

  /* Color — estados */
  --dialz-color-success: #4ac28a;
  --dialz-color-beta: #d6a84b;
  --dialz-color-warning: #d6a84b;
  --dialz-color-error: #e45d5d;

  /* Color — texto */
  --dialz-color-text: #f0ece3;
  --dialz-color-text-muted: rgba(240, 236, 227, 0.58);
  --dialz-color-text-low: rgba(240, 236, 227, 0.34);

  /* Color — bordes y superficies */
  --dialz-color-border: rgba(240, 236, 227, 0.10);
  --dialz-color-border-strong: rgba(240, 236, 227, 0.18);
  --dialz-color-active-soft: rgba(36, 173, 165, 0.07);
  --dialz-color-focus: #24ada5;

  /* Tipografía */
  --dialz-font-display: 'neue-haas-grotesk-display', 'Helvetica Neue', Arial, sans-serif;
  --dialz-font-text: 'neue-haas-grotesk-text', 'Helvetica Neue', Arial, sans-serif;
  --dialz-font-mono: 'DM Mono', 'SF Mono', Menlo, monospace;

  /* Espaciado */
  --dialz-space-1: 4px;
  --dialz-space-2: 8px;
  --dialz-space-3: 12px;
  --dialz-space-4: 16px;
  --dialz-space-5: 24px;
  --dialz-space-6: 32px;
  --dialz-space-7: 48px;
  --dialz-space-8: 64px;

  /* Radio */
  --dialz-radius-xs: 2px;
  --dialz-radius-sm: 4px;
  --dialz-radius-md: 6px;
  --dialz-radius-lg: 10px;
  --dialz-radius-pill: 999px;

  /* Controles */
  --dialz-control-h-sm: 36px;
  --dialz-control-h-md: 42px;
  --dialz-control-h-lg: 48px;
  --dialz-touch-target: 44px;

  /* Toggle */
  --dialz-toggle-w: 44px;
  --dialz-toggle-h: 24px;
  --dialz-toggle-thumb: 18px;
  --dialz-toggle-gap: 2px;

  /* Sliders */
  --dialz-slider-track-h: 5px;
  --dialz-slider-thumb-desktop: 20px;
  --dialz-slider-thumb-mobile: 24px;
  --dialz-slider-hit-area: 44px;

  /* Iconos */
  --dialz-icon-sm: 16px;
  --dialz-icon-md: 18px;
  --dialz-icon-lg: 20px;
  --dialz-icon-xl: 24px;

  /* Header */
  --dialz-header-h-desktop: 72px;
  --dialz-header-h-mobile: 64px;
  --dialz-logo-w-desktop: 108px;
  --dialz-logo-w-mobile: 86px;

  /* Layout */
  --dialz-shell-max: 1440px;
  --dialz-shell-form-max: 1040px;
  --dialz-sidebar-compact: 288px;
  --dialz-sidebar-normal: 336px;
  --dialz-shell-gap: 20px;

  /* Movimiento */
  --dialz-duration-fast: 120ms;
  --dialz-duration-base: 180ms;
  --dialz-duration-slow: 280ms;
  --dialz-duration-success: 2400ms;
  --dialz-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dialz-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Focus */
  --dialz-focus-width: 2px;
  --dialz-focus-offset: 2px;

  /* Breakpoints documentados: móvil 768px, tablet 1024px */
  --dialz-breakpoint-mobile: 768px;
  --dialz-breakpoint-tablet: 1024px;

  /* Z-index */
  --dialz-z-base: 0;
  --dialz-z-sticky: 20;
  --dialz-z-header: 40;
  --dialz-z-dropdown: 60;
  --dialz-z-modal: 100;
  --dialz-z-toast: 120;
  --dialz-z-tooltip: 140;
}