/* Tokens del sistema de diseño — AgrazClinic (rediseño Noir Editorial).
   Paleta B&N pura (CLAUDE.md §Frontend): sin acentos de color.
   Valores del handoff design_handoff_noir_redesign/README.md. */
:root {
  /* Color */
  --color-paper: #FFFFFF;
  --color-ink: #0A0A0A;
  --color-ink-2: #2A2A2A;      /* hover de botón sólido */
  --color-paper-2: #E8E6E1;    /* blanco cálido: hover de botón invertido */
  --color-mist: #F5F5F5;
  --color-fog: #E5E5E5;
  --color-field-line: #D8D8D8; /* línea inferior de inputs */
  /* --color-stone sobre --color-paper ≈ 3.5:1 — pasa AA para texto grande
     (≥24px o ≥19px bold), iconos y bordes; NO usar en texto pequeño/párrafo. */
  --color-stone: #8A8A8A;

  /* Texto/trazo sobre fondos oscuros (secciones invertidas, header, footer) */
  --ondark-body: rgba(255, 255, 255, 0.8);
  --ondark-lead: rgba(255, 255, 255, 0.82);
  --ondark-eyebrow: rgba(255, 255, 255, 0.6);
  --ondark-eyebrow-strong: rgba(255, 255, 255, 0.72);
  --ondark-muted: rgba(255, 255, 255, 0.5);
  --ondark-hairline: rgba(255, 255, 255, 0.14);

  /* Placeholder de imagen: relleno + trama diagonal hairline a 135° */
  --ph-fill: #ECEAE6;
  --ph-stripe: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 11px);
  --ph-stripe-dark: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 12px);

  /* Tipografía */
  --font-body: "Jost", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-display: "Fraunces", ui-serif, Constantia, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  --weight-light: 300;
  --weight-book: 400;
  --weight-medium: 500;

  /* Escala tipográfica noir (clamp min→max del handoff) */
  --text-display-hero: clamp(3rem, 7vw, 6rem);      /* h1 del hero */
  --text-display-xl: clamp(2.6rem, 6vw, 5rem);      /* h1 de página */
  --text-display-lg: clamp(2rem, 4vw, 3rem);        /* h2 de sección */
  --text-display-cta: clamp(2.2rem, 4vw, 3.4rem);   /* h2 de banda CTA */
  --text-display-md: clamp(1.6rem, 3vw, 2.4rem);    /* nombre en filas índice */
  --text-display-sm: 1.625rem;                      /* h3 de card (26px) */
  --text-lead: clamp(1rem, 1.4vw, 1.22rem);
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.8125rem;    /* 13px: meta, footer, botones */
  --text-eyebrow: 0.75rem;    /* 12px */

  --leading-tight: 1.04;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  --tracking-display: -0.015em;
  --tracking-eyebrow: 0.16em;
  --tracking-nav: 0.14em;
  --tracking-button: 0.04em;

  /* Espaciado — escala generosa, pensada para "mucho aire" */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4.5rem;   /* 72px */
  --space-7: 6rem;     /* 96px */
  --space-8: 9rem;     /* 144px */

  /* Layout (handoff: max 1200px, padding lateral 44px desktop / 22px móvil;
     secciones 96px desktop / 60px móvil) */
  --content-max: 1200px;
  --content-narrow: 720px;
  --content-shell: 520px;      /* authshell / forms centrados angostos */
  --pad-inline: 1.375rem;      /* 22px móvil */
  --pad-inline-lg: 2.75rem;    /* 44px desktop */
  --section-pad: 3.75rem;      /* 60px móvil */
  --section-pad-lg: 6rem;      /* 96px desktop */
  --grid-gap: var(--space-3);
  --card-gap: 1.75rem;         /* 28px entre cards */

  /* Bordes / radio — esquinas vivas: el radio es parte de la estética */
  --border-hairline: 1px solid var(--color-fog);
  --border-hairline-ink: 1px solid var(--color-ink);
  --radius-sm: 0;

  /* Movimiento */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-ui: 200ms;
  --duration-row: 250ms;       /* slide de filas índice */
  --duration-ambient: 450ms;   /* fadeUp / escala de imagen */
}

/* Breakpoints de referencia (no expresables como custom property dentro de
   @media): sm 640px, md 900px, cards/split 820px. Documentados aquí, usados
   como valores literales consistentes en base.css/components.css/pages.css. */