/*
 * Design tokens — White House · Praia do Coqueiro
 * Paleta: areia + off-white + verde-profundo do mar + dourado da marca.
 */

:root {
  /* ─── Marca ─── */
  --c-gold: #8B8A5E;
  --c-gold-soft: #EFEDE2;
  --c-gold-dark: #64643F;

  --c-deep: #2C3329;          /* verde-profundo (mar/vegetação) */
  --c-deep-soft: #4E5A45;
  --c-deep-darker: #1A1F18;

  --c-bg: #FFFFFF;
  --c-bg-alt: #F6F4ED;        /* areia clara */
  --c-surface: #FFFFFF;

  --c-text: #232720;
  --c-text-soft: #6E736F;
  --c-on-dark: #FFFFFF;

  --c-border: #E5E1D5;
  --c-divider: #ECE9DF;

  /* Status de disponibilidade */
  --c-free: #2F7D5F;
  --c-free-bg: #E7F3EC;
  --c-hold: #8B8A5E;
  --c-hold-bg: #F1EFE1;
  --c-busy: #A4413C;
  --c-busy-bg: #F8E9E8;
  --c-block: #8A8F8B;
  --c-block-bg: #EFEFEE;

  /* ─── Tipografia ─── */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Jost', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-hero: clamp(3rem, 9vw, 7rem);
  --fs-display-1: clamp(2.25rem, 5vw, 4rem);
  --fs-display-2: clamp(1.9rem, 4vw, 3.1rem);
  --fs-h1: clamp(1.5rem, 3.5vw, 2.25rem);
  --fs-h2: clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-h3: clamp(1.06rem, 2vw, 1.3rem);
  --fs-body: 1.0313rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-overline: 0.6875rem;

  /* ─── Espaçamento (4px grid) ─── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ─── Layout ─── */
  --container-max: 1320px;
  --container-pad-x: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad-y: clamp(4rem, 8vw, 7.5rem);
  --header-height: 84px;

  /* ─── Sombras / transições ─── */
  --shadow-sm: 0 1px 2px rgba(44, 51, 41, 0.07);
  --shadow-md: 0 8px 28px rgba(44, 51, 41, 0.09);
  --shadow-lg: 0 22px 56px rgba(44, 51, 41, 0.15);

  --t-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 480ms cubic-bezier(0.4, 0, 0.2, 1);

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-pill: 999px;
}