/**
 * BabySNEK Design System - CSS Variables
 * Version: 2.0
 *
 * Import this file to use the official BabySNEK color palette and design tokens
 * Usage: @import url('babysnek-variables.css');
 */

:root {
  /* ========================================
     PRIMARY BRAND COLORS
     ======================================== */
  --primary-pink: #FFC2E8;
  --primary-blue: #A7D8F0;
  --pale-pink: #FCEFFF;
  --pale-blue: #E0F4FF;

  /* ========================================
     EXTENDED TONES - LIGHT
     ======================================== */
  --light-pink-1: #FFE6F7;
  --light-pink-2: #FFD9F2;
  --light-blue-1: #D4E9FB;
  --light-blue-2: #E1F0FD;

  /* ========================================
     EXTENDED TONES - DARK
     ======================================== */
  --dark-pink-1: #FF8FCE;
  --dark-pink-2: #FF5CA6;
  --dark-blue-1: #7FB8E0;
  --dark-blue-2: #5798C6;

  /* ========================================
     TEXT & NEUTRAL COLORS
     ======================================== */
  --primary-text: #54595F;
  --dark-mode-text: #FEFEFE;
  --dark-gray: #3A3A3A;
  --light-gray: #7A7A7A;
  --very-dark-gray: #1A1A1A;

  /* ========================================
     STATUS COLORS
     ======================================== */
  --success: #B8E8D4;
  --error: #F29CA3;
  --warning: #E0B3C6;
  --info: #D6D6D6;

  /* ========================================
     INDUSTRIAL NEON (Webapp 2.0)
     ======================================== */
  --snek-neon: #04CFFF;
  --snek-pink: #FC8ECD;
  --snek-dark: #0B1117;
  --snek-darker: #050A0F;
  --snek-surface: rgba(26, 36, 47, 0.6);

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --ui-scale: 1;
  --font-display: 'Jua', 'Bricolage Grotesque', sans-serif;
  --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-primary: 'Space Grotesk', 'Jua', sans-serif;
  --font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Sizes */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.85rem;    /* 13.6px */
  --font-size-base: 0.9rem;   /* 14.4px */
  --font-size-md: 1rem;       /* 16px */
  --font-size-lg: 1.2rem;     /* 19.2px */
  --font-size-xl: 1.4rem;     /* 22.4px */
  --font-size-2xl: 1.8rem;    /* 28.8px */
  --font-size-3xl: 2em;       /* 32px */
  --font-size-4xl: 2.5em;     /* 40px */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* ========================================
     SPACING SCALE
     ======================================== */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* ========================================
     BORDERS
     ======================================== */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;

  --border-color-pink: rgba(255, 194, 232, 0.3);
  --border-color-blue: rgba(167, 216, 240, 0.3);
  --border-color-light: rgba(255, 255, 255, 0.2);

  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.3);

  /* Focus Shadow */
  --focus-shadow: 0 0 0 3px rgba(255, 194, 232, 0.1);
  --focus-outline: #FFC2E8;

  /* ========================================
     GRADIENTS
     ======================================== */
  --gradient-pink-blue: linear-gradient(135deg, var(--primary-pink), var(--primary-blue));
  --gradient-sky-grass: linear-gradient(to bottom, #87CEEB, #98FB98);
  --gradient-pink-blue-radial: radial-gradient(circle at top left, var(--primary-pink), var(--primary-blue));

  /* ========================================
     BACKGROUNDS
     ======================================== */
  --bg-card-pink: rgba(255, 194, 232, 0.1);
  --bg-card-blue: rgba(167, 216, 240, 0.1);
  --bg-glass: rgba(255, 255, 255, 0.1);
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;

  /* ========================================
     CONTAINER WIDTHS
     ======================================== */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;

  /* ========================================
     BREAKPOINTS (for reference)
     ======================================== */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1440px;

  /* ========================================
     ANIMATION DURATIONS
     ======================================== */
  --duration-instant: 0.1s;
  --duration-fast: 0.3s;
  --duration-normal: 0.5s;
  --duration-slow: 0.8s;
  --duration-slower: 1.5s;
}

/* ========================================
   DARK MODE OVERRIDES (Optional)
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-text: var(--dark-mode-text);
    --bg-card-pink: rgba(255, 194, 232, 0.05);
    --bg-card-blue: rgba(167, 216, 240, 0.05);
  }
}

/* ========================================
   UTILITY CLASSES (Optional)
   ======================================== */

/* Text Colors */
.text-pink { color: var(--primary-pink); }
.text-blue { color: var(--primary-blue); }
.text-primary { color: var(--primary-text); }
.text-gray { color: var(--light-gray); }

/* Background Colors */
.bg-pink { background-color: var(--primary-pink); }
.bg-blue { background-color: var(--primary-blue); }
.bg-pale-pink { background-color: var(--pale-pink); }
.bg-pale-blue { background-color: var(--pale-blue); }
.bg-card-pink { background-color: var(--bg-card-pink); }
.bg-card-blue { background-color: var(--bg-card-blue); }

/* Gradient Backgrounds */
.bg-gradient-pink-blue { background: var(--gradient-pink-blue); }
.bg-gradient-sky-grass { background: var(--gradient-sky-grass); }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Spacing */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Transitions */
.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }

/* Focus States */
.focus-ring:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}