/* Quimitor V3.0 Design Tokens & Color Palettes */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  /* Color Palette - Light Theme */
  --bg-primary: #F7F3EA;       /* Fondo claro */
  --bg-secondary: #E9E3D8;     /* Gris suave */
  --bg-card: #FFF8EE;          /* Blanco cálido */
  --color-primary: #082B5B;     /* Azul oscuro principal */
  --color-secondary: #0D335D;   /* Azul secundario */
  --color-accent: #F2B233;      /* Amarillo científico */
  --color-accent-hover: #DDA222;
  --color-teal: #1E8A84;        /* Turquesa experimental */
  --color-text: #082B5B;        /* Azul oscuro para texto */
  --color-text-muted: rgba(8, 43, 91, 0.7);
  --color-border: #E9E3D8;      /* Gris suave para bordes */
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(8, 43, 91, 0.05);
  --shadow-md: 0 8px 16px rgba(8, 43, 91, 0.06);
  --shadow-lg: 0 16px 24px rgba(8, 43, 91, 0.08);
  --shadow-premium: 0 24px 32px rgba(8, 43, 91, 0.1);

  /* Typography - rounded & friendly */
  --font-sans: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-heading: 'Fredoka', sans-serif;

  /* Layout and Borders */
  --border-radius-sm: 12px;
  --border-radius-md: 20px;
  --border-radius-lg: 32px;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-theme: background-color 0.5s ease, color 0.5s ease;
  
  /* Visual Assets */
  --logo-url: url('../assets/logos/icon-light.png');
  --bg-image-url: url('../assets/backgrounds/light/main-bg.jpg');
}

/* Dark Theme overrides */
:root.dark {
  --bg-primary: #0A1B33;       /* Fondo principal oscuro */
  --bg-secondary: #122A4A;     /* Azul secundario */
  --bg-card: #0F2440;          /* Tarjetas oscuro */
  --color-primary: #1C3966;     /* Azul-gris para los bordes y sombras estructurales */
  --color-secondary: #122A4A;   /* Azul secundario oscuro */
  --color-accent: #F2B233;      /* Amarillo científico (dorado) */
  --color-accent-hover: #DDA222;
  --color-teal: #36C5BC;        /* Turquesa complementario */
  --color-text: #EAEFF7;        /* Texto principal */
  --color-text-muted: rgba(234, 239, 247, 0.62);
  --color-border: #122A4A;      /* Azul secundario para bordes */
  
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 24px rgba(0, 0, 0, 0.5);
  --shadow-premium: 0 24px 32px rgba(0, 0, 0, 0.6);

  /* Visual Assets */
  --logo-url: url('../assets/logos/icon-dark.png');
  --bg-image-url: url('../assets/backgrounds/dark/main-bg.jpg');
}