// Tesela UI — tokens (generado por scripts/build-tokens.js; no editar a mano).
// Variables que apuntan a las propiedades CSS (se adaptan al modo y al preset activos):
$tsl-bg: var(--tsl-bg); // Fondo de la página
$tsl-bg-elevated: var(--tsl-bg-elevated); // Fondo de superficies elevadas: menús, diálogos, popovers
$tsl-bg-glass: var(--tsl-bg-glass); // Fondo translúcido para cabeceras con desenfoque
$tsl-surface: var(--tsl-surface); // Relleno sutil de tarjetas y campos
$tsl-surface-hover: var(--tsl-surface-hover); // Relleno al pasar el cursor
$tsl-surface-strong: var(--tsl-surface-strong); // Relleno marcado: elemento activo o seleccionado
$tsl-fg: var(--tsl-fg); // Texto principal
$tsl-fg-muted: var(--tsl-fg-muted); // Texto secundario (contraste AA)
$tsl-fg-subtle: var(--tsl-fg-subtle); // Texto terciario: marcadores, deshabilitados (contraste mínimo 3:1)
$tsl-border: var(--tsl-border); // Borde discreto
$tsl-border-strong: var(--tsl-border-strong); // Borde marcado y de campos al pasar el cursor
$tsl-backdrop: var(--tsl-backdrop); // Velo detrás de diálogos modales
$tsl-accent: var(--tsl-accent); // Color de acento: botones, selección, foco (en claro, uno más oscuro para mantener el contraste)
$tsl-accent-fg: var(--tsl-accent-fg); // Texto sobre el acento (contraste AA con el acento)
$tsl-success: var(--tsl-success); // Éxito (en claro, más oscuro para que el texto cumpla AA)
$tsl-warning: var(--tsl-warning); // Aviso (en claro, más oscuro para que el texto cumpla AA)
$tsl-danger: var(--tsl-danger); // Peligro o error (en claro, más oscuro para que el texto cumpla AA)
$tsl-danger-fg: var(--tsl-danger-fg); // Texto sobre un relleno de peligro (botón «Eliminar»): oscuro sobre el rojo claro del modo oscuro, blanco sobre el del claro
$tsl-info: var(--tsl-info); // Información (en claro, más oscuro para que el texto cumpla AA)
$tsl-chart-1: var(--tsl-chart-1); // Serie 1 de las gráficas: sigue al acento
$tsl-chart-2: var(--tsl-chart-2); // Serie 2 de las gráficas
$tsl-chart-3: var(--tsl-chart-3); // Serie 3 de las gráficas
$tsl-chart-4: var(--tsl-chart-4); // Serie 4 de las gráficas
$tsl-chart-5: var(--tsl-chart-5); // Serie 5 de las gráficas
$tsl-chart-6: var(--tsl-chart-6); // Serie 6 de las gráficas
$tsl-chart-7: var(--tsl-chart-7); // Serie 7 de las gráficas
$tsl-chart-8: var(--tsl-chart-8); // Serie 8 de las gráficas
$tsl-shadow: var(--tsl-shadow); // Sombra de elevación media
$tsl-shadow-lg: var(--tsl-shadow-lg); // Sombra de elevación alta: diálogos, menús
$tsl-radius: var(--tsl-radius); // Radio de tarjetas, diálogos y menús
$tsl-radius-sm: var(--tsl-radius-sm); // Radio de botones y campos
$tsl-radius-xs: var(--tsl-radius-xs); // Radio de elementos pequeños
$tsl-font-mono: var(--tsl-font-mono); // Tipografía monoespaciada (base de la interfaz)
$tsl-font-sans: var(--tsl-font-sans); // Tipografía sans-serif
$tsl-font-heading: var(--tsl-font-heading); // Tipografía de títulos
$tsl-ease: var(--tsl-ease); // Curva de las transiciones
$tsl-ring: var(--tsl-ring); // Anillo de foco visible del teclado

// Valores en bruto, por modo, por si hacen falta en cálculos de Sass:
$tsl-tokens-dark: (
  "bg": #141415,
  "bg-elevated": #1b1b1d,
  "bg-glass": rgba(20, 20, 21, 0.84),
  "surface": rgba(255, 255, 255, 0.032),
  "surface-hover": rgba(255, 255, 255, 0.055),
  "surface-strong": rgba(255, 255, 255, 0.08),
  "fg": #f5f5f7,
  "fg-muted": #8e8e96,
  "fg-subtle": #6a6a74,
  "border": rgba(255, 255, 255, 0.095),
  "border-strong": rgba(255, 255, 255, 0.22),
  "backdrop": rgba(8, 8, 9, 0.6),
  "accent": #6365f0,
  "accent-fg": #ffffff,
  "success": #10b981,
  "warning": #f59e0b,
  "danger": #f54a67,
  "danger-fg": #1a0508,
  "info": #0ea5e9,
  "chart-1": #6365f0,
  "chart-2": #10b981,
  "chart-3": #f59e0b,
  "chart-4": #f43f5e,
  "chart-5": #0ea5e9,
  "chart-6": #a855f7,
  "chart-7": #14b8a6,
  "chart-8": #ec4899,
  "shadow": "0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 26px -12px rgba(0, 0, 0, 0.65)",
  "shadow-lg": "0 4px 12px rgba(0, 0, 0, 0.55), 0 20px 38px -12px rgba(0, 0, 0, 0.8)",
  "radius": 9px,
  "radius-sm": 7px,
  "radius-xs": 5px,
  "font-mono": "ui-monospace, \"JetBrains Mono\", \"SF Mono\", Menlo, Consolas, monospace",
  "font-sans": "-apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", Roboto, sans-serif",
  "font-heading": "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
  "ease": cubic-bezier(0.22, 1, 0.36, 1),
  "ring": "0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent)"
);
$tsl-tokens-light: (
  "bg": #f8f8f7,
  "bg-elevated": #ffffff,
  "bg-glass": rgba(248, 248, 247, 0.86),
  "surface": rgba(0, 0, 0, 0.024),
  "surface-hover": rgba(0, 0, 0, 0.045),
  "surface-strong": rgba(0, 0, 0, 0.07),
  "fg": #141416,
  "fg-muted": #63636b,
  "fg-subtle": #84848e,
  "border": rgba(0, 0, 0, 0.095),
  "border-strong": rgba(0, 0, 0, 0.28),
  "backdrop": rgba(20, 20, 22, 0.28),
  "accent": #4f46e5,
  "accent-fg": #ffffff,
  "success": #047253,
  "warning": #a14a08,
  "danger": #be123c,
  "danger-fg": #ffffff,
  "info": #0368a0,
  "chart-1": #4f46e5,
  "chart-2": #10b981,
  "chart-3": #f59e0b,
  "chart-4": #f43f5e,
  "chart-5": #0ea5e9,
  "chart-6": #a855f7,
  "chart-7": #14b8a6,
  "chart-8": #ec4899,
  "shadow": "0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px -12px rgba(0, 0, 0, 0.14)",
  "shadow-lg": "0 2px 6px rgba(0, 0, 0, 0.08), 0 18px 34px -12px rgba(0, 0, 0, 0.22)",
  "radius": 9px,
  "radius-sm": 7px,
  "radius-xs": 5px,
  "font-mono": "ui-monospace, \"JetBrains Mono\", \"SF Mono\", Menlo, Consolas, monospace",
  "font-sans": "-apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", Roboto, sans-serif",
  "font-heading": "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
  "ease": cubic-bezier(0.22, 1, 0.36, 1),
  "ring": "0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent)"
);

// Presets de tema (solo lo que cambian respecto a los tokens base):
$tsl-presets: (
  "tesela": (
    "label": "Tesela",
    "common": (

    ),
    "dark": (

    ),
    "light": (

    )
  ),
  "esmeralda": (
    "label": "Esmeralda",
    "common": (

    ),
    "dark": (
      "accent": #10b981,
      "accent-fg": #04130d
    ),
    "light": (
      "accent": #047857,
      "accent-fg": #ffffff
    )
  ),
  "ambar": (
    "label": "Ámbar",
    "common": (

    ),
    "dark": (
      "accent": #f59e0b,
      "accent-fg": #1a1103
    ),
    "light": (
      "accent": #b45309,
      "accent-fg": #ffffff
    )
  ),
  "cielo": (
    "label": "Cielo",
    "common": (

    ),
    "dark": (
      "accent": #0ea5e9,
      "accent-fg": #031a28
    ),
    "light": (
      "accent": #0369a1,
      "accent-fg": #ffffff
    )
  ),
  "rosa": (
    "label": "Rosa",
    "common": (

    ),
    "dark": (
      "accent": #f472b6,
      "accent-fg": #2b0617
    ),
    "light": (
      "accent": #be185d,
      "accent-fg": #ffffff
    )
  ),
  "violeta": (
    "label": "Violeta",
    "common": (

    ),
    "dark": (
      "accent": #a78bfa,
      "accent-fg": #1b1040
    ),
    "light": (
      "accent": #6d28d9,
      "accent-fg": #ffffff
    )
  ),
  "medianoche": (
    "label": "Medianoche",
    "common": (

    ),
    "dark": (
      "bg": #0b1020,
      "bg-elevated": #121a30,
      "bg-glass": rgba(11, 16, 32, 0.84),
      "surface": rgba(148, 163, 255, 0.05),
      "surface-hover": rgba(148, 163, 255, 0.085),
      "surface-strong": rgba(148, 163, 255, 0.13),
      "fg": #e8edff,
      "fg-muted": #9aa8cc,
      "fg-subtle": #7482aa,
      "border": rgba(148, 163, 255, 0.14),
      "border-strong": rgba(148, 163, 255, 0.32),
      "backdrop": rgba(3, 6, 16, 0.66),
      "accent": #7c9cff,
      "accent-fg": #07102a,
      "shadow": "0 1px 2px rgba(2, 5, 18, 0.6), 0 10px 26px -12px rgba(2, 5, 18, 0.8)",
      "shadow-lg": "0 4px 12px rgba(2, 5, 18, 0.65), 0 20px 38px -12px rgba(2, 5, 18, 0.9)"
    ),
    "light": (
      "bg": #f3f6fd,
      "bg-elevated": #ffffff,
      "bg-glass": rgba(243, 246, 253, 0.86),
      "surface": rgba(15, 27, 61, 0.03),
      "surface-hover": rgba(15, 27, 61, 0.055),
      "surface-strong": rgba(15, 27, 61, 0.085),
      "fg": #0f1b3d,
      "fg-muted": #4a5b86,
      "fg-subtle": #7482aa,
      "border": rgba(15, 27, 61, 0.12),
      "border-strong": rgba(15, 27, 61, 0.3),
      "backdrop": rgba(15, 27, 61, 0.3),
      "accent": #2f54eb,
      "accent-fg": #ffffff,
      "success": #047052,
      "warning": #9f4908,
      "danger": #bd123c,
      "info": #03679f
    )
  ),
  "papel": (
    "label": "Papel",
    "common": (
      "radius": 4px,
      "radius-sm": 3px,
      "radius-xs": 2px,
      "font-heading": "Georgia, \"Times New Roman\", serif"
    ),
    "dark": (
      "bg": #1b1713,
      "bg-elevated": #241f19,
      "bg-glass": rgba(27, 23, 19, 0.86),
      "surface": rgba(255, 244, 224, 0.035),
      "surface-hover": rgba(255, 244, 224, 0.06),
      "surface-strong": rgba(255, 244, 224, 0.09),
      "fg": #f1e9d8,
      "fg-muted": #a89c88,
      "fg-subtle": #7d7261,
      "border": rgba(255, 244, 224, 0.11),
      "border-strong": rgba(255, 244, 224, 0.26),
      "backdrop": rgba(10, 8, 5, 0.62),
      "accent": #e0a458,
      "accent-fg": #1d1306,
      "danger": #f6546f
    ),
    "light": (
      "bg": #f5efe4,
      "bg-elevated": #fffaf0,
      "bg-glass": rgba(245, 239, 228, 0.88),
      "surface": rgba(43, 36, 27, 0.03),
      "surface-hover": rgba(43, 36, 27, 0.055),
      "surface-strong": rgba(43, 36, 27, 0.085),
      "fg": #2b241b,
      "fg-muted": #665a49,
      "fg-subtle": #85796a,
      "border": rgba(43, 36, 27, 0.14),
      "border-strong": rgba(43, 36, 27, 0.34),
      "backdrop": rgba(43, 36, 27, 0.3),
      "accent": #a4470a,
      "accent-fg": #ffffff,
      "success": #046c4f,
      "warning": #9a4708,
      "danger": #b7113a,
      "info": #036399
    )
  ),
  "alto-contraste": (
    "label": "Alto contraste",
    "common": (

    ),
    "dark": (
      "bg": #000000,
      "bg-elevated": #0a0a0a,
      "bg-glass": rgba(0, 0, 0, 0.92),
      "surface": rgba(255, 255, 255, 0.08),
      "surface-hover": rgba(255, 255, 255, 0.16),
      "surface-strong": rgba(255, 255, 255, 0.24),
      "fg": #ffffff,
      "fg-muted": #d4d4d4,
      "fg-subtle": #a8a8a8,
      "border": rgba(255, 255, 255, 0.55),
      "border-strong": #ffffff,
      "backdrop": rgba(0, 0, 0, 0.8),
      "accent": #ffd60a,
      "accent-fg": #000000,
      "success": #4ade80,
      "warning": #fde047,
      "danger": #ff7b7b,
      "info": #7dd3fc
    ),
    "light": (
      "bg": #ffffff,
      "bg-elevated": #ffffff,
      "bg-glass": rgba(255, 255, 255, 0.94),
      "surface": rgba(0, 0, 0, 0.06),
      "surface-hover": rgba(0, 0, 0, 0.12),
      "surface-strong": rgba(0, 0, 0, 0.2),
      "fg": #000000,
      "fg-muted": #383838,
      "fg-subtle": #595959,
      "border": rgba(0, 0, 0, 0.6),
      "border-strong": #000000,
      "backdrop": rgba(0, 0, 0, 0.6),
      "accent": #0000cc,
      "accent-fg": #ffffff,
      "success": #005500,
      "warning": #694000,
      "danger": #91001a,
      "info": #00478f
    )
  ),
  "brutalista": (
    "label": "Brutalista",
    "common": (
      "radius": 0px,
      "radius-sm": 0px,
      "radius-xs": 0px,
      "shadow": 4px 4px 0 var(--tsl-border-strong),
      "shadow-lg": 6px 6px 0 var(--tsl-border-strong),
      "font-heading": "ui-monospace, \"JetBrains Mono\", \"SF Mono\", Menlo, Consolas, monospace"
    ),
    "dark": (
      "border": rgba(255, 255, 255, 0.4),
      "border-strong": #ffffff,
      "accent": #ff6b3d,
      "accent-fg": #150500
    ),
    "light": (
      "border": rgba(0, 0, 0, 0.55),
      "border-strong": #000000,
      "accent": #c2410c,
      "accent-fg": #ffffff
    )
  ),
  "suave": (
    "label": "Suave",
    "common": (
      "radius": 16px,
      "radius-sm": 12px,
      "radius-xs": 8px
    ),
    "dark": (
      "accent": #8b8dfb,
      "accent-fg": #0d0e33,
      "shadow": "0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 32px -14px rgba(0, 0, 0, 0.55)",
      "shadow-lg": "0 6px 16px rgba(0, 0, 0, 0.35), 0 26px 50px -16px rgba(0, 0, 0, 0.65)"
    ),
    "light": (
      "bg": #f4f4f9,
      "accent": #5b5bd6,
      "accent-fg": #ffffff,
      "shadow": "0 2px 6px rgba(30, 30, 80, 0.06), 0 14px 32px -14px rgba(30, 30, 80, 0.18)",
      "shadow-lg": "0 6px 16px rgba(30, 30, 80, 0.1), 0 26px 50px -16px rgba(30, 30, 80, 0.28)",
      "success": #046f51,
      "warning": #9e4908,
      "danger": #bc123b,
      "info": #03669e
    )
  )
);