/* ==========================================================================
   PILMATE — DESIGN TOKENS / VARIABLES  (Purple Premium Theme)
   All CSS custom properties are defined here. Import this file first
   in every stylesheet that needs access to the design system.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---- Purple Brand Palette ---- */
  --purple-deep:    #270c3c;
  --purple-primary: #560082;
  --purple-accent:  #7c3aa5;
  --purple-light:   #b589d4;
  --purple-tint:    #EEE7F6;

  /* ---- Semantic Brand Colors (preserved names for CSS compatibility) ---- */
  --teal:        #560082;   /* Primary Purple  */
  --teal-light:  #EEE7F6;   /* Purple Tint     */
  --teal-mid:    #7c3aa5;   /* Accent Purple   */
  --teal-dark:   #270c3c;   /* Deep Purple     */

  /* ---- Neutral Palette (purple-tinted) ---- */
  --ink:     #1a0a2e;
  --ink2:    #2d1050;
  --muted:   #6b5c7e;
  --border:  #e2d9ee;
  --surface: #f8f5fc;
  --white:   #FFFFFF;

  /* ---- Shape / Border Radius ---- */
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 28px;

  /* ---- Typography (Manrope — brand font) ---- */
  --font-body:      'Manrope', sans-serif;
  --font-heading:   'Manrope', sans-serif;
  --font-size-base: 18px;
  --font-size-body-mobile: 16px;

  --h1-size: clamp(40px, 5vw, 64px);
  --h2-size: clamp(32px, 3.5vw, 48px);
  --h3-size: clamp(24px, 2.5vw, 32px);
  --h4-size: clamp(20px, 2vw, 24px);

  --line-height-heading: 1.2;
  --line-height-body:    1.6;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad:   24px;

  /* ---- Spacing scale ---- */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  80px;
  --space-8:  120px;

  --section-pad-v: 100px;
  --section-pad-v-mobile: 64px;
  --section-pad-h: var(--container-pad);

  /* ---- Breakpoints (reference — use in responsive.css) ---- */
  --bp-mobile-max:  767px;
  --bp-tablet-min:  768px;
  --bp-tablet-max:  1023px;
  --bp-laptop-min:  1024px;
  --bp-laptop-max:  1279px;
  --bp-desktop-min: 1280px;
  --bp-desktop-max: 1439px;
  --bp-xl-min:      1440px;

  /* ---- Gradients ---- */
  --gradient-hero:    linear-gradient(135deg, #270c3c 0%, #3d1060 45%, #560082 100%);
  --gradient-cta:     linear-gradient(135deg, #270c3c 0%, #560082 100%);
  --gradient-primary: linear-gradient(135deg, #560082 0%, #7c3aa5 100%);
  --gradient-light:   linear-gradient(135deg, #f8f5fc 0%, #EEE7F6 100%);
  --gradient-card:    linear-gradient(135deg, rgba(86,0,130,.04) 0%, rgba(124,58,165,.08) 100%);

  /* ---- Shadows (purple-tinted) ---- */
  --shadow-sm:   0 2px 10px rgba(39, 12, 60, 0.08);
  --shadow-md:   0 8px 28px rgba(86, 0, 130, 0.15);
  --shadow-lg:   0 20px 60px rgba(39, 12, 60, 0.20);
  --shadow-glow: 0 0 32px rgba(124, 58, 165, 0.28);

  /* ---- Transitions ---- */
  --transition:      0.2s ease;
  --transition-med:  0.3s ease;
  --transition-slow: 0.5s ease;

  /* ---- Z-index Scale ---- */
  --z-sticky-content: 10;
  --z-nav-backdrop:   90;
  --z-nav:            100;
  --z-nav-drawer:     110;
  --z-nav-control:    120;
  --z-modal:          200;
  --z-toast:          300;
}