/*
  nearoo Design System — Tokens
  Fuente: proyecto de diseño "nearoo Design System" (Claude Design).
  Comfortaa y Manrope se sirven en local (/assets/fonts): sus @font-face están
  en _includes/components/fuentes.njk. No usar @import aquí: bloquea el renderizado.
*/

:root {
  /* --- Primitivas de color --- */
  /* Ink / navy — color primario de marca: confianza, seguridad */
  --ink-950: oklch(19% 0.045 240);
  --ink-900: oklch(24% 0.05 240);
  --ink-800: oklch(31% 0.06 240);
  --ink-700: oklch(39% 0.07 240);
  --ink-600: oklch(47% 0.08 240);
  --ink-500: oklch(55% 0.09 240);
  --ink-400: oklch(66% 0.07 240);
  --ink-300: oklch(78% 0.05 240);
  --ink-200: oklch(88% 0.03 240);
  --ink-100: oklch(94% 0.015 240);
  --ink-50: oklch(97.5% 0.006 240);

  /* Teal — frescura, monitorización activa, acento "always on" */
  --teal-700: oklch(45% 0.10 195);
  --teal-600: oklch(55% 0.11 195);
  --teal-500: oklch(66% 0.12 195);
  --teal-400: oklch(76% 0.11 195);
  --teal-300: oklch(86% 0.08 195);
  --teal-100: oklch(95% 0.03 195);

  /* Coral — calidez, soporte humano, energía de CTA */
  --coral-700: oklch(52% 0.15 35);
  --coral-600: oklch(60% 0.17 35);
  --coral-500: oklch(68% 0.16 35);
  --coral-400: oklch(76% 0.13 35);
  --coral-100: oklch(95% 0.03 35);

  /* Estados semánticos */
  --green-600: oklch(58% 0.14 148);
  --green-500: oklch(67% 0.15 148);
  --green-100: oklch(94% 0.05 148);
  --amber-600: oklch(62% 0.15 75);
  --amber-500: oklch(72% 0.15 75);
  --amber-100: oklch(95% 0.05 75);
  --red-600: oklch(52% 0.19 25);
  --red-500: oklch(60% 0.20 25);
  --red-100: oklch(94% 0.04 25);

  /* --- Alias semánticos --- */
  --nearoo-color-primary: var(--ink-900);
  --nearoo-color-primary-strong: var(--ink-950);
  --nearoo-color-accent: var(--teal-500);
  --nearoo-color-accent-strong: var(--teal-700);
  --nearoo-color-warm: var(--coral-500);
  --nearoo-color-warm-strong: var(--coral-600);

  --nearoo-bg-page: var(--ink-50);
  --nearoo-bg-surface: #ffffff;
  --nearoo-bg-subtle: var(--ink-100);
  --nearoo-bg-inverse: var(--ink-950);
  --nearoo-bg-brand-wash: var(--ink-100);
  --nearoo-bg-accent-wash: var(--teal-100);
  --nearoo-bg-warm-wash: var(--coral-100);

  --nearoo-text-main: var(--ink-950);
  --nearoo-text-secondary: var(--ink-700);
  --nearoo-text-muted: var(--ink-500);
  --nearoo-text-on-brand: #ffffff;
  --nearoo-text-on-accent: var(--ink-950);
  --nearoo-text-link: var(--teal-700);
  --nearoo-text-link-hover: var(--ink-900);

  --nearoo-border: var(--ink-200);
  --nearoo-border-default: var(--ink-300);
  --nearoo-border-strong: var(--ink-500);
  --nearoo-border-focus: var(--teal-500);

  --nearoo-status-success: var(--green-600);
  --nearoo-status-success-bg: var(--green-100);
  --nearoo-status-warning: var(--amber-600);
  --nearoo-status-warning-bg: var(--amber-100);
  --nearoo-status-danger: var(--red-600);
  --nearoo-status-danger-bg: var(--red-100);
  --nearoo-status-info: var(--teal-700);
  --nearoo-status-info-bg: var(--teal-100);

  /* --- Tipografía --- */
  --nearoo-font-display: "Comfortaa", ui-rounded, "Segoe UI", sans-serif;
  --nearoo-font-body: "Manrope", -apple-system, "Segoe UI", sans-serif;

  --nearoo-text-xs: 0.75rem;
  --nearoo-text-sm: 0.875rem;
  --nearoo-text-base: 1rem;
  --nearoo-text-md: 1.125rem;
  --nearoo-text-lg: 1.375rem;
  --nearoo-text-xl: 1.75rem;
  --nearoo-text-2xl: 2.25rem;
  --nearoo-text-3xl: 3rem;
  --nearoo-text-4xl: 3.75rem;

  --nearoo-leading-tight: 1.1;
  --nearoo-leading-snug: 1.3;
  --nearoo-leading-normal: 1.5;
  --nearoo-leading-relaxed: 1.7;

  --nearoo-weight-regular: 400;
  --nearoo-weight-medium: 500;
  --nearoo-weight-semibold: 600;
  --nearoo-weight-bold: 700;

  --nearoo-tracking-tight: -0.02em;
  --nearoo-tracking-normal: 0em;
  --nearoo-tracking-wide: 0.02em;

  /* --- Espaciado (base 4px) --- */
  --nearoo-space-1: 0.25rem;
  --nearoo-space-2: 0.5rem;
  --nearoo-space-3: 0.75rem;
  --nearoo-space-4: 1rem;
  --nearoo-space-5: 1.25rem;
  --nearoo-space-6: 1.5rem;
  --nearoo-space-8: 2rem;
  --nearoo-space-10: 2.5rem;
  --nearoo-space-12: 3rem;
  --nearoo-space-16: 4rem;
  --nearoo-space-20: 5rem;
  --nearoo-space-24: 6rem;
  --nearoo-space-32: 8rem;

  --nearoo-container-max: 1200px;
  --nearoo-container-padding: clamp(1.25rem, 4vw, 3rem);

  /* --- Efectos --- */
  --nearoo-radius-sm: 6px;
  --nearoo-radius-md: 10px;
  --nearoo-radius-lg: 16px;
  --nearoo-radius-xl: 24px;
  --nearoo-radius-pill: 999px;

  --nearoo-shadow-sm: 0 1px 2px oklch(24% 0.05 240 / 0.06), 0 1px 1px oklch(24% 0.05 240 / 0.04);
  --nearoo-shadow-md: 0 4px 10px oklch(24% 0.05 240 / 0.08), 0 2px 4px oklch(24% 0.05 240 / 0.05);
  --nearoo-shadow-lg: 0 16px 32px oklch(24% 0.05 240 / 0.12), 0 4px 10px oklch(24% 0.05 240 / 0.06);
  --nearoo-shadow-focus: 0 0 0 3px var(--teal-300);

  --nearoo-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --nearoo-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --nearoo-duration-fast: 120ms;
  --nearoo-duration-base: 200ms;
  --nearoo-duration-slow: 360ms;
}