/* ============================================================================
   Drapery Life — Design Tokens
   Fuente única de verdad visual. Cambiar la marca = cambiar estas variables,
   NO reescribir la web. (UX/UI Design System §5 y §26.)
   El branding definitivo aún no está cerrado: estos valores son la base editable.
   ============================================================================ */

:root {
  /* --- Color ---------------------------------------------------------------
     Base sobria premium: blanco/negro/grises + cálidos (café claro, beige, arena). */
  --color-bg:        #ffffff;
  --color-surface:   #f7f5f2;
  --color-text:      #1f1f1f;
  --color-muted:     #6f6a64;
  --color-border:    #ded8d1;
  --color-primary:   #3a332d;
  --color-secondary: #b89b7d;
  --color-accent:    #8a6f55;
  --color-error:     #b42318;
  --color-success:   #027a48;
  --color-warning:   #b54708;

  /* Derivados de interacción */
  --color-primary-hover:  #2a2520;
  --color-on-primary:     #ffffff;
  --color-focus-ring:     #8a6f55;

  /* --- Tipografía ----------------------------------------------------------
     Serif editorial para títulos, sans moderna para UI. Cargar optimizado (font-display: swap). */
  --font-heading: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", "Source Sans 3", "Lato", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  --leading-tight: 1.2;
  --leading-base:  1.55;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* --- Radios -------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --- Sombras ------------------------------------------------------------- */
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, .08);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, .06);

  /* --- Espaciado ----------------------------------------------------------- */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 72px;

  /* --- Transiciones -------------------------------------------------------- */
  --transition-fast: 160ms ease;
  --transition-base: 260ms ease;
  --transition-slow: 420ms ease;

  /* --- Layout -------------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: var(--space-md);
  --tap-min: 44px;            /* objetivo táctil mínimo accesible */

  /* --- Capas (z-index) ----------------------------------------------------- */
  --z-header: 100;
  --z-sticky: 200;
  --z-drawer: 900;
  --z-modal:  1000;
  --z-toast:  1100;
}

/* Respeto a usuarios sensibles al movimiento (UX/UI §6). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}