/**
 * RealEvents Design System
 *
 * This file contains all design tokens as CSS custom properties.
 * RealEvents design emphasizes simplicity, professionalism, and accessibility
 * with vibrant blue accents, generous rounded corners, and ample whitespace.
 */

@layer base {
  :root {
    /* ========================================
       COLOR SYSTEM - RealEvents Palette
       ======================================== */

    /* Primary Brand Colors */
    --realevents-blue: 0 107 255;           /* #006BFF - Primary brand color, CTAs, links */
    --realevents-navy: 11 53 88;            /* #0B3558 - Primary text, headings */
    --realevents-navy-secondary: 25 72 112; /* #194870 - Alternative dark */

    /* Neutral/Grayscale */
    --realevents-gray-dark: 71 103 136;     /* #476788 - Body text, descriptions */
    --realevents-gray-light: 166 187 209;   /* #A6BBD1 - Borders, inactive states */
    --realevents-gray-divider: 212 224 237; /* #D4E0ED - Dividers, subtle borders */
    --realevents-bg-subtle: 240 243 248;    /* #F0F3F8 - Card backgrounds */
    --realevents-bg-lightest: 248 249 251;  /* #F8F9FB - Page backgrounds */
    --realevents-white: 255 255 255;        /* #FFFFFF - Pure white */
    --realevents-black: 0 0 0;              /* #000000 - Rare, hero headlines only */

    /* Vibrant Accent Colors - For CTAs, highlights, state indicators */
    --color-coral: 255 107 107;           /* #FF6B6B - Vibrant coral/red for important actions */
    --color-orange: 255 159 64;           /* #FF9F40 - Bright orange for warnings/highlights */
    --color-amber: 255 193 7;             /* #FFC107 - Amber for warnings */
    --color-lime: 139 195 74;             /* #8BC34A - Fresh lime for success states */
    --color-teal: 38 166 154;             /* #26A69A - Teal for information/accents */
    --color-purple: 156 39 176;           /* #9C27B0 - Purple for premium/special features */
    --color-pink: 236 64 122;             /* #EC407A - Pink for highlights/featured items */
    --color-indigo: 63 81 181;            /* #3F51B5 - Indigo for alternative CTAs */

    /* Pastel Colors - For subtle backgrounds, cards, soft accents */
    --color-peach: 248 238 230;           /* #F8EEE6 - Warm peach background */
    --color-mint: 232 245 233;            /* #E8F5E9 - Soft mint green background */
    --color-lavender: 243 237 247;        /* #F3EDF7 - Gentle lavender background */
    --color-sky: 227 242 253;             /* #E3F2FD - Light sky blue background */
    --color-rose: 255 235 238;            /* #FFEBEE - Pale rose background */
    --color-honey: 255 248 225;           /* #FFF8E1 - Honey yellow background */
    --color-aqua: 224 247 250;            /* #E0F7FA - Aqua cyan background */
    --color-cream: 250 248 246;           /* #FAF8F6 - Neutral cream background */

    /* Semantic tokens for easy reference */
    --color-primary: var(--realevents-blue);
    --color-text-primary: var(--realevents-navy);
    --color-text-body: var(--realevents-gray-dark);
    --color-border: var(--realevents-gray-light);
    --color-border-subtle: var(--realevents-gray-divider);
    --color-bg: var(--realevents-white);
    --color-bg-subtle: var(--realevents-bg-subtle);
    --color-bg-lightest: var(--realevents-bg-lightest);


    /* ========================================
       TYPOGRAPHY SYSTEM
       ======================================== */

    /* Font Families */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-body: var(--font-primary);
    --font-heading: var(--font-primary);

    /* Font Sizes (rem/px) - RealEvents scale */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px - Body text */
    --text-xl: 1.25rem;      /* 20px - Large body */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.75rem;     /* 28px - H3 */
    --text-4xl: 2.375rem;    /* 38px - H2 */
    --text-5xl: 3.125rem;    /* 50px - H1 */
    --text-6xl: 4.25rem;     /* 68px - Hero headline */

    /* Font Weights */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-tight: 1.2;    /* Headings */
    --leading-snug: 1.4;     /* Large text */
    --leading-normal: 1.5;   /* Small text */
    --leading-relaxed: 1.6;  /* Body text */
    --leading-base: 2;       /* Global base */


    /* ========================================
       SPACING SYSTEM - 8px Grid
       ======================================== */

    --space-1: 0.25rem;      /* 4px */
    --space-1-5: 0.375rem;   /* 6px */
    --space-2: 0.5rem;       /* 8px */
    --space-2-5: 0.625rem;   /* 10px */
    --space-3: 0.75rem;      /* 12px */
    --space-3-5: 0.875rem;   /* 14px */
    --space-4: 1rem;         /* 16px */
    --space-4-5: 1.125rem;   /* 18px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-9: 2.25rem;      /* 36px */
    --space-10-5: 2.625rem;  /* 42px */
    --space-12: 3rem;        /* 48px */
    --space-14: 3.5rem;      /* 56px */


    /* ========================================
       BORDER RADIUS - RealEvents Rounded Style
       ======================================== */

    --radius-sm: 0.25rem;    /* 4px - Small elements */
    --radius-md: 0.5rem;     /* 8px - Buttons, inputs */
    --radius-lg: 1rem;       /* 16px - Cards */
    --radius-xl: 1.5rem;     /* 24px - Large cards */
    --radius-full: 50%;      /* Circular - avatars */


    /* ========================================
       SHADOW SYSTEM - RealEvents Soft Shadows
       ======================================== */

    /* Card/Component Shadow - Multi-layered subtle shadow */
    --shadow-card: 0px 4px 5px 0px rgba(71, 103, 136, 0.039),
                   0px 8px 15px 0px rgba(71, 103, 136, 0.031),
                   0px 30px 50px 0px rgba(71, 103, 136, 0.078);

    /* Focus State Shadow - Blue glow for accessibility */
    --shadow-focus: 0 0 0 4px rgba(0, 107, 255, 0.24);

    /* Subtle Focus for Links */
    --shadow-focus-subtle: 0 0 0 1px rgba(0, 107, 255, 0.16);


    /* ========================================
       RESPONSIVE BREAKPOINTS
       ======================================== */

    --screen-mobile: 480px;
    --screen-tablet: 768px;
    --screen-desktop-sm: 992px;
    --screen-desktop: 1200px;


    /* ========================================
       LAYOUT DIMENSIONS
       ======================================== */

    --header-height: 78px;
    --header-height-mobile: 56px;
    --container-max: 1900px;
    --content-max: 792px;
    --content-md: 690px;
    --content-sm: 616px;


    /* ========================================
       TRANSITIONS
       ======================================== */

    --transition-fast: 0.2s all linear;
    --transition-base: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;


    /* ========================================
       GRADIENT SYSTEM - Modern Gradients
       ======================================== */

    /* Purple & Pink Gradients */
    --gradient-purple-pink: linear-gradient(135deg, rgb(var(--color-purple)) 0%, rgb(var(--color-pink)) 100%);
    --gradient-purple-pink-overlay: linear-gradient(135deg, rgba(156, 39, 176, 0.92) 0%, rgba(236, 64, 122, 0.88) 100%);

    /* Coral & Orange Gradients */
    --gradient-coral-orange: linear-gradient(135deg, rgb(var(--color-coral)) 0%, rgb(var(--color-orange)) 100%);

    /* Teal & Lime Gradients */
    --gradient-teal-lime: linear-gradient(135deg, rgb(var(--color-teal)) 0%, rgb(var(--color-lime)) 100%);
    --gradient-lime-teal: linear-gradient(135deg, rgb(var(--color-lime)) 0%, rgb(var(--color-teal)) 100%);

    /* Aqua & Mint Gradients */
    --gradient-aqua-mint: linear-gradient(180deg, rgb(var(--color-aqua)) 0%, rgb(var(--color-mint)) 100%);
    --gradient-mint-aqua: linear-gradient(135deg, rgb(var(--color-mint)) 0%, rgb(var(--color-aqua)) 100%);

    /* Orange & Amber Gradients */
    --gradient-orange-amber: linear-gradient(135deg, rgb(var(--color-orange)) 0%, rgb(var(--color-amber)) 100%);

    /* Blue Gradients */
    --gradient-blue-purple: linear-gradient(to top right, rgb(var(--realevents-blue)), rgb(var(--color-purple)));


    /* ========================================
       GLASSMORPHISM EFFECTS
       ======================================== */

    --glass-white-10: rgba(255, 255, 255, 0.1);
    --glass-white-20: rgba(255, 255, 255, 0.2);
    --glass-white-30: rgba(255, 255, 255, 0.3);
    --glass-black-40: rgba(0, 0, 0, 0.4);
    --glass-black-80: rgba(0, 0, 0, 0.8);
    --backdrop-blur: blur(8px);
    --backdrop-blur-sm: blur(4px);
  }

  /* Global base styles */
  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    line-height: var(--leading-base);
  }

  body {
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: rgb(var(--color-text-body));
    background: rgb(var(--color-bg-lightest));
  }

  /* User selection */
  h1, h2, h3, h4, h5, h6, p, li, a {
    user-select: text;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    color: rgb(var(--color-text-primary));
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
  }
}


/* ========================================
   COMPONENT PATTERNS
   ======================================== */

/* ==================== BUTTONS ==================== */

/* Button Base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-weight: var(--font-medium);
  transition: var(--transition-fast);
  border: 1px solid;
  cursor: pointer;
  text-decoration: none;
}

.btn:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button Sizes */
.btn-sm {
  padding: 10px 16px;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.btn-md {
  padding: 10px 18px;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.btn-lg {
  padding: 12px 24px;
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
}

/* Primary Button - RealEvents Blue */
.btn-primary {
  background-color: rgb(var(--realevents-blue));
  border-color: rgb(var(--realevents-blue));
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: rgb(0, 90, 230); /* Slightly darker blue */
  border-color: rgb(0, 90, 230);
}

.btn-primary:active:not(:disabled) {
  background-color: rgb(0, 75, 200);
  border-color: rgb(0, 75, 200);
}

/* Secondary Button - Navy */
.btn-secondary {
  background-color: rgb(var(--realevents-navy));
  border-color: rgb(var(--realevents-navy));
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: rgb(var(--realevents-navy-secondary));
  border-color: rgb(var(--realevents-navy-secondary));
}

.btn-secondary:active:not(:disabled) {
  background-color: rgb(8, 40, 65);
  border-color: rgb(8, 40, 65);
}

/* Tertiary Button - Outlined */
.btn-tertiary {
  background-color: transparent;
  border-color: rgb(var(--realevents-gray-dark));
  color: rgb(var(--realevents-gray-dark));
}

.btn-tertiary:hover:not(:disabled) {
  background-color: rgb(var(--realevents-bg-lightest));
  border-color: rgb(var(--realevents-navy));
  color: rgb(var(--realevents-navy));
}

.btn-tertiary:active:not(:disabled) {
  background-color: rgb(var(--realevents-bg-subtle));
}

/* Ghost Button - Light background */
.btn-ghost {
  background-color: rgb(var(--realevents-bg-lightest));
  border-color: rgb(var(--realevents-bg-lightest));
  color: rgb(var(--realevents-navy-secondary));
}

.btn-ghost:hover:not(:disabled) {
  background-color: rgb(var(--realevents-bg-subtle));
  border-color: rgb(var(--realevents-bg-subtle));
}

.btn-ghost:active:not(:disabled) {
  background-color: rgb(var(--realevents-gray-divider));
  border-color: rgb(var(--realevents-gray-divider));
}

/* Text Link Button */
.btn-link {
  background: transparent;
  border: none;
  color: rgb(var(--realevents-navy));
  padding: 0;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
}

.btn-link:hover:not(:disabled) {
  color: rgb(var(--realevents-blue));
  text-decoration: underline;
}

/* Colored Button Variants */
.btn-purple {
  background-color: rgb(var(--color-purple));
  border-color: rgb(var(--color-purple));
  color: white;
}

.btn-purple:hover:not(:disabled) {
  background-color: rgb(130, 30, 150);
  border-color: rgb(130, 30, 150);
}

.btn-teal {
  background-color: rgb(var(--color-teal));
  border-color: rgb(var(--color-teal));
  color: white;
}

.btn-teal:hover:not(:disabled) {
  background-color: rgb(30, 140, 130);
  border-color: rgb(30, 140, 130);
}

.btn-lime {
  background-color: rgb(var(--color-lime));
  border-color: rgb(var(--color-lime));
  color: white;
}

.btn-lime:hover:not(:disabled) {
  background-color: rgb(120, 170, 60);
  border-color: rgb(120, 170, 60);
}

.btn-coral {
  background-color: rgb(var(--color-coral));
  border-color: rgb(var(--color-coral));
  color: white;
}

.btn-coral:hover:not(:disabled) {
  background-color: rgb(230, 90, 90);
  border-color: rgb(230, 90, 90);
}

.btn-pink {
  background-color: rgb(var(--color-pink));
  border-color: rgb(var(--color-pink));
  color: white;
}

.btn-pink:hover:not(:disabled) {
  background-color: rgb(220, 50, 110);
  border-color: rgb(220, 50, 110);
}

.btn-orange {
  background-color: rgb(var(--color-orange));
  border-color: rgb(var(--color-orange));
  color: white;
}

.btn-orange:hover:not(:disabled) {
  background-color: rgb(230, 140, 50);
  border-color: rgb(230, 140, 50);
}


/* ==================== FORMS ==================== */

/* Input Field Styles */
.input {
  width: 100%;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid;
  border-color: rgb(var(--realevents-gray-light));
  background: white;
  color: rgb(var(--realevents-navy));
  font-weight: var(--font-medium);
  font-size: var(--text-lg);
  min-height: 48px;
  transition: var(--transition-fast);
}

.input:hover:not(:disabled) {
  border-color: rgb(var(--realevents-gray-dark));
}

.input:focus {
  outline: none;
  border-color: rgb(var(--realevents-blue));
  box-shadow: var(--shadow-focus);
}

.input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: rgb(var(--realevents-bg-subtle));
}

.input::placeholder {
  color: rgb(var(--realevents-gray-light));
  font-weight: var(--font-regular);
}

/* Input autofill override */
.input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* Label Styles */
.label {
  display: block;
  color: rgb(var(--realevents-navy));
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

/* Error State */
.input-error {
  border-color: rgb(var(--realevents-gray-light));
}

.error-message {
  color: rgb(var(--realevents-gray-dark));
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  margin-top: var(--space-1-5);
}


/* ==================== CARDS ==================== */

/* Basic Card */
.card {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: white;
  border: 1px solid rgb(var(--color-border-subtle));
}

/* Elevated Card with Shadow */
.card-elevated {
  border-radius: var(--radius-lg);
  padding: var(--space-9);
  background: white;
  box-shadow: var(--shadow-card);
  border: none;
}

/* Large Card */
.card-large {
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  background: white;
  box-shadow: var(--shadow-card);
  border: none;
}

/* Interactive Card */
.card-interactive {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: white;
  transition: var(--transition-fast);
  cursor: pointer;
  border: 1px solid rgb(var(--color-border-subtle));
}

.card-interactive:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}


/* ==================== BADGES & PILLS ==================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.2;
}

.badge-blue {
  background-color: rgba(var(--realevents-blue), 0.1);
  color: rgb(var(--realevents-blue));
}

.badge-navy {
  background-color: rgba(var(--realevents-navy), 0.1);
  color: rgb(var(--realevents-navy));
}

.badge-gray {
  background-color: rgb(var(--realevents-bg-subtle));
  color: rgb(var(--realevents-gray-dark));
}

/* Vibrant Badge Variants */
.badge-coral {
  background-color: rgba(var(--color-coral), 0.15);
  color: rgb(var(--color-coral));
}

.badge-orange {
  background-color: rgba(var(--color-orange), 0.15);
  color: rgb(var(--color-orange));
}

.badge-lime {
  background-color: rgba(var(--color-lime), 0.15);
  color: rgb(var(--color-lime));
}

.badge-teal {
  background-color: rgba(var(--color-teal), 0.15);
  color: rgb(var(--color-teal));
}

.badge-purple {
  background-color: rgba(var(--color-purple), 0.15);
  color: rgb(var(--color-purple));
}

.badge-pink {
  background-color: rgba(var(--color-pink), 0.15);
  color: rgb(var(--color-pink));
}

/* Pastel Background Badge Variants */
.badge-peach {
  background-color: rgb(var(--color-peach));
  color: rgb(var(--color-coral));
  border: 1px solid rgba(var(--color-coral), 0.3);
}

.badge-mint {
  background-color: rgb(var(--color-mint));
  color: rgb(var(--color-lime));
  border: 1px solid rgba(var(--color-lime), 0.3);
}

.badge-lavender {
  background-color: rgb(var(--color-lavender));
  color: rgb(var(--color-purple));
  border: 1px solid rgba(var(--color-purple), 0.3);
}

.badge-sky {
  background-color: rgb(var(--color-sky));
  color: rgb(var(--realevents-blue));
  border: 1px solid rgba(var(--realevents-blue), 0.3);
}

.badge-rose {
  background-color: rgb(var(--color-rose));
  color: rgb(var(--color-coral));
  border: 1px solid rgba(var(--color-coral), 0.3);
}

.badge-honey {
  background-color: rgb(var(--color-honey));
  color: rgb(var(--color-orange));
  border: 1px solid rgba(var(--color-orange), 0.3);
}

.badge-aqua {
  background-color: rgb(var(--color-aqua));
  color: rgb(var(--color-teal));
  border: 1px solid rgba(var(--color-teal), 0.3);
}

.badge-cream {
  background-color: rgb(var(--color-cream));
  color: rgb(var(--realevents-gray-dark));
  border: 1px solid rgba(var(--realevents-gray-light), 0.4);
}


/* ==================== ALERTS ==================== */

.alert {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid;
}

.alert-info {
  background-color: rgba(var(--realevents-blue), 0.05);
  border-color: rgba(var(--realevents-blue), 0.2);
  color: rgb(var(--realevents-navy));
}

.alert-success {
  background-color: rgba(40, 167, 69, 0.05);
  border-color: rgba(40, 167, 69, 0.2);
  color: rgb(var(--realevents-navy));
}

.alert-warning {
  background-color: rgba(255, 193, 7, 0.05);
  border-color: rgba(255, 193, 7, 0.2);
  color: rgb(var(--realevents-navy));
}


/* ==================== UTILITY CLASSES ==================== */

/* Text Colors */
.text-primary {
  color: rgb(var(--realevents-blue));
}

.text-navy {
  color: rgb(var(--realevents-navy));
}

.text-body {
  color: rgb(var(--realevents-gray-dark));
}

.text-muted {
  color: rgb(var(--realevents-gray-light));
}

/* Vibrant Text Colors */
.text-coral {
  color: rgb(var(--color-coral));
}

.text-orange {
  color: rgb(var(--color-orange));
}

.text-lime {
  color: rgb(var(--color-lime));
}

.text-teal {
  color: rgb(var(--color-teal));
}

.text-purple {
  color: rgb(var(--color-purple));
}

.text-pink {
  color: rgb(var(--color-pink));
}

/* Background Colors - Solid */
.bg-white {
  background-color: white;
}

.bg-subtle {
  background-color: rgb(var(--realevents-bg-subtle));
}

.bg-lightest {
  background-color: rgb(var(--realevents-bg-lightest));
}

.bg-blue {
  background-color: rgb(var(--realevents-blue));
}

.bg-navy {
  background-color: rgb(var(--realevents-navy));
}

/* Vibrant Background Colors */
.bg-coral {
  background-color: rgb(var(--color-coral));
}

.bg-orange {
  background-color: rgb(var(--color-orange));
}

.bg-lime {
  background-color: rgb(var(--color-lime));
}

.bg-teal {
  background-color: rgb(var(--color-teal));
}

.bg-purple {
  background-color: rgb(var(--color-purple));
}

.bg-pink {
  background-color: rgb(var(--color-pink));
}

/* Pastel Background Colors */
.bg-peach {
  background-color: rgb(var(--color-peach));
}

.bg-mint {
  background-color: rgb(var(--color-mint));
}

.bg-lavender {
  background-color: rgb(var(--color-lavender));
}

.bg-sky {
  background-color: rgb(var(--color-sky));
}

.bg-rose {
  background-color: rgb(var(--color-rose));
}

.bg-honey {
  background-color: rgb(var(--color-honey));
}

.bg-aqua {
  background-color: rgb(var(--color-aqua));
}

.bg-cream {
  background-color: rgb(var(--color-cream));
}


/* ==================== RESPONSIVE UTILITIES ==================== */

@media (prefers-reduced-motion) {
  * {
    transition: none !important;
    animation: none !important;
  }
}