/* ==========================================================================
   iCOTTON DESIGN SYSTEM TOKENS (tokens.css)
   Theme: iCotton Premium Hospitality & Architectural Living
   Character: Minimal Luxury · Architectural · Serene · Reliable · Hospitality
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. COLOR SYSTEM (Strict iCotton Palette)
     ------------------------------------------------------------------------ */
  /* Dominant Primary: Sage */
  --color-sage: #6F9298;
  --color-primary: #6F9298;
  --color-primary-hover: #5D7E84;
  --color-primary-rgb: 111, 146, 152;
  --color-primary-light: rgba(111, 146, 152, 0.08);

  /* Secondary / Details: Warm Sand */
  --color-warm-sand: #C8B59A;
  --color-secondary: #C8B59A;
  --color-secondary-hover: #B8A385;
  --color-sand-light: rgba(200, 181, 154, 0.15);

  /* Limited Highlights: Gold Beige */
  --color-gold-beige: #B89D78;
  --color-accent: #B89D78;
  --color-gold: #B89D78;

  /* Typography & Dark Elements: Charcoal */
  --color-charcoal: #2F3331;
  --color-text: #2F3331;
  --color-dark: #2F3331;
  --color-text-muted: #6B7280;

  /* Backgrounds & Canvas: Off-White & Pure White */
  --color-off-white: #F8F6F1;
  --color-background: #F8F6F1;
  --color-surface: #FFFFFF;
  --color-card-bg: #FFFFFF;
  --color-ivory: #F8F6F1;

  /* Subtle Architectural Borders */
  --color-border: #E8E5DC;
  --color-border-subtle: rgba(111, 146, 152, 0.12);
  --color-soft-gray: #E8E5DC;
  --color-light-gray: #F0EDE5;

  /* System Feedback Colors */
  --color-success: #528B65;
  --color-warning: #C89A2B;
  --color-error: #C04B4B;
  --color-info: #6F9298;

  /* ------------------------------------------------------------------------
     2. TYPOGRAPHY TOKENS (Strictly Almarai)
     ------------------------------------------------------------------------ */
  --font-family-base: 'Almarai', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-heading: 'Almarai', sans-serif;

  /* ------------------------------------------------------------------------
     3. SPACING TOKENS (Airy Whitespace Scale)
     ------------------------------------------------------------------------ */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  /* ------------------------------------------------------------------------
     4. BORDER RADIUS TOKENS (16px – 24px System)
     ------------------------------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-card: 16px;
  --radius-container: 24px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------------
     5. ARCHITECTURAL 2PX & 1PX LINES
     ------------------------------------------------------------------------ */
  --border-line: 2px solid var(--color-warm-sand);
  --border-line-subtle: 2px solid rgba(111, 146, 152, 0.15);
  --border-thin: 1px solid var(--color-border);
  --border-card: 1px solid rgba(200, 181, 154, 0.25);

  /* ------------------------------------------------------------------------
     6. SOFT LUXURY SHADOWS
     ------------------------------------------------------------------------ */
  --shadow-subtle: 0 4px 20px rgba(47, 51, 49, 0.03);
  --shadow-soft: 0 10px 30px rgba(47, 51, 49, 0.05);
  --shadow-float: 0 20px 45px rgba(47, 51, 49, 0.07);

  /* ------------------------------------------------------------------------
     7. GLASS EFFECTS & TRANSITIONS
     ------------------------------------------------------------------------ */
  --glass-bg: rgba(248, 246, 241, 0.88);
  --glass-blur: blur(16px);
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}