/* Tokens del sitio, derivados de theme.json.
   Por qué: mantener un único origen de verdad. WordPress genera las variables
   --wp--preset--* desde theme.json; acá solo les ponemos nombres semánticos
   --arx-* para usarlos cómodo en app.css, sin repetir valores hex. */
:root{
  --arx-bordo: var(--wp--preset--color--bordo);
  --arx-bordo-700: var(--wp--preset--color--bordo-700);
  --arx-bordo-50: var(--wp--preset--color--bordo-50);
  --arx-bordo-900: var(--wp--preset--color--bordo-900);
  --arx-teal: var(--wp--preset--color--teal);
  --arx-teal-700: var(--wp--preset--color--teal-700);
  --arx-teal-50: var(--wp--preset--color--teal-50);
  --arx-ink: var(--wp--preset--color--ink);
  --arx-ink-2: var(--wp--preset--color--ink-2);
  --arx-muted: var(--wp--preset--color--muted);
  --arx-line: var(--wp--preset--color--line);
  --arx-bg: var(--wp--preset--color--bg);
  --arx-surface: var(--wp--preset--color--surface);

  --arx-font: var(--wp--preset--font-family--roboto);

  /* Formas, tomadas del prototipo */
  --arx-radius-card: 16px;
  --arx-radius-photo: 32px;   /* esquina grande asimétrica del diseño */
  --arx-radius-field: 12px;
  --arx-radius-pill: 999px;

  /* Ritmo vertical de secciones */
  --arx-section-y: 88px;
  --arx-gutter: 32px;
}
@media (max-width: 849px){
  :root{ --arx-section-y: 48px; --arx-gutter: 20px; }
}