/* ==========================================================================
   variables.css — Shared design tokens for the V de Milo theme
   Use these variables to keep brand colors, spacing, typography and layout
   consistent across pages, components and template-specific styles.
   ========================================================================== */

:root {
  /* ── Brand Colors ─────────────────────────────────────────────────────── */
  --color-primary: #c9a96e;
  --color-primary-dark: #b08f56;
  --color-heading: #5b3c47;
  --color-heading-dark: #4a3039;
  --color-button: #5b3c47;
  --color-button-dark: #4a3039;
  --color-secondary: #e8dcc8;
  --color-secondary-dark: #d8c7ab;
  --color-text: #2c2c2c;
  --color-text-muted: #5e564d;
  --color-text-strong: #24201c;
  --color-link-dark: #3a3128;
  --color-bg: #f7f1e8;
  --color-bg-alt: #e8dcc8;
  --color-section-bg: var(--color-bg);
  --color-surface-dark: #1f1a17;
  --color-border: rgb(201 169 110 / 0.35);
  --color-white: #fff;
  --color-white-soft: rgb(255 255 255 / 0.88);
  --color-white-muted: rgb(255 255 255 / 0.7);
  --color-error: #dc2626;
  --color-success: #16a34a;
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1fb958;

  /* Alerts and overlays */
  --color-success-soft: rgb(22 163 74 / 0.08);
  --color-error-soft: rgb(220 38 38 / 0.08);
  --color-brand-soft: rgb(91 60 71 / 0.08);
  --color-home-hero-bg: #1a1a1a;
  --color-home-hero-overlay-strong: rgb(10 8 6 / 0.88);
  --color-home-hero-overlay-medium: rgb(10 8 6 / 0.72);
  --color-home-hero-overlay-light: rgb(10 8 6 / 0.3);
  --color-home-hero-overlay-bottom: rgb(10 8 6 / 0.45);
  --color-home-hero-body: rgb(245 241 235 / 0.65);

  /* Footer palette */
  --color-footer-bg: #c6a9a6;
  --color-footer-line: rgb(255 255 255 / 0.35);
  --color-footer-text-primary: var(--color-white);
  --color-footer-text-secondary: var(--color-white-soft);
  --color-footer-accent: var(--color-white);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-base: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-heading: 'Cormorant Garamond', serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.25rem;
  --font-size-4xl: 3rem;

  --line-height-base: 1.6;
  --line-height-heading: 1.2;
  --line-height-loose: 1.9;
  --line-height-hero: 1.1;

  --letter-spacing-xs: 0.01em;
  --letter-spacing-sm: 0.02em;
  --letter-spacing-md: 0.04em;
  --letter-spacing-lg: 0.08em;
  --letter-spacing-xl: 0.18em;
  --letter-spacing-hero: 0.22em;

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --space-section-y: var(--space-16);
  --space-content-padding: var(--space-8);
  --space-block-gap: var(--space-6);
  --space-section-gap: var(--space-10);
  --space-hero-cta-gap: 1rem;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-max-narrow: 1040px;
  --container-max-editorial: 760px;
  --container-max-hero: 1000px;
  --container-padding: 1.5rem;
  --content-measure: 62ch;
  --hero-description-max: 380px;
  --sidebar-width: 380px;

  /* ── Radius and Borders ───────────────────────────────────────────────── */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  --border-width-thin: 1px;
  --border-width-strong: 2px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* ── Motion and Backgrounds ───────────────────────────────────────────── */
  --transition-base: 0.2s ease;
  --body-gradient: linear-gradient(180deg, #f8f2e9 0%, #f4ede3 100%);
  --link-underline-color: rgb(201 169 110 / 0.5);
  --mark-highlight: linear-gradient(transparent 35%, rgb(201 169 110 / 0.22) 35%, rgb(201 169 110 / 0.22) 100%);
}