/* ===========================================================================
   paula rozados · alquimia somática — tokens
   Fuente: emira design system (colors, typography, spacing, base). No hardcodear
   colores ni tamaños en las páginas: usar estas variables. PRD §14.4.
   Fuentes self-host en /fonts (sin Google Fonts). Incluye una capa de alias
   cortos (--brown, --sand, …) para compatibilidad con el diseño canónico.
   =========================================================================== */

/* --- Webfonts (self-host, variable, swap) -------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond-VariableFont_wght.woff2") format("woff2"), url("/fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond-Italic-VariableFont_wght.woff2") format("woff2"), url("/fonts/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-VariableFont_wght.woff2") format("woff2"), url("/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-Italic-VariableFont_wght.woff2") format("woff2"), url("/fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* --- Base brand hues -------------------------------------------------- */
  --emira-brown:        #5A453F;
  --emira-brown-deep:   #3E2A22;
  --emira-sand:         #F5EEDC;
  --emira-cream:        #FAF6EC;
  --emira-blush:        #E9C4B7;
  --emira-blush-soft:   #F3DDD4;
  --emira-sage:         #AEC4AC;
  --emira-sage-soft:    #CFDCCC;
  --emira-clay:         #B99988;
  --emira-clay-soft:    #D8C5BB;
  --emira-ink:          #2C2320;
  --emira-stone-700:    #6E5C54;
  --emira-stone-500:    #8C7A70;
  --emira-stone-300:    #C9BBAE;
  --emira-stone-200:    #E4D9C8;
  --emira-white:        #FFFFFF;

  /* --- Semantic aliases ------------------------------------------------- */
  --surface-page:    var(--emira-sand);
  --surface-card:    var(--emira-cream);
  --surface-raised:  var(--emira-white);
  --surface-inverse: var(--emira-brown-deep);
  --surface-wash:    var(--emira-blush-soft);
  --text-strong:     var(--emira-brown-deep);
  --text-body:       var(--emira-brown);
  --text-muted:      var(--emira-stone-500);
  --text-on-inverse: var(--emira-sand);
  --border-hairline: var(--emira-stone-200);
  --border-default:  var(--emira-stone-300);
  --border-strong:   var(--emira-brown);
  --action-primary:       var(--emira-brown);
  --action-primary-hover: var(--emira-brown-deep);
  --action-primary-text:  var(--emira-sand);
  --accent-warm:   var(--emira-blush);
  --accent-calm:   var(--emira-sage);
  --accent-ground: var(--emira-clay);
  --status-positive:  #7E9A78;
  --status-attention: #C58A5E;
  --status-critical:  #A85A4C;
  --focus-ring: color-mix(in oklab, var(--emira-clay) 70%, white);

  /* --- Typography ------------------------------------------------------- */
  --font-serif:  "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-sans:   "Montserrat", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);
  --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.5rem;
  --text-3xl: 3.5rem; --text-4xl: 5rem;
  --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.72;
  --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;

  /* --- Spacing, radii, shadows, motion ---------------------------------- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
  --space-9: 6rem; --space-10: 8rem;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px;
  --radius-xl: 32px; --radius-pill: 999px;
  --radius-blob: 48% 52% 55% 45% / 52% 46% 54% 48%;
  --border-width: 1px; --border-width-strong: 1.5px;
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(62,42,34,.05);
  --shadow-sm: 0 2px 8px rgba(62,42,34,.06);
  --shadow-md: 0 8px 28px rgba(62,42,34,.08);
  --shadow-lg: 0 18px 50px rgba(62,42,34,.10);
  --shadow-edge: inset 0 0 0 1px rgba(92,69,63,.06);
  --content-max: 1180px; --measure: 66ch; --gutter: var(--space-6);
  --ease-calm: cubic-bezier(0.22,0.61,0.36,1);
  --ease-soft: cubic-bezier(0.4,0,0.2,1);
  --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 560ms;

  /* --- Alias cortos (compatibilidad con el diseño canónico) ------------- */
  --brown: var(--emira-brown); --brown-deep: var(--emira-brown-deep);
  --ink: var(--emira-ink); --sand: var(--emira-sand); --cream: var(--emira-cream);
  --blush: var(--emira-blush); --blush-soft: var(--emira-blush-soft);
  --sage: var(--emira-sage); --sage-soft: var(--emira-sage-soft);
  --clay: var(--emira-clay); --clay-soft: var(--emira-clay-soft);
  --stone-700: var(--emira-stone-700); --stone-500: var(--emira-stone-500);
}