/**
 * Bogosland Design Tokens — Luxury Moroccan Spa Edition
 * Complete CSS custom property system: colors, typography, spacing,
 * shadows, patterns, transitions, z-index layers
 */

/* ─── Google Fonts import ─── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {

  /* ════════════════════════════════════════════
     COLOR PALETTE — Moroccan Spa
  ════════════════════════════════════════════ */

  /* Primary Backgrounds — warm dark espresso (lighter) */
  --bgl-black:         #1A1512;
  --bgl-card:          #221D19;
  --bgl-alt:           #1E1916;
  --bgl-charcoal:      #231E1A;
  --bgl-dark:          #1C1714;
  --bgl-dark-2:        #2B2420;

  /* Gold Accents */
  --bgl-gold:          #C9A96E;
  --bgl-gold-bright:   #DFB97A;
  --bgl-gold-hover:    #D4AF7A;
  --bgl-gold-dim:      #8A6E3E;
  --bgl-gold-subtle:   rgba(201, 169, 110, 0.08);
  --bgl-gold-glow:     rgba(201, 169, 110, 0.18);

  /* Teal / Green — Moroccan secondary */
  --bgl-teal:          #2d5a4f;
  --bgl-teal-light:    #3a7266;
  --bgl-teal-dim:      rgba(45, 90, 79, 0.12);

  /* Borders */
  --bgl-border:        #2A2018;
  --bgl-border-light:  #1E1810;
  --bgl-border-gold:   rgba(201, 169, 110, 0.25);

  /* Text */
  --bgl-white:         #F5F0E8;
  --bgl-white-dim:     #C8C0B0;
  --bgl-gray:          #9A9080;
  --bgl-gray-dark:     #5A5248;
  --bgl-muted:         #9A9080;

  /* Utility */
  --bgl-success:       #2ECC71;
  --bgl-error:         #E74C3C;
  --bgl-whatsapp:      #25D366;


  /* ════════════════════════════════════════════
     TYPOGRAPHY
  ════════════════════════════════════════════ */

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-arabic:  'Noto Sans Arabic', 'Noto Naskh Arabic', 'Arabic Typesetting', serif;

  /* Font sizes — fluid where applicable */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  clamp(1.75rem, 3vw, 2.25rem);
  --text-4xl:  clamp(2rem, 4vw, 3rem);
  --text-5xl:  clamp(2.5rem, 5vw, 4rem);
  --text-hero: clamp(3.5rem, 7vw, 7rem);

  /* Font features — premium rendering */
  --font-features: 'kern' 1, 'liga' 1, 'calt' 1;


  /* ════════════════════════════════════════════
     SPACING — Generous luxury scale
  ════════════════════════════════════════════ */

  --space-2:       0.5rem;
  --space-3:       0.75rem;
  --space-4:       1rem;
  --space-6:       1.5rem;
  --space-8:       2rem;
  --space-12:      3rem;
  --space-16:      4rem;
  --space-24:      6rem;
  --space-32:      8rem;
  --space-48:      12rem;
  --space-64:      16rem;
  --space-section: clamp(5rem, 8vw, 8rem);


  /* ════════════════════════════════════════════
     SHADOWS — Gold glow system
  ════════════════════════════════════════════ */

  --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:          0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg:          0 8px 48px rgba(0, 0, 0, 0.6);
  --shadow-xl:          0 16px 64px rgba(0, 0, 0, 0.7);
  --shadow-gold:        0 0 0 1px rgba(201, 169, 110, 0.2), 0 8px 40px rgba(201, 169, 110, 0.14);
  --shadow-gold-strong: 0 0 0 1px rgba(201, 169, 110, 0.3), 0 12px 60px rgba(201, 169, 110, 0.22);
  --shadow-gold-lift:   0 20px 60px rgba(201, 169, 110, 0.18), 0 0 0 1px rgba(201, 169, 110, 0.25);
  --shadow-glow:        0 0 40px rgba(201, 169, 110, 0.25), 0 8px 32px rgba(0, 0, 0, 0.5);


  /* ════════════════════════════════════════════
     MOROCCAN ZELLIGE PATTERN
     Subtle geometric star/diamond tile at 4% opacity
  ════════════════════════════════════════════ */

  --moroccan-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23C9A96E' stroke-width='0.5' opacity='0.4'%3E%3C!-- outer star points --%3E%3Cpolygon points='30,4 34,18 48,14 38,24 52,30 38,36 48,46 34,42 30,56 26,42 12,46 22,36 8,30 22,24 12,14 26,18' fill='none'/%3E%3C!-- inner diamond --%3E%3Crect x='21' y='21' width='18' height='18' transform='rotate(45 30 30)' fill='none'/%3E%3C!-- center cross --%3E%3Cline x1='30' y1='22' x2='30' y2='38'/%3E%3Cline x1='22' y1='30' x2='38' y2='30'/%3E%3C/g%3E%3C/svg%3E");
  --moroccan-size: 60px 60px;
  --moroccan-opacity: 0.04;


  /* ════════════════════════════════════════════
     BORDER RADIUS
     Sharp = luxury. Minimal rounding.
  ════════════════════════════════════════════ */

  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;


  /* ════════════════════════════════════════════
     TRANSITIONS & EASING
  ════════════════════════════════════════════ */

  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition:       all 0.3s var(--ease-in-out);
  --transition-fast:  all 0.15s var(--ease-in-out);
  --transition-slow:  all 0.65s var(--ease-out-expo);
  --transition-color: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;


  /* ════════════════════════════════════════════
     Z-INDEX LAYERS
  ════════════════════════════════════════════ */

  --z-base:    1;
  --z-above:   10;
  --z-nav:     1000;
  --z-overlay: 1100;
  --z-modal:   1200;
  --z-toast:   1300;
  --z-float:   9999;


  /* ════════════════════════════════════════════
     LAYOUT
  ════════════════════════════════════════════ */

  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
}