/* OVWORKS Design Tokens — compartido por todas las páginas */

@font-face {
  font-family: 'Rubik';
  src: url('../assets/fonts/Rubik/Rubik-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DM_Sans/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Colors */
  --negro: #07070D;
  --medianoche: #0D0D1A;
  --slate: #64647A;
  --crema: #E8E5DF;
  --papel: #F0EDE7;

  /* Derived */
  --slate-20: rgba(100, 100, 122, 0.20);
  --slate-10: rgba(100, 100, 122, 0.10);
  --crema-60: rgba(232, 229, 223, 0.60);
  --crema-30: rgba(232, 229, 223, 0.30);

  /* Typography */
  --font-heading: 'Rubik', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Layout */
  --max-width: 1160px;
  --gutter: 1.5rem;
  --nav-height: 80px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
}

/* Deshabilita transiciones durante la carga inicial para evitar flickering */
html.is-loading * {
  transition: none !important;
  animation-duration: 0s !important;
}

@media (min-width: 768px) {
  :root {
    --gutter: 2.5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 0;
  }
}