/*
  OV Dental Studio — Design Tokens
  Fuente de verdad: ../design-system.md
  No hardcodear hex, px de espaciado o radios fuera de estas variables.
*/

:root {
  /* Colores — paleta base (ver jerarquía de uso en design-system.md) */
  --color-bone: #F3EEE5;    /* 50% — fondo principal */
  --color-ivory: #EDE4D6;   /* 20% — fondos alternos, cards */
  --color-sand: #DED1BF;    /* tono cálido de apoyo — bandas/secciones alternas, sin % fijo */
  --color-stone: #E7DCCB;   /* 15% — bloques destacados, footer */
  --color-greige: #CFC3B4;  /* 10% — bordes, separadores */
  --color-gold: #B79A63;    /*  3% — acentos, hover, íconos (nunca fondo grande) */
  --color-gold-text: #9C8250; /* variante oscurecida de --color-gold, solo para texto/links sobre fondo claro (el dorado base no cumple AA como texto) */
  --color-olive: #8E9477;   /*  2% — badges, iconografía orgánica */

  /* Texto — nunca negro puro */
  --color-text: #3A362F;
  --color-text-muted: #6B6558;

  /* Tipografía — confirmada (ver design-system.md) */
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;

  /* Espaciado — escala base 8px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* Radios — "curvas protagónicas", evitar esquinas rectas */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-full: 999px;

  /* Sombras — siempre difusas, nunca duras */
  --shadow-soft: 0 8px 30px rgba(58, 54, 47, 0.06);
  --shadow-md: 0 12px 40px rgba(58, 54, 47, 0.08);
}

/* Reset mínimo — expandir en base.css */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bone);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-text);
}