/* ==========================================================================
   KJ SUITES DIANI — LUXURY DESIGN TOKENS & SYSTEM
   Brand Architecture: Modern Luxury Private Estate & Boutique Suites
   Typography: Playfair Display (Headings) + Montserrat (Body & UI)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  /* ------------------------------------------------------------------------
     1. BRAND COLOR PALETTE TOKENS
     ------------------------------------------------------------------------ */
  /* Primary Navy (Extracted & Expanded from Logo) */
  --color-navy-900: #0B1726; /* Deepest Midnight Navy (Dark Section Grounds) */
  --color-navy-800: #0F2238; /* Rich Navy (Card backgrounds on dark) */
  --color-navy-700: #1B365D; /* Core Brand Navy (Primary Logo Accent & Headings) */
  --color-navy-600: #234161; /* Medium Slate Navy */
  --color-navy-500: #2C4D75; /* Lighter Slate Navy (Interactive hovers) */
  --color-navy-100: #EBF1F7; /* Ultra Light Navy Tint */

  /* Champagne Gold (Extracted & Expanded from Logo) */
  --color-gold-700: #88724D; /* Deep Bronze Gold (High Contrast Text) */
  --color-gold-600: #A89269; /* Rich Brass Gold */
  --color-gold-500: #C8B490; /* Core Champagne Gold (Brand Metallic Accent) */
  --color-gold-400: #D8C7A5; /* Medium Champagne */
  --color-gold-300: #E4D7C1; /* Soft Champagne Highlight */
  --color-gold-100: #F7F3EB; /* Soft Gold Shimmer Base */

  /* Environmental Accents (Diani Coastal & Estate Garden) */
  --color-palm-800: #162E22; /* Deep Diani Palm Shadow */
  --color-palm-600: #1E3A2B; /* Diani Estate Garden Green */
  --color-palm-100: #E9F0EC; /* Soft Garden Mint Shimmer */

  --color-ocean-700: #12575D; /* Deep Indian Ocean Blue */
  --color-ocean-500: #1B7A82; /* Diani Lagoon Turquoise */
  --color-ocean-100: #E6F3F4; /* Coastal Water Tint */

  /* Warm Neutrals & Surfaces */
  --color-cream-100: #FAF5EB; /* Primary Canvas Background (Warm Off-White) */
  --color-cream-200: #F2EAD9; /* Secondary Surface / Soft Linen Cards */
  --color-cream-300: #E9DEC9; /* Muted Linen Shading */

  --color-obsidian-900: #14181F; /* Primary Dark Text (High Legibility) */
  --color-obsidian-700: #2D333F; /* Secondary Dark Text */
  --color-obsidian-500: #5F6675; /* Muted Slate Grey Text */
  --color-obsidian-300: #9CA3AF; /* Light Muted Grey */
  --color-obsidian-100: #E5E7EB; /* Subtle Divider Lines */

  /* Semantic UI State Colors */
  --color-success: #2E7D32;
  --color-warning: #D97706;
  --color-error: #C62828;
  --color-info: #1B7A82;

  /* ------------------------------------------------------------------------
     2. TYPOGRAPHY FONT FAMILIES
     ------------------------------------------------------------------------ */
  --font-family-display: 'Playfair Display', Georgia, serif;
  --font-family-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ------------------------------------------------------------------------
     3. FLUID TYPOGRAPHY SCALE
     ------------------------------------------------------------------------ */
  --font-size-hero: clamp(2.5rem, 5.5vw, 4.25rem);    /* 40px -> 68px */
  --font-size-h1: clamp(2.125rem, 4vw, 3.25rem);       /* 34px -> 52px */
  --font-size-h2: clamp(1.75rem, 3vw, 2.5rem);          /* 28px -> 40px */
  --font-size-h3: clamp(1.375rem, 2.2vw, 1.875rem);    /* 22px -> 30px */
  --font-size-h4: clamp(1.125rem, 1.5vw, 1.375rem);    /* 18px -> 22px */
  --font-size-body-lg: clamp(1.0625rem, 1.2vw, 1.25rem); /* 17px -> 20px */
  --font-size-body-base: 1rem;                          /* 16px */
  --font-size-body-sm: 0.875rem;                        /* 14px */
  --font-size-overline: 0.75rem;                        /* 12px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.12;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --line-height-loose: 1.8;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.12em;
  --letter-spacing-widest: 0.22em;

  /* ------------------------------------------------------------------------
     4. ELEVATION & SHADOWS
     ------------------------------------------------------------------------ */
  --shadow-subtle: 0 4px 20px rgba(27, 54, 93, 0.04);
  --shadow-medium: 0 10px 30px rgba(27, 54, 93, 0.08);
  --shadow-luxury: 0 20px 50px rgba(11, 23, 38, 0.12);
  --shadow-gold-glow: 0 8px 25px rgba(200, 180, 144, 0.25);

  /* ------------------------------------------------------------------------
     5. SPACING & LAYOUT TOKENS
     ------------------------------------------------------------------------ */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs:  0.5rem;  /* 8px */
  --space-sm:  0.75rem; /* 12px */
  --space-md:  1rem;    /* 16px */
  --space-lg:  1.5rem;  /* 24px */
  --space-xl:  2.5rem;  /* 40px */
  --space-2xl: 4rem;    /* 64px */
  --space-3xl: 6rem;    /* 96px */

  /* Borders & Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --border-width-thin: 1px;
  --border-width-thick: 2px;

  /* Transitions */
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}