/* ==========================================================================
   Tesela · Design tokens (tema oscuro) — prefijo técnico --x-* se conserva
   Cargar DESPUÉS del tema Freya. Todos los componentes de Tesela leen de aquí.
   ========================================================================== */
:root {
  /* Superficies y bordes */
  --x-bg:               #0F131A;  /* fondo de página */
  --x-surface-1:        #151A23;  /* paneles laterales / panel de marca */
  --x-surface-2:        #171C26;  /* tarjetas */
  --x-surface-3:        #1C2230;  /* tarjetas kanban, elementos elevados */
  --x-field-bg:         #161B25;  /* inputs sobre fondo de página */
  --x-field-bg-card:    #11151D;  /* inputs dentro de una tarjeta */
  --x-border:           #262E3D;
  --x-border-strong:    #2E3647;  /* borde de inputs */

  /* Texto */
  --x-text:             #E7EAF0;
  --x-text-2:           #C3CAD6;
  --x-text-muted:       #A3ACBC;
  --x-text-subtle:      #8790A2;
  --x-placeholder:      #7C8597;

  /* Marca y estados */
  --x-primary:          #FF9F43;
  --x-primary-hover:    #FFB066;
  --x-primary-active:   #F08C2A;
  --x-on-primary:       #1A1206;  /* texto sobre botón naranja */
  --x-link:             #FFA552;
  --x-link-hover:       #FFC48C;
  --x-success:          #4FC08D;
  --x-info:             #5E9CFF;
  --x-danger:           #F16B6B;
  --x-danger-text:      #F59A9A;
  --x-disabled-bg:      #2A3140;
  --x-focus-ring:       0 0 0 3px rgba(255, 159, 67, .22);

  /* Tipografía */
  --x-font:             'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --x-fs-display:       40px;   /* 1.12 / 700 */
  --x-fs-h1:            28px;   /* 1.2  / 700 */
  --x-fs-h2:            24px;   /* 1.25 / 700 */
  --x-fs-body:          15px;   /* 1.6  / 400 */
  --x-fs-label:         14px;   /* 500 */
  --x-fs-small:         13px;
  --x-fs-caption:       12px;

  /* Espaciado (escala de 4 px) */
  --x-space-1: 4px;  --x-space-2: 8px;  --x-space-3: 12px; --x-space-4: 16px;
  --x-space-5: 20px; --x-space-6: 24px; --x-space-8: 32px; --x-space-12: 48px;

  /* Radios */
  --x-radius-sm: 8px;
  --x-radius-md: 10px;
  --x-radius-lg: 14px;
  --x-radius-xl: 16px;

  /* Alturas de control */
  --x-control-h: 44px;
  --x-button-h:  48px;

  /* Sombras */
  --x-shadow-card:   0 24px 60px rgba(0, 0, 0, .45);
  --x-shadow-button: 0 6px 20px rgba(255, 159, 67, .22);
}

/* Móvil: controles más altos y texto de input a 16px (evita el zoom de iOS) */
@media (max-width: 767px) {
  :root {
    --x-control-h: 48px;
    --x-button-h:  52px;
  }
}