/* ============================================================
   DESIGN TOKENS
   Paleta y variables derivadas de identidad de marca Binetz.
   Fuente tipográfica: Labil Grotesk (assets/fonts/).
   ============================================================ */

@font-face {
  font-family: 'Labil Grotesk';
  src: url('../assets/fonts/LabilGrotesk-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Labil Grotesk';
  src: url('../assets/fonts/LabilGrotesk-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Labil Grotesk';
  src: url('../assets/fonts/LabilGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Labil Grotesk';
  src: url('../assets/fonts/LabilGrotesk-Regular.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Labil Grotesk';
  src: url('../assets/fonts/LabilGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
  Visual direction: sober and premium.
  Monochrome-dominant surfaces with controlled Binetz blue accents.
*/
:root {
  --brand-blue: #192EF2;
  --brand-blue-strong: #3148ff;
  --font-primary: 'Labil Grotesk', system-ui, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --container-max: 1240px;
  --nav-height: 60px;

  --transition-fast: 0.15s ease;
  --transition-base: 0.24s ease;

  --color-error: #ef4444;
  --color-success: #22c55e;

  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

[data-theme="dark"] {
  --color-bg: #060708;
  --color-surface: #101216;
  --color-surface-soft: #171a20;
  --color-text: #f4f7ff;
  --color-text-muted: #b3b8c7;
  --color-text-faint: #6f778d;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-primary: #5b6cf7;
  --color-primary-hover: #7b8aff;
  --ambient-glow: radial-gradient(circle at 75% 30%, rgba(91, 108, 247, 0.18), transparent 40%);
  --color-accent-soft: rgba(91, 108, 247, 0.12);
}