/* ============================================================================
   NegliMed — Design Tokens
   ============================================================================ */

:root {
  /* Marca */
  --ink: #0E5A4B;           /* Verde esmeralda — primario */
  --cream: #F6F0DF;         /* Marfil cálido — fondo institucional */
  --paper: #FBF7EC;         /* Blanco roto — fondo neutro */
  --white: #FFFFFF;

  /* Escala de verde (UI) */
  --ink-050: #EDF3F0;
  --ink-100: #DBE8E4;
  --ink-200: #B8D4CD;
  --ink-400: #2A7566;
  --ink-500: #0E5A4B;       /* = ink */
  --ink-600: #0A453A;
  --ink-800: #083129;

  /* Neutrales cálidos */
  --n-100: #ECEDE6;
  --n-200: #E0E2D9;
  --n-300: #C7CAC0;
  --n-400: #A9ADA3;
  --n-500: #8A8E85;
  --n-600: #6B6F67;
  --n-700: #4A4E47;
  --n-800: #2D312B;
  --n-900: #1D1F1B;

  /* Acento */
  --gold: #B8944A;          /* Dorado editorial discreto */
  --gold-soft: #D9C38A;

  /* Estados */
  --success: #1D7A4E;       /* bg: #E4F1EA */
  --warning: #B88020;       /* bg: #F7ECD6 */
  --danger: #A23B2A;        /* bg: #F3D9D3 */
  --info: #2A5D7A;          /* bg: #D9E5EC */

  /* Tipografía */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Escala de tamaños (8pt base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Border Radius */
  --r-sm: 4px;              /* inputs pequeños */
  --r-md: 8px;              /* botones, inputs, cards densos */
  --r-lg: 14px;             /* cards de servicio, formularios grandes */
  --r-xl: 20px;
  --r-full: 999px;          /* solo badges */

  /* Sombras (cálidas, tintadas con verde) */
  --sh-1: 0 1px 2px rgba(10, 50, 40, 0.06);
  --sh-2: 0 4px 12px rgba(10, 50, 40, 0.08);
  --sh-3: 0 12px 32px rgba(10, 50, 40, 0.12);

  /* Transiciones */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;
}

/* ============================================================================
   Tipografía — Escala
   ============================================================================ */

/* display-l: 72px, peso 500 */
.text-display-l {
  font-family: var(--font-serif);
  font-size: 72px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* display-m: 48px, peso 500 */
.text-display-m {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* display-s: 32px, peso 500 */
.text-display-s {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* body-l: 20/150px, peso 400 (bajadas editoriales) */
.text-body-l {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: normal;
}

/* body-m: 15/160px, peso 400 (cuerpo UI) */
.text-body-m {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: normal;
}

/* body-s: 13/150px, peso 400 (texto auxiliar) */
.text-body-s {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: normal;
}

/* caption: 11/120px, peso 600, UPPERCASE, letter-spacing 0.22em */
.text-caption {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ============================================================================
   Utilidades
   ============================================================================ */

/* Texto en itálica con color ink (patrón distintivo) */
.text-italic-ink {
  font-style: italic;
  color: var(--ink);
}

/* Contraste canónico */
.color-ink-on-cream {
  color: var(--ink);
  background-color: var(--cream);
}

.color-cream-on-ink {
  color: var(--cream);
  background-color: var(--ink);
}

/* Accesibilidad: ratios confirmados (AAA) */
/* Ink sobre Cream = 8.9:1 */
/* Cream sobre Ink = 9.1:1 */