/* css/tokens.css */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  /* Tipografía */
  --font-heading: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Paleta base */
  --color-bg-base: #FFFFFF;
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle: #F9FAFB;
  --color-bg-translucent: rgba(255,255,255,0.85);

  /* Texto */
  --color-text-primary: #0A0A0A;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;

  /* Marca — fucsia SOLO como acento puntual */
  --color-brand-primary: #0A0A0A;
  --color-brand-light: #F3F4F6;
  --color-brand-accent: #C8006A;
  --color-brand-accent-light: #FFF0F7;
  --color-brand-blue: #374151;
  --color-brand-blue-light: #F9FAFB;

  /* Bordes */
  --color-border: rgba(0,0,0,0.08);
  --color-border-hover: rgba(0,0,0,0.14);

  /* Border radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Espaciado */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-giant: 64px;

  /* Sombras */
  --shadow-soft-sm: 0 1px 4px rgba(0,0,0,0.04);
  --shadow-soft-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-soft-lg: 0 12px 32px rgba(0,0,0,0.08);
  --shadow-soft-xl: 0 24px 56px rgba(0,0,0,0.10);
  --shadow-hover: 0 20px 48px rgba(0,0,0,0.10);

  /* Transiciones */
  --transition-speed-fast: 0.15s;
  --transition-speed-normal: 0.25s;
  --transition-speed-slow: 0.4s;
  --transition-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Tipografía base global */
body {
  font-family: var(--font-sans);
}

h1, h2, h3 {
  font-family: var(--font-heading);
}