/*
  TRUE ELEGANCE — Design Tokens (CSS Custom Properties)
  Fuente de verdad: design-tokens.json — mantener ambos sincronizados.
  Cargar este archivo antes que cualquier otro CSS del proyecto.
*/

:root {
  /* ---- Color: marca ---- */
  --color-brand-black: #0B0B0A;
  --color-brand-gold: #B6852A;
  --color-brand-cream: #F8F5EE;

  /* ---- Color: derivados ---- */
  --color-gold-dark: #8F6A20;
  --color-cream-soft: #FBF9F5;
  --color-black-soft: #3A3A38;
  --color-white: #FFFFFF;

  /* ---- Color: semántico ---- */
  --color-bg: var(--color-brand-cream);
  --color-bg-alt: var(--color-cream-soft);
  --color-bg-inverse: var(--color-brand-black);
  --color-surface: var(--color-white);
  --color-text-primary: var(--color-brand-black);
  --color-text-secondary: var(--color-black-soft);
  --color-text-inverse: var(--color-brand-cream);
  --color-accent: var(--color-brand-gold);
  --color-accent-hover: var(--color-gold-dark);
  --color-border-subtle: rgba(11, 11, 10, 0.12);
  --color-border-gold: var(--color-brand-gold);

  /* ---- Tipografía ---- */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --text-h1: 3rem;
  --text-h1-mobile: 2.25rem;
  --text-h2: 2.25rem;
  --text-h2-mobile: 1.75rem;
  --text-h3: 1.25rem;
  --text-h3-mobile: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;
  --text-button: 0.95rem;
  --text-label: 0.8125rem;

  --leading-heading: 1.15;
  --leading-body: 1.6;
  --tracking-caption: 0.04em;
  --tracking-button: 0.03em;

  /* ---- Spacing ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ---- Radius ---- */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ---- Borders ---- */
  --border-width-thin: 1px;
  --border-width-medium: 2px;

  /* ---- Shadows (uso escaso: la marca prioriza el espacio en blanco sobre la profundidad) ---- */
  --shadow-sm: 0 1px 2px rgba(11, 11, 10, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 11, 10, 0.08);
  --shadow-lg: 0 8px 24px rgba(11, 11, 10, 0.10);

  /* ---- Botones ---- */
  --btn-padding-y: 14px;
  --btn-padding-x: 28px;
  --btn-primary-bg: var(--color-brand-black);
  --btn-primary-text: var(--color-brand-cream);
  --btn-primary-bg-hover: var(--color-black-soft);
  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--color-brand-black);
  --btn-secondary-border: var(--color-brand-black);
  --btn-secondary-bg-hover: var(--color-brand-black);
  --btn-secondary-text-hover: var(--color-brand-cream);

  /* ---- Contenedor / Grid ---- */
  --container-max-width: 1200px;
  --container-padding-mobile: 20px;
  --container-padding-desktop: 48px;
  --grid-columns: 12;
  --grid-gutter: 24px;

  /* ---- Breakpoints (referencia — usar en media queries manualmente, CSS no permite var() en @media) ---- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}