/* ==========================================================================
   CORPORATIVO PULPO - DESIGN TOKENS & SYSTEM VARIABLES (2026)
   Typography: Cormorant Garamond (Display) & Plus Jakarta Sans (Body)
   Palettes: Imperial Navy, Riviera Blue, Slate Graphite, Warm Teak Wood
   ========================================================================== */

:root {
  /* ---------------- Typography ---------------- */
  --font-display: 'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---------------- Corporativo Pulpo Master Brand ---------------- */
  --color-corp-primary: #0F1926;
  --color-corp-primary-light: #1A293E;
  --color-corp-primary-dark: #090F17;
  --color-corp-gold: #C5A880;
  --color-corp-gold-light: #EADBC8;
  --color-corp-gold-dark: #9E7B54;
  --color-corp-bg: #FAF9F6;
  --color-corp-surface: #FFFFFF;
  --color-corp-surface-glass: rgba(255, 255, 255, 0.82);
  --color-corp-surface-dark-glass: rgba(15, 25, 38, 0.85);
  --color-corp-text: #161A20;
  --color-corp-text-muted: #5C6573;
  --color-corp-border: #E8E2D8;
  --color-corp-border-light: #F0EDE8;

  /* ---------------- Hotel Punta Azul (Oceanfront / Blue Dominant) ---------------- */
  --pa-primary: #122B49;
  --pa-secondary: #1E3F66;
  --pa-accent: #D4B996;
  --pa-accent-hover: #BF9F78;
  --pa-bg: #F4F8FA;
  --pa-surface: #FFFFFF;
  --pa-surface-tint: #EBF2F7;
  --pa-text: #0B192A;
  --pa-text-muted: #485D75;
  --pa-border: #D6E4EE;

  /* ---------------- Hotel More (Contemporary Urban / Slate Gray Dominant) ---------------- */
  --more-primary: #2C3038;
  --more-secondary: #3D434E;
  --more-accent: #B89D78;
  --more-accent-hover: #9E825F;
  --more-bg: #F6F7F9;
  --more-surface: #FFFFFF;
  --more-surface-tint: #EDEDF0;
  --more-text: #15171B;
  --more-text-muted: #616B78;
  --more-border: #DFE2E6;

  /* ---------------- Hotel Costa Verde (Natural Sanctuary / Light Wood & Teak Dominant) ---------------- */
  --cv-primary: #6F523E;
  --cv-secondary: #563E2E;
  --cv-accent: #A67C52;
  --cv-accent-hover: #8D643E;
  --cv-bg: #FAF7F2;
  --cv-surface: #FFFFFF;
  --cv-surface-tint: #F3ECE1;
  --cv-text: #231913;
  --cv-text-muted: #6A5D54;
  --cv-border: #E8DECF;

  /* ---------------- Dynamic Theme Variables (Default to Corporate) ---------------- */
  --theme-primary: var(--color-corp-primary);
  --theme-secondary: var(--color-corp-primary-light);
  --theme-accent: var(--color-corp-gold);
  --theme-accent-hover: var(--color-corp-gold-dark);
  --theme-bg: var(--color-corp-bg);
  --theme-surface: var(--color-corp-surface);
  --theme-text: var(--color-corp-text);
  --theme-text-muted: var(--color-corp-text-muted);
  --theme-border: var(--color-corp-border);

  /* ---------------- Geometry & Elevations ---------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(15, 25, 38, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 25, 38, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 25, 38, 0.12);
  --shadow-floating: 0 24px 60px rgba(15, 25, 38, 0.18);

  --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  --max-width: 1320px;
  --header-height: 90px;
}

/* Theme overrides per hotel page */
body[data-hotel="punta-azul"] {
  --theme-primary: var(--pa-primary);
  --theme-secondary: var(--pa-secondary);
  --theme-accent: var(--pa-accent);
  --theme-accent-hover: var(--pa-accent-hover);
  --theme-bg: var(--pa-bg);
  --theme-surface: var(--pa-surface);
  --theme-text: var(--pa-text);
  --theme-text-muted: var(--pa-text-muted);
  --theme-border: var(--pa-border);
}

body[data-hotel="more"] {
  --theme-primary: var(--more-primary);
  --theme-secondary: var(--more-secondary);
  --theme-accent: var(--more-accent);
  --theme-accent-hover: var(--more-accent-hover);
  --theme-bg: var(--more-bg);
  --theme-surface: var(--more-surface);
  --theme-text: var(--more-text);
  --theme-text-muted: var(--more-text-muted);
  --theme-border: var(--more-border);
}

body[data-hotel="costa-verde"] {
  --theme-primary: var(--cv-primary);
  --theme-secondary: var(--cv-secondary);
  --theme-accent: var(--cv-accent);
  --theme-accent-hover: var(--cv-accent-hover);
  --theme-bg: var(--cv-bg);
  --theme-surface: var(--cv-surface);
  --theme-text: var(--cv-text);
  --theme-text-muted: var(--cv-text-muted);
  --theme-border: var(--cv-border);
}