/**
 * tokens.css — Design tokens del proyecto XETA 3D STUDIO.
 *
 * Paleta Dark Mode generada bajo los principios y roles de Material Design 3 (M3).
 * Extraída a partir de la identidad visual y logotipo de XETA 3D STUDIO (#FF6600).
 * Es la base compartida por todos los componentes.
 */

:root {
  /* --- Tipografías --- */
  --font-text: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Bubblegum Sans", cursive;

  /* --- Radio --- */
  --radius: 0.5rem;

  /* --- Paleta Principal (Primary / Studio Orange M3 Tone 80 / Tone 20 / Tone 30) --- */
  --primary: #ffb68c;
  --on-primary: #4d1b00;
  --primary-container: #6d2700;
  --on-primary-container: #ffdbcb;
  --inverse-primary: #ff6600;

  /* --- Paleta Secundaria (Secondary / Tech Warm Amber) --- */
  --secondary: #ffbe82;
  --on-secondary: #482300;
  --secondary-container: #5e3000;
  --on-secondary-container: #ffe0c2;

  /* --- Paleta Terciaria (Tertiary / Cyber 3D Viewport Cyan) --- */
  --tertiary: #68dcf7;
  --on-tertiary: #003640;
  --tertiary-container: #004d5c;
  --on-tertiary-container: #baf3ff;

  /* --- Roles Semánticos de Error --- */
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;

  /* --- Roles Semánticos Adicionales --- */
  --success: #7bdca0;
  --on-success: #00391c;
  --success-container: #00522b;
  --on-success-container: #97f9ba;

  /* --- Superficies y Fondos (M3 Dark Theme Hierarchy) --- */
  --background: #121316;
  --on-background: #e2e2e8;
  --surface: #121316;
  --on-surface: #e2e2e8;

  --surface-dim: #0f1013;
  --surface-bright: #383a42;
  --surface-container-lowest: #090a0c;
  --surface-container-low: #16181c;
  --surface-container: #1e2025;
  --surface-container-high: #26282e;
  --surface-container-highest: #31343b;

  --surface-variant: #28292f;
  --on-surface-variant: #c5c6ce;
  --outline: #8f909a;
  --outline-variant: #45474e;
  --surface-tint: #ffb68c;

  --scrim: #000000;
  --shadow: #000000;

  /* --- Alias semánticos (compatibilidad frontend Astro y componentes) --- */
  --foreground: var(--on-background);
  --heading: var(--on-background);
}