/*
 * KWIBUS FUN BUS — DESIGN TOKENS
 * Bron: manus-source/client/src/index.css (OKLCH values)
 * Theme: "Royal Purple" — Premium & Elegant
 */

:root {
  /* ═══════════════════════════════════════
     COLORS — exact uit Manus index.css
     ═══════════════════════════════════════ */

  /* Primary purple scale */
  --color-primary:        oklch(0.38 0.18 295);   /* #5B21B6 — buttons, CTA, links */
  --color-primary-dark:   oklch(0.28 0.20 295);   /* #4C1D95 — hover states */
  --color-primary-light:  oklch(0.55 0.20 295);   /* #7C3AED — highlights */
  --color-primary-pale:   oklch(0.85 0.10 295);   /* #DDD6FE — pale backgrounds */

  /* Accent gold */
  --color-gold:           oklch(0.75 0.15 75);    /* #D97706 — accent, gold buttons */
  --color-gold-dark:      oklch(0.65 0.18 75);    /* darker gold for gradients */

  /* Backgrounds */
  --color-hero-bg:        oklch(0.14 0.12 295);   /* #1E0A3C — hero/dark sections */
  --color-bg:             #ffffff;
  --color-bg-alt:         oklch(0.98 0.01 295);   /* very light purple tint */
  --color-bg-pale:        oklch(0.96 0.02 295);   /* light purple background */

  /* Text */
  --color-text:           oklch(0.15 0.02 295);   /* near-black with purple tint */
  --color-text-muted:     oklch(0.50 0.05 295);   /* muted/secondary text */
  --color-text-on-dark:   #ffffff;
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.80);

  /* Borders */
  --color-border:         oklch(0.88 0.03 295);
  --color-border-light:   oklch(0.92 0.04 295);

  /* Semantic */
  --color-destructive:    oklch(0.577 0.245 27.325);
  --color-success:        #16a34a;
  --color-star:           oklch(0.75 0.15 75);    /* gold stars */

  /* Section gradients (used in components) */
  --gradient-hero:        linear-gradient(135deg, oklch(0.14 0.12 295) 0%, oklch(0.20 0.15 295) 50%, oklch(0.12 0.10 295) 100%);
  --gradient-purple:      linear-gradient(135deg, oklch(0.20 0.15 295) 0%, oklch(0.28 0.18 295) 100%);
  --gradient-btn-primary: linear-gradient(135deg, oklch(0.45 0.20 295), oklch(0.35 0.22 295));
  --gradient-btn-primary-hover: linear-gradient(135deg, oklch(0.50 0.22 295), oklch(0.40 0.24 295));
  --gradient-btn-gold:    linear-gradient(135deg, oklch(0.75 0.15 75), oklch(0.65 0.18 75));
  --gradient-divider:     linear-gradient(90deg, transparent, oklch(0.45 0.20 295), oklch(0.75 0.15 75), oklch(0.45 0.20 295), transparent);

  /* Glass effects */
  --glass-bg:             rgba(255, 255, 255, 0.08);
  --glass-border:         rgba(255, 255, 255, 0.15);
  --glass-dark-bg:        rgba(30, 10, 60, 0.85);
  --glass-dark-border:    rgba(167, 139, 250, 0.2);

  /* ═══════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════ */
  --font-display: 'Playfair Display', serif;
  --font-sans:    'Sora', sans-serif;

  /* Scale */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Weights */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* ═══════════════════════════════════════
     SPACING
     ═══════════════════════════════════════ */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ═══════════════════════════════════════
     RADIUS
     ═══════════════════════════════════════ */
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius:      0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ═══════════════════════════════════════
     SHADOWS
     ═══════════════════════════════════════ */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.15);
  --shadow-card:  0 4px 24px rgba(91, 33, 182, 0.08);
  --shadow-card-hover: 0 12px 40px rgba(91, 33, 182, 0.18);
  --shadow-purple: 0 4px 20px rgba(91, 33, 182, 0.4);
  --shadow-purple-lg: 0 8px 30px rgba(91, 33, 182, 0.6);
  --shadow-gold:  0 4px 20px rgba(217, 119, 6, 0.4);
  --shadow-gold-lg: 0 8px 30px rgba(217, 119, 6, 0.6);

  /* ═══════════════════════════════════════
     TRANSITIONS
     ═══════════════════════════════════════ */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 300ms ease;

  /* ═══════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════ */
  --container-max: 1280px;
  --container-pad: 1rem;
  --header-h: 72px;
  --topbar-h: 44px;
}

/* Responsive token overrides */
@media (min-width: 640px) {
  :root {
    --container-pad: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad: 2rem;
  }
}