:root {
  /* Brand */
  --color-brand: #00A771;
  --color-brand-bright: #10DB8E;
  --color-brand-dim: #047857;

  /* Dark surfaces */
  --color-ink: #0A1A14;
  --color-surface-dark: #0F1F18;
  --color-card-dark: #14291F;
  --color-border-dark: #1F3A2E;

  /* Light surfaces */
  --color-surface-light: #F7FBF9;
  --color-card-light: #FFFFFF;
  --color-border-light: #E5EEEA;

  /* Text */
  --color-text-primary-dark: #F0F7F3;
  --color-text-secondary-dark: #A3BDB0;
  --color-text-primary-light: #0A1A14;
  --color-text-secondary-light: #475560;

  /* Semantic */
  --color-accent-warm: #F97316;
  /* Sky-blue stand-in used for OTA brand visual references in mockups (avoids real OTA brand colors). */
  --color-accent-blue-neutral: #0EA5E9;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;

  --fs-display-xl: 4rem;
  --fs-display-lg: 3rem;
  --fs-h1: 2.25rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.375rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;

  /* Spacing (8pt grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-40: 160px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl: 30px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10,26,20,0.08);
  --shadow-md: 0 4px 12px rgba(10,26,20,0.08);
  --shadow-lg: 0 12px 32px rgba(10,26,20,0.12);
  --shadow-xl: 0 20px 48px rgba(10,26,20,0.16);

  /* OTA neutral accent colors (NOT official brand — stand-ins to avoid brand confusion) */
  --color-ota-airbnb: #F4A68F;
  --color-ota-booking: #5B89C1;
}

/* Mobile type scaling */
@media (max-width: 640px) {
  :root {
    --fs-display-xl: 2.5rem;
    --fs-display-lg: 2rem;
    --fs-h1: 1.75rem;
    --fs-h2: 1.5rem;
  }
}

/* Focus ring universale (WCAG) */
*:focus-visible {
  outline: 2px solid var(--color-brand-bright);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Italian accent (flag red) — added Phase 8C polish */
:root {
  --color-accent-red: #C8102E;
  --color-accent-red-bright: #E63946;
}