:root {
  /* =========================================
     1. PRIMITIVE PALETTE (Raw Values)
     ========================================= */
  /* Brand */
  --inn-navy-500: #0f3b57;
  --inn-navy-900: #0a2c42;
  --inn-gold-400: #b98f3f;
  --inn-gold-600: #8f6e30;
  --inn-gold-text: #855802;
  
  /* Neutrals */
  --inn-neutral-50: #ffffff;
  --inn-neutral-100: #fdfaf4;
  --inn-neutral-200: #f5eee2;
  --inn-neutral-300: #efe3d0;
  --inn-neutral-600: #5b6f7d;
  --inn-neutral-900: #21323e;

  /* =========================================
     2. SEMANTIC COLORS (Usage)
     ========================================= */
  /* Backgrounds */
  --color-bg-canvas: var(--inn-neutral-50);
  --color-bg-surface: var(--inn-neutral-100);
  --color-bg-surface-alt: var(--inn-neutral-200);
  
  /* Text */
  --color-text-main: var(--inn-neutral-900);
  --color-text-muted: var(--inn-neutral-600);
  --color-text-heading: var(--inn-navy-900);
  --color-text-inverse: var(--inn-neutral-50);
  
  /* Action / Brand */
  --color-brand-primary: var(--inn-navy-500);
  --color-brand-accent: var(--inn-gold-400);
  --color-border-subtle: var(--inn-neutral-300);

  /* Legacy Aliases (Backwards Compatibility) */
  --inn-navy: var(--inn-navy-500);
  --inn-navy-deep: var(--inn-navy-900);
  --inn-gold: var(--inn-gold-400);
  --inn-gold-dark: var(--inn-gold-600);
  --inn-cream: var(--inn-neutral-200);
  --inn-cream-2: var(--inn-neutral-300);
  --inn-text: var(--color-text-main);
  --inn-muted: var(--color-text-muted);
  --inn-white: var(--inn-neutral-50);

  /* =========================================
     3. TYPOGRAPHY
     ========================================= */
  /* Families */
  --font-heading: 'Aboreto', serif;
  --font-body: 'Work Sans', sans-serif;
  --font-accent: 'Arapey', serif;

  /* Scale (Fluid) */
  --text-display: clamp(2.5rem, 5vw, 3.8rem); /* H1 */
  --text-h1: clamp(1.8rem, 3vw, 2.4rem);      /* H2 */
  --text-h2: clamp(1.2rem, 2vw, 1.4rem);      /* H3 */
  --text-body: clamp(1.03125rem, 1.55vw, 1.15625rem);
  --text-sm: 0.875rem;
  
  /* Legacy Aliases */
  --inn-font-heading: var(--font-heading);
  --inn-font-body: var(--font-body);
  --inn-font-accent: var(--font-accent);
  --inn-size-h1: var(--text-display);
  --inn-size-h2: var(--text-h1);
  --inn-size-h3: var(--text-h2);
  --inn-size-body: var(--text-body);
  --inn-size-small: var(--text-sm);

  /* Leading */
  --leading-tight: 1.1;
  --leading-normal: 1.6;
  --inn-leading-heading: var(--leading-tight);
  --inn-leading-body: var(--leading-normal);

  /* =========================================
     4. SPACING SCALE
     ========================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 80px;
  
  /* Semantic Layout */
  --space-section-gap: clamp(60px, 6vw, 90px);
  --space-card-padding: var(--space-5);
  
  /* Legacy Aliases */
  --inn-space-hero-intro: clamp(40px, 4vw, 60px);
  --inn-space-intro-rooms: var(--space-section-gap);
  --inn-space-rooms-header-gap: clamp(30px, 3vw, 45px);
  
  /* =========================================
     5. UI EFFECTS
     ========================================= */
  /* Radius - Luxury (Sharp) */
  --radius-none: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  
  /* Legacy Aliases */
  --inn-radius-sm: var(--radius-sm);
  --inn-radius-md: var(--radius-md);
  --inn-radius-lg: var(--radius-lg);

  /* Shadows (Elevation) */
  --shadow-sm: 0 4px 20px rgba(15, 59, 87, 0.06);
  --shadow-md: 0 15px 35px rgba(15, 59, 87, 0.1);
  --shadow-lg: 0 30px 60px -10px rgba(10, 44, 66, 0.25);
  --shadow-text: 0 4px 12px rgba(0, 0, 0, 0.6);
  
  /* Legacy Aliases */
  --inn-shadow-sm: var(--shadow-sm);
  --inn-shadow-md: var(--shadow-md);
  --inn-shadow-lg: var(--shadow-lg);
  --inn-shadow-text: var(--shadow-text);

  /* =========================================
     6. BREAKPOINTS & GRID
     ========================================= */
  --grid-container: 1366px;
  --grid-gutter: var(--space-5);
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* =========================================
     7. COMPONENT SEMANTICS
     ========================================= */
  /* Forms */
  --form-bg: var(--inn-neutral-50);
  --form-border: var(--inn-neutral-300);
  --form-text: var(--inn-neutral-900);
  --form-placeholder: var(--inn-neutral-600);
  --form-focus-ring: var(--inn-gold-400);
  
  /* Feedback */
  --color-success: #2e7d32;
  --color-success-bg: #e8f5e9;
  --color-error: #c62828;
  --color-error-bg: #ffebee;
  --color-info: #0277bd;
  --color-info-bg: #e1f5fe;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  
  --inn-transition-base: 0.4s var(--ease-out-expo);
  --inn-transition-hover: 0.5s var(--ease-in-out-luxury);
}