/* ============================================
   Atelier Digital Studio — Design Tokens
   ============================================ */

:root {
  /* Colores */
  --color-bg: #EAE9E2;
  --color-bg-alt: #C5AE97;
  --color-surface-dark: #505C49;
  --color-text: #4C3325;
  --color-text-inverse: #EAE9E2;
  --color-heading: #505C49;
  --color-accent: #A2B49B;
  --color-focus: #4C3325;
  --color-error: #8B3A2E;
  --color-card-bg: #F6F5F1;

  /* Tipografía */
  --font-display: "Editor's Note", "Cormorant Garamond", Georgia, serif;
  --font-body: "Raleway", "Outfit", sans-serif;
  --font-accent: "Bebas Neue", "Raleway", sans-serif;

  /* Escala tipográfica (máx. 5 tamaños) */
  --text-display: clamp(2.25rem, 5vw, 3.5rem);
  --text-h2: clamp(1.5rem, 3vw, 2.25rem);
  --text-h3: 1.375rem;
  --text-body: 1rem;
  --text-accent: clamp(1.125rem, 2vw, 1.5rem);
  --text-small: 0.875rem;

  /* Espaciado (grid de 8pt) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* Sombra */
  --shadow-card: 0 4px 24px rgba(76, 51, 37, 0.08);

  /* Transiciones */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s ease;
}