/* ============================================================
   NABUGABO HOLIDAY CENTER — CSS DESIGN TOKENS
   Aesthetic: Royal Lakeside — deep violet-purple, soft mauves,
   earthy charcoal, sandy neutrals — boutique lakeside energy.
   Fonts: Fraunces (display, editorial) + Outfit (body, UI)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,600&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* ── BRAND PALETTE — Deep Royal Purple ── */
  --color-amber-deep:    #4a1d8a;   /* Deep violet */
  --color-amber-mid:     #6b32b8;   /* Rich purple */
  --color-amber-bright:  #9254d4;   /* Bright violet */
  --color-amber-pale:    #f0eafa;   /* Soft lavender mist */

  /* Mauve wave — warm purple accent */
  --color-coral-deep:    #7b2d8b;   /* Deep magenta-purple */
  --color-coral-mid:     #a04fba;   /* Warm mauve */
  --color-coral-light:   #c47dd6;   /* Soft orchid */
  --color-coral-pale:    #f5e8fb;   /* Blush lavender */

  /* Charcoal huts — grounding dark tones */
  --color-earth-deep:    #1a1a1a;   /* Darkest charcoal */
  --color-earth-mid:     #2d2633;   /* Dark purple-charcoal */
  --color-earth-light:   #4a4056;   /* Lighter purple-grey */
  --color-earth-pale:    #8a7e98;   /* Dusty mauve */

  /* Sand & warmth (supporting) */
  --color-sand-dark:     #3a1a6b;   /* Dark purple shadow */
  --color-sand-mid:      #7a52c0;   /* Mid purple */
  --color-sand-warm:     #c8a8e8;   /* Soft lilac */
  --color-sand-pale:     #f5f0fe;   /* Bleached lavender */

  --color-terracotta:    #8b3db8;   /* Purple fired accent */
  --color-terracotta-lt: #b86ee0;   /* Warm violet glow */
  --color-sunset:        #7c3aed;   /* Violet purple */

  /* ── Kept for compatibility — remapped to purple tones ── */
  --color-lake-deep:     #2d1a4a;   /* Deep purple */
  --color-lake-mid:      #6b32b8;   /* Purple */
  --color-lake-bright:   #9254d4;   /* Bright violet */
  --color-lake-pale:     #f0eafa;   /* Pale lavender */

  --color-forest-dark:   #2d2633;   /* Deep purple-charcoal */
  --color-forest-mid:    #4a4056;   /* Medium purple-grey */
  --color-forest-light:  #6b8c5e;   /* Muted olive — kept for success */
  --color-forest-pale:   #eee8f4;   /* Warm lavender mist */

  /* ── NEUTRAL PALETTE ── */
  --color-black:         #120f18;
  --color-charcoal:      #1e1826;
  --color-dark:          #2d2633;
  --color-mid:           #6b6080;
  --color-muted:         #9a8eb0;
  --color-light:         #d0c8e2;
  --color-pale:          #f0ebf8;
  --color-white:         #fdfbff;

  /* ── SEMANTIC COLORS ── */
  --color-primary:       var(--color-amber-mid);
  --color-primary-dark:  var(--color-amber-deep);
  --color-primary-light: var(--color-amber-bright);
  --color-accent:        var(--color-coral-mid);
  --color-accent-warm:   var(--color-terracotta);
  --color-success:       #5a9a5e;
  --color-warning:       var(--color-sand-warm);
  --color-error:         #c0392b;
  --color-info:          var(--color-amber-bright);

  /* ── BACKGROUND LAYERS ── */
  --bg-page:             #faf8fd;   /* Soft lavender-white */
  --bg-surface:          var(--color-white);
  --bg-surface-alt:      var(--color-sand-pale);
  --bg-dark:             var(--color-earth-deep);
  --bg-darker:           #100d16;
  --bg-muted:            #f3f0f9;

  /* ── TEXT ── */
  --text-primary:        var(--color-earth-mid);
  --text-secondary:      var(--color-mid);
  --text-muted:          var(--color-muted);
  --text-inverse:        var(--color-white);
  --text-accent:         var(--color-amber-mid);
  --text-link:           var(--color-amber-deep);
  --text-link-hover:     var(--color-coral-deep);

  /* ── TYPOGRAPHY ── */
  --font-display:        'Fraunces', Georgia, serif;
  --font-body:           'Outfit', 'Helvetica Neue', sans-serif;
  --font-mono:           'Courier New', monospace;

  --text-xs:     0.75rem;
  --text-sm:     0.875rem;
  --text-base:   1rem;
  --text-md:     1.125rem;
  --text-lg:     1.25rem;
  --text-xl:     1.5rem;
  --text-2xl:    2rem;
  --text-3xl:    2.5rem;
  --text-4xl:    3.25rem;
  --text-5xl:    4.5rem;
  --text-hero:   clamp(3rem, 8vw, 6rem);

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── SPACING (8px base) ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── LAYOUT ── */
  --container-xs:   480px;
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
  --padding-page:   clamp(1rem, 5vw, 3rem);

  /* ── BORDERS & RADIUS ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --border-hairline: 1px solid rgba(0,0,0,0.08);
  --border-thin:     1px solid var(--color-light);
  --border-mid:      2px solid var(--color-light);
  --border-accent:   2px solid var(--color-accent);
  --border-primary:  2px solid var(--color-primary);

  /* ── SHADOWS (purple-tinted) ── */
  --shadow-xs:  0 1px 3px rgba(45,38,51,0.08);
  --shadow-sm:  0 2px 8px rgba(45,38,51,0.10);
  --shadow-md:  0 4px 16px rgba(45,38,51,0.12);
  --shadow-lg:  0 8px 32px rgba(45,38,51,0.15);
  --shadow-xl:  0 16px 56px rgba(45,38,51,0.18);
  --shadow-card: 0 2px 12px rgba(45,38,51,0.10), 0 0 0 1px rgba(45,38,51,0.04);
  --shadow-glow: 0 0 40px rgba(107,50,184,0.30);

  /* ── TRANSITIONS ── */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.6, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;
  --duration-xslow: 700ms;

  /* ── Z-INDEX ── */
  --z-below:    -1;
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-drawer:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-header:   500;
  --z-top:      999;

  /* ── GRADIENTS (purple-inspired) ── */
  --gradient-lake:      linear-gradient(135deg, var(--color-amber-deep) 0%, var(--color-amber-mid) 50%, var(--color-amber-bright) 100%);
  --gradient-forest:    linear-gradient(135deg, var(--color-earth-deep) 0%, var(--color-earth-mid) 100%);
  --gradient-sunset:    linear-gradient(135deg, var(--color-coral-deep) 0%, var(--color-amber-mid) 100%);
  --gradient-warm:      linear-gradient(180deg, var(--color-sand-pale) 0%, var(--bg-page) 100%);
  --gradient-overlay:   linear-gradient(to bottom, rgba(18,9,30,0) 0%, rgba(18,9,30,0.78) 100%);
  --gradient-hero:      linear-gradient(160deg, rgba(18,9,30,0.90) 0%, rgba(74,29,138,0.72) 55%, rgba(123,45,139,0.45) 100%);

  /* ── GLASS EFFECT ── */
  --glass-bg:          rgba(255, 255, 255, 0.10);
  --glass-border:      rgba(255, 255, 255, 0.18);
  --glass-blur:        blur(16px);

  /* ── STATUS COLORS ── */
  --status-pending:    #9254d4;
  --status-confirmed:  #5a9a5e;
  --status-checked-in: #6b32b8;
  --status-checked-out:#8a6bb8;
  --status-cancelled:  #c0392b;
  --status-placed:     #6b32b8;
  --status-preparing:  #9254d4;
  --status-ready:      #5a9a5e;
  --status-delivered:  #8a6bb8;
}

/* ── DARK MODE ── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:       #141020;
    --bg-surface:    var(--color-dark);
    --bg-surface-alt: #2d2040;
    --text-primary:  var(--color-pale);
    --text-secondary:var(--color-light);
    --text-muted:    var(--color-muted);
    --border-thin:   1px solid rgba(255,255,255,0.1);
    --shadow-card:   0 2px 12px rgba(0,0,0,0.3);
  }
}