/**
 * Núcleo Digital — design tokens (canonical)
 * Cargar primero: <link rel="stylesheet" href="css/tokens.css">
 * Incluye tipografía (Sora + Plus Jakarta Sans) y alias usados en styles.css.
 *
 * UX por defecto (Brand Guide ≥1.1): experiencia clara — fondos claros para
 * lectura larga; oscuros solo en fragmentos (hero, footer, tarjetas). Cuerpo
 * de texto ≥16px; 17px recomendado en páginas extensas.
 */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap");

:root {
  /* Legibilidad / superficie por defecto */
  --nd-page-bg: #f8fafc;
  --nd-font-body-min: 16px;
  --nd-font-body-read: 17px;
  --nd-line-body: 1.65;

  /* Brand (Brand Guide) */
  --nd-ink: #0d1117;
  /* Navbar: enlaces desktop/móvil (marca navy) */
  --nd-nav-link: #041736;
  --nd-accent: #0047ff;
  --nd-accent-deep: #0038cc;
  --nd-teal: #00b89a;
  --nd-aqua: #00c3f2;
  --nd-cyan: #06b6d4;
  --nd-lime: #dcfd8b;
  --nd-orange: #ff6719;
  --nd-wa: #25d366;

  /* Superficies */
  --nd-surface: #ffffff;
  --nd-surface-muted: #f7f8fc;
  --nd-border: #e4e8f5;
  --nd-text: #4a5173;
  --nd-text-muted: #64748b;
  --nd-slate-700: #334155;
  --nd-slate-800: #1e293b;

  /* Núcleos (perfiles) */
  --nd-nucleo-ciudadania: #2563eb;
  --nd-nucleo-familia: #059669;
  --nd-nucleo-educadores: #7c3aed;
  --nd-nucleo-profesionales: #ea580c;

  /* Layout */
  --nd-header-h: 85px;
  --nd-header-h-scrolled: 72px;
  --nd-header-radius-bottom: 18px;
  --nd-radius-sm: 8px;
  --nd-radius-md: 12px;
  --nd-radius-lg: 16px;
  --nd-radius-xl: 22px;
  --nd-shadow-header: 0 2px 15px rgba(0, 0, 0, 0.08);
  --nd-shadow-dropdown: 0 15px 35px rgba(0, 0, 0, 0.15);
  --nd-z-header: 2000;
  --nd-z-mobile: 2001;
  --nd-z-float: 1000;

  /* Tipografía */
  --nd-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --nd-font-display: "Sora", system-ui, sans-serif;

  /* Espaciado (4px base) */
  --nd-space-1: 4px;
  --nd-space-2: 8px;
  --nd-space-3: 12px;
  --nd-space-4: 16px;
  --nd-space-5: 20px;
  --nd-space-6: 24px;
  --nd-space-8: 32px;

  /* ── Alias para styles.css y páginas legacy ── */
  --color-primary: var(--nd-accent);
  --color-primary-dark: var(--nd-accent-deep);
  --color-primary-light: #e8efff;
  --color-accent: var(--nd-cyan);
  --color-teal: var(--nd-teal);
  --color-lime: var(--nd-lime);

  --font-body: var(--nd-font-sans);
  --font-display: var(--nd-font-display);

  --navbar-height: var(--nd-header-h);

  --text-900: #0d1117;
  --text-700: #334155;
  --text-500: #64748b;

  --bg-white: #ffffff;
  --bg-surface: var(--nd-surface-muted);
  --bg-dark: #0f172a;
  --bg-deep: #020617;
  --bg-navy: #041736;
  /* Alias: preferir --nd-page-bg para “fondo página” en nuevos bloques */
  --bg-page: var(--nd-page-bg);

  --border: var(--nd-border);

  --r-xs: 6px;
  --r-sm: var(--nd-radius-sm);
  --r-lg: var(--nd-radius-lg);
  --r-xl: var(--nd-radius-xl);
  --r-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 12px 40px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.15);

  --transition: 0.2s ease;

  --z-navbar: 2000;
  --z-dropdown: 1999;

  --nucleo-ciudadanos: var(--nd-nucleo-ciudadania);
  --nucleo-familia: var(--nd-nucleo-familia);
  --nucleo-educadores: var(--nd-nucleo-educadores);
  --nucleo-profesional: var(--nd-nucleo-profesionales);
  --nucleo-abogados: var(--nd-nucleo-profesionales);
  --nucleo-sectores: #dc2626;
  --nucleo-familia-light: #d1fae5;
  --nucleo-profesional-light: #ffedd5;
  --nucleo-abogados-light: #ffedd5;
  --nucleo-educadores-light: #ede9fe;

  /* Compatibilidad (--ink, --accent, etc.) */
  --ink: var(--nd-ink);
  --accent: var(--nd-accent);
  --teal: var(--nd-teal);
  --light: var(--nd-surface-muted);
  --mid: var(--nd-border);
  --text: var(--nd-text);
  --white: var(--nd-surface);
  --r: var(--nd-radius-lg);
  --c-ciudadania: var(--nd-nucleo-ciudadania);
  --c-familia: var(--nd-nucleo-familia);
  --c-educadores: var(--nd-nucleo-educadores);
  --c-profesionales: var(--nd-nucleo-profesionales);
  --c-abogados: var(--nd-nucleo-profesionales);
}