/**
 * La Villa Hermosa — Design Tokens
 * Source: Figma "La Villa Hermosa" file, page "Design System" (node 2:103)
 * Fonts: Fraunces (display/headings, serif) · DM Sans (body/UI)
 */

:root {
  /* ---- Color: Brand (terracotta) ---- */
  --brand-primary: #c26a4a;
  --brand-primary-hover: #a8543a;
  --brand-primary-dark: #83412e;
  --brand-tint: #faf1ed;
  --brand-tint-strong: #f3ddd3;

  /* ---- Color: Secondary (sage/teal) ---- */
  --brand-secondary: #43788a;
  --brand-secondary-dark: #2e4e59;
  --brand-secondary-tint: #e4edf0;

  /* ---- Color: Backgrounds ---- */
  --bg-surface: #ffffff;
  --bg-base: #faf8f5;
  --bg-raised: #f2eee8;
  --bg-sand: #e4ddd3;
  --bg-dark: #1f1d19;

  /* ---- Color: Text ---- */
  --text-primary: #1f1d19;
  --text-secondary: #5c5547;
  --text-muted: #a89e8e;
  --text-brand: #c26a4a;
  --text-on-brand: #ffffff;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #CFC6B8;

  /* ---- Color: Borders & Status ---- */
  --border-default: #e4ddd3;
  --border-strong: #CFC6B8;
  --status-available: #3e7b52;
  --status-gold: #c2912b;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Shadow ---- */
  --shadow-card: 0 1px 2px rgba(31, 29, 25, 0.04), 0 8px 24px rgba(31, 29, 25, 0.06);
  --shadow-raised: 0 4px 12px rgba(31, 29, 25, 0.08);

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Type families ---- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Type scale ---- */
  --text-display-xxl: 84px;
  --lh-display-xxl: 0.9;
  --ls-display-xxl: -1px;

  --text-display-lg: 52px;
  --lh-display-lg: 1.04;
  --ls-display-lg: -1px;

  --text-h1: 44px;
  --lh-h1: 1.08;
  --ls-h1: -0.5px;

  --text-h2: 40px;
  --lh-h2: 1.12;
  --ls-h2: -0.5px;

  --text-h3: 28px;
  --lh-h3: 1.16;

  --text-h4: 22px;
  --lh-h4: 1.24;

  --text-h5: 18px;
  --lh-h5: 1.32;

  --text-body-lg: 18px;
  --lh-body-lg: 1.56;

  --text-body: 18px;
  --lh-body: 1.58;

  --text-body-sm: 15px;
  --lh-body-sm: 1.56;

  --text-body-xs: 14px;
  --lh-body-xs: 1.52;

  --text-label: 15px;
  --lh-label: 1.2;

  --text-label-sm: 14px;
  --lh-label-sm: 1.2;

  --text-caption: 13px;
  --lh-caption: 1.4;

  --text-caption-sm: 12px;
  --lh-caption-sm: 1.4;

  --text-badge: 11px;
  --lh-badge: 1.1;
  --ls-badge: 0.6px;

  --text-eyebrow: 13px;
  --lh-eyebrow: 1.2;
  --ls-eyebrow: 1.56px;

  /* ---- Layout ---- */
  --container-max: 1540px;
  --container-pad: 80px;
}

@media (max-width: 900px) {
  :root {
    --container-pad: 24px;
    --text-display-xxl: 52px;
    --lh-display-xxl: 1.02;
    --text-display-lg: 38px;
    --text-h1: 32px;
    --text-h2: 28px;
  }
}