/**
 * HireJasmine Global Styles
 * Design System: Modern Pop Aesthetic
 *
 * Contents:
 * 0. FOUC Prevention
 * 1. CSS Variables (Color System)
 * 2. Reset & Base Styles
 * 3. Typography System
 * 4. Layout Utilities
 * 5. Spacing System
 */

/* ========================================
   1. CSS VARIABLES - COLOR SYSTEM
   ======================================== */

:root {
    /* Brand Colors */
    --color-primary: #850D8C;           /* Deep Purple */
    --color-accent: #CFE132;            /* Chartreuse */
    --color-neutral: #FAF9F6;           /* Cream */
    --color-text: #474747;              /* Dark Gray */
    --color-soft: #e5b8c6;              /* Rose */
    --color-lighter: #F5E1E7;           /* Light Rose */
    --color-black: #000000;             /* Black */
    --color-white: #FFFFFF;             /* White */

    /* Gradient Variations */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    --gradient-reverse: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
    --gradient-soft: linear-gradient(135deg, var(--color-soft) 0%, var(--color-lighter) 100%);

    /* Alpha Variations (for glassmorphism) */
    --color-primary-alpha-10: rgba(133, 13, 140, 0.1);
    --color-primary-alpha-15: rgba(133, 13, 140, 0.15);
    --color-primary-alpha-20: rgba(133, 13, 140, 0.2);
    --color-accent-alpha-10: rgba(207, 225, 50, 0.1);
    --color-accent-alpha-20: rgba(207, 225, 50, 0.2);
    --color-accent-alpha-30: rgba(207, 225, 50, 0.3);

    /* Typography */
    --font-heading: 'Outfit', 'Agrandir', sans-serif;
    --font-body: 'Outfit', 'Agrandir', sans-serif;
    --font-accent: 'Playfair Display', 'Copperplate', serif;

    /* Font Sizes (Fluid Typography) */
    --text-xs: clamp(0.75rem, 1vw, 0.875rem);
    --text-sm: clamp(0.875rem, 1.2vw, 1rem);
    --text-base: clamp(1rem, 1.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 2vw, 1.5rem);
    --text-xl: clamp(1.5rem, 2.5vw, 2rem);
    --text-2xl: clamp(2rem, 4vw, 3rem);
    --text-3xl: clamp(2.5rem, 5vw, 4rem);
    --text-4xl: clamp(3rem, 7vw, 5.5rem);
    --text-5xl: clamp(4rem, 9vw, 7rem);

    /* Spacing System (8px base) */
    --space-xs: 0.5rem;      /* 8px */
    --space-sm: 1rem;        /* 16px */
    --space-md: 1.5rem;      /* 24px */
    --space-lg: 2rem;        /* 32px */
    --space-xl: 3rem;        /* 48px */
    --space-2xl: 4rem;       /* 64px */
    --space-3xl: 5rem;       /* 80px */
    --space-4xl: 7.5rem;     /* 120px */

    /* Border Radius (Pop Design) */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* Shadows (Layered Depth) */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.2);
    --shadow-glow-primary: 0 0 30px rgba(133, 13, 140, 0.4);
    --shadow-glow-accent: 0 0 30px rgba(207, 225, 50, 0.4);

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Z-index System */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;

    /* Layout */
    --max-width-content: 1400px;
    --max-width-text: 800px;
}

/* ========================================
   2. RESET & BASE STYLES
   ======================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-white);
    overflow-x: hidden;
}

/* Remove default list styles */
ul, ol {
    list-style: none;
}

/* Remove default link styles */
a {
    color: inherit;
    text-decoration: none;
}

/* Image defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Form elements */
input, button, textarea, select {
    font: inherit;
    color: inherit;
}

/* Remove button default styles */
button {
    background: none;
    border: none;
    cursor: pointer;
}

/* Prevent text overflow */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* ========================================
   3. TYPOGRAPHY SYSTEM
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-black);
}

h1 { font-size: var(--text-5xl); font-weight: 900; }
h2 { font-size: var(--text-4xl); font-weight: 800; }
h3 { font-size: var(--text-3xl); font-weight: 700; }
h4 { font-size: var(--text-2xl); font-weight: 700; }
h5 { font-size: var(--text-xl); font-weight: 600; }
h6 { font-size: var(--text-lg); font-weight: 600; }

p {
    margin-bottom: var(--space-md);
    line-height: 1.7;
}

.text-accent {
    font-family: var(--font-accent);
}

/* Text Colors */
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-neutral { color: var(--color-neutral); }
.text-soft { color: var(--color-soft); }
.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }

/* Font Weights */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }

/* Text Styles */
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.italic { font-style: italic; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Letter Spacing */
.tracking-tight { letter-spacing: -0.05em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.1em; }

/* ========================================
   4. LAYOUT UTILITIES
   ======================================== */

/* Container */
.container {
    width: 100%;
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container-narrow {
    max-width: var(--max-width-text);
}

/* Flexbox Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-end { justify-content: flex-end; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Grid Utilities */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive Grid */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

/* ========================================
   5. SPACING SYSTEM
   ======================================== */

/* Padding */
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }
.p-4xl { padding: var(--space-4xl); }

/* Padding X (horizontal) */
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

/* Padding Y (vertical) */
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.py-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }

/* Margin */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }

/* Margin Bottom */
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

/* ========================================
   6. BACKGROUND & BORDER UTILITIES
   ======================================== */

/* Backgrounds */
.bg-primary { background: var(--color-primary); }
.bg-accent { background: var(--color-accent); }
.bg-neutral { background: var(--color-neutral); }
.bg-black { background: var(--color-black); }
.bg-white { background: var(--color-white); }
.bg-gradient { background: var(--gradient-primary); }

/* 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-full { border-radius: var(--radius-full); }

/* 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); }

/* ========================================
   7. RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1024px) {
    .container {
        padding: 0 var(--space-md);
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    .container {
        padding: 0 var(--space-sm);
    }

    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
}

/* ========================================
   8. ACCESSIBILITY
   ======================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus visible styles */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* Skip to main content link (for screen readers) */
.skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
}

.skip-to-main:focus {
    left: var(--space-sm);
    top: var(--space-sm);
}