/* ==========================================================================
   Main CSS Import File
   Aggregates all modular CSS files in the correct order
   ========================================================================== */

/* ==========================================================================
   Core styles (must be loaded first)
   ========================================================================== */

/* Design tokens and CSS custom properties */

/* ==========================================================================
   Design System Variables
   Based on Material Design 3 + Swiss Typography principles
   ========================================================================== */

:root {
    /* ==========================================================================
       Colors - WCAG AAA compliant
       ========================================================================== */
    
    /* Primary colors */
    --primary: #FFC11D;
    --primary-light: #FFD563;
    --primary-dark: #E6A800;
    --on-primary: #1F1F1F;
    --primary-container: #FFE08A;
    --on-primary-container: #1F1F1F;
    
    /* Accent colors */
    --accent: #F0328E;
    --accent-light: #FF5CA8;
    --accent-dark: #C91B6E;
    --on-accent: #FFFFFF;
    --accent-container: #FFD7E5;
    --on-accent-container: #3E001D;
    
    /* Surface colors */
    --surface: #FFFFFF;
    --surface-variant: #F7F7F7;
    --on-surface: #1F1F1F;
    --on-surface-variant: #49454E;
    
    /* Background colors */
    --background: #FFFFFF;
    --on-background: #1F1F1F;
    
    /* System colors */
    --error: #BA1A1A;
    --on-error: #FFFFFF;
    --error-container: #FFDAD6;
    --on-error-container: #410002;
    
    --success: #10C691;
    --on-success: #FFFFFF;
    --success-container: #D4F5E9;
    --on-success-container: #00392A;
    
    --warning: #FFA726;
    --on-warning: #1F1F1F;
    --warning-container: #FFECB3;
    --on-warning-container: #1F1F1F;
    
    --info: #3D75EE;
    --on-info: #FFFFFF;
    --info-container: #DAE2FF;
    --on-info-container: #001847;
    
    /* Neutral colors */
    --outline: #E0E0E0;
    --outline-variant: #C7C7C7;
    
    /* Dark mode support (future enhancement) */
    --dark-surface: #1E1E1E;
    --dark-on-surface: #E0E0E0;
    --dark-surface-variant: #2D2D2D;
    
    /* ==========================================================================
       Typography Scale - Material Design 3
       ========================================================================== */
    
    /* Display */
    --display-large: 57px;
    --display-medium: 45px;
    --display-small: 36px;
    
    /* Headlines */
    --headline-large: 32px;
    --headline-medium: 28px;
    --headline-small: 24px;
    
    /* Titles */
    --title-large: 22px;
    --title-medium: 16px;
    --title-small: 14px;
    
    /* Body */
    --body-large: 16px;
    --body-medium: 14px;
    --body-small: 12px;
    
    /* Labels */
    --label-large: 14px;
    --label-medium: 12px;
    --label-small: 11px;
    
    /* Line Heights - Erik Spiekermann principles */
    --line-height-display: 1.1;
    --line-height-headline: 1.25;
    --line-height-title: 1.35;
    --line-height-body: 1.5;
    --line-height-label: 1.4;
    
    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    /* Letter Spacing */
    --letter-spacing-tighter: -0.02em;
    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.01em;
    --letter-spacing-wider: 0.02em;
    
    /* ==========================================================================
       Spacing - 8px grid system (Josef Müller-Brockmann)
       ========================================================================== */
    
    --space-unit: 8px;
    --space-xs: calc(var(--space-unit) * 0.5);   /* 4px */
    --space-sm: var(--space-unit);               /* 8px */
    --space-md: calc(var(--space-unit) * 2);     /* 16px */
    --space-lg: calc(var(--space-unit) * 3);     /* 24px */
    --space-xl: calc(var(--space-unit) * 4);     /* 32px */
    --space-2xl: calc(var(--space-unit) * 6);    /* 48px */
    --space-3xl: calc(var(--space-unit) * 8);    /* 64px */
    --space-4xl: calc(var(--space-unit) * 12);   /* 96px */
    --space-5xl: calc(var(--space-unit) * 16);   /* 128px */
    
    /* ==========================================================================
       Layout
       ========================================================================== */
    
    /* Breakpoints */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 600px;
    --breakpoint-md: 905px;
    --breakpoint-lg: 1240px;
    --breakpoint-xl: 1440px;
    --breakpoint-2xl: 1920px;
    
    /* Container */
    --container-max-width: var(--breakpoint-xl);
    --container-padding-mobile: var(--space-md);
    --container-padding-tablet: var(--space-lg);
    --container-padding-desktop: var(--space-2xl);
    
    /* Grid */
    --grid-columns: 12;
    --grid-gap-mobile: var(--space-md);
    --grid-gap-desktop: var(--space-xl);
    
    /* ==========================================================================
       Borders & Radii
       ========================================================================== */
    
    /* Border radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 1000px;
    
    /* Border width */
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 4px;
    
    /* ==========================================================================
       Effects
       ========================================================================== */
    
    /* Shadows - Material Design elevation */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Focus shadows */
    --shadow-focus: 0 0 0 3px rgba(240, 50, 142, 0.1);
    --shadow-focus-danger: 0 0 0 3px rgba(186, 26, 26, 0.1);
    
    /* ==========================================================================
       Transitions
       ========================================================================== */
    
    /* Durations */
    --duration-instant: 0ms;
    --duration-fast: 150ms;
    --duration-medium: 250ms;
    --duration-slow: 350ms;
    --duration-slower: 500ms;
    
    /* Easings - Material Design motion */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
    
    /* Combined transitions */
    --transition-fast: var(--duration-fast) var(--ease-standard);
    --transition-medium: var(--duration-medium) var(--ease-standard);
    --transition-slow: var(--duration-slow) var(--ease-standard);
    
    /* ==========================================================================
       Z-index Scale
       ========================================================================== */
    
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
    --z-maximum: 999;
    
    /* ==========================================================================
       Component-specific tokens
       ========================================================================== */
    
    /* Buttons */
    --button-height-sm: 32px;
    --button-height-md: 40px;
    --button-height-lg: 48px;
    --button-padding-x: var(--space-lg);
    --button-padding-y: var(--space-sm);
    
    /* Cards */
    --card-padding: var(--space-lg);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-lg);
    
    /* Inputs */
    --input-height: 44px;
    --input-padding-x: var(--space-md);
    --input-border-width: var(--border-medium);
    --input-radius: var(--radius-sm);
    
    /* Navigation */
    --nav-height: 64px;
    --nav-item-padding: var(--space-sm) var(--space-lg);
    
    /* ==========================================================================
       Animation States
       ========================================================================== */
    
    --scale-hover: 1.02;
    --scale-active: 0.98;
    --translate-hover: translateY(-2px);
    --translate-active: translateY(0);
    --rotate-hover: rotate(2deg);
}

/* ==========================================================================
   Media Query Custom Properties (CSS Level 5 - future enhancement)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-medium: 0ms;
        --duration-slow: 0ms;
        --duration-slower: 0ms;
    }
}

/* ==========================================================================
   Dark Theme Variables
   ========================================================================== */

[data-theme="dark"],
:root.dark-theme {
    /* Primary colors */
    --primary: #FFB300;
    --primary-light: #FFC947;
    --primary-dark: #C68400;
    --on-primary: #000000;
    --primary-container: #3A2800;
    --on-primary-container: #FFDEA6;
    
    /* Accent colors */
    --accent: #FFB3D0;
    --accent-light: #FFCFE5;
    --accent-dark: #E6A0C4;
    --on-accent: #5E1133;
    --accent-container: #77294A;
    --on-accent-container: #FFD9E5;
    
    /* Surface colors */
    --surface: #1C1B1F;
    --surface-variant: #2B2930;
    --on-surface: #E6E1E5;
    --on-surface-variant: #CAC4D0;
    
    /* Background colors */
    --background: #1C1B1F;
    --on-background: #E6E1E5;
    
    /* System colors */
    --error: #FFB4AB;
    --on-error: #690005;
    --error-container: #93000A;
    --on-error-container: #FFDAD6;
    
    --success: #6FE3B4;
    --on-success: #003829;
    --success-container: #00513B;
    --on-success-container: #8FFFCF;
    
    --warning: #FFCC80;
    --on-warning: #3E2723;
    --warning-container: #5D4037;
    --on-warning-container: #FFE0B2;
    
    --info: #ADC7FF;
    --on-info: #002E6C;
    --info-container: #004397;
    --on-info-container: #D8E2FF;
    
    /* Neutral colors */
    --outline: #938F99;
    --outline-variant: #49454F;
    
    /* Shadows for dark theme */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

/* Automatic dark theme based on system preference */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Primary colors */
        --primary: #FFB300;
        --primary-light: #FFC947;
        --primary-dark: #C68400;
        --on-primary: #000000;
        --primary-container: #3A2800;
        --on-primary-container: #FFDEA6;
        
        /* Accent colors */
        --accent: #FFB3D0;
        --accent-light: #FFCFE5;
        --accent-dark: #E6A0C4;
        --on-accent: #5E1133;
        --accent-container: #77294A;
        --on-accent-container: #FFD9E5;
        
        /* Surface colors */
        --surface: #1C1B1F;
        --surface-variant: #2B2930;
        --on-surface: #E6E1E5;
        --on-surface-variant: #CAC4D0;
        
        /* Background colors */
        --background: #1C1B1F;
        --on-background: #E6E1E5;
        
        /* System colors */
        --error: #FFB4AB;
        --on-error: #690005;
        --error-container: #93000A;
        --on-error-container: #FFDAD6;
        
        --success: #6FE3B4;
        --on-success: #003829;
        --success-container: #00513B;
        --on-success-container: #8FFFCF;
        
        --warning: #FFCC80;
        --on-warning: #3E2723;
        --warning-container: #5D4037;
        --on-warning-container: #FFE0B2;
        
        --info: #ADC7FF;
        --on-info: #002E6C;
        --info-container: #004397;
        --on-info-container: #D8E2FF;
        
        /* Neutral colors */
        --outline: #938F99;
        --outline-variant: #49454F;
        
        /* Shadows for dark theme */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    }
}

@media (min-width: 1920px) {
    :root {
        /* Scale up typography for larger screens */
        --display-large: 64px;
        --display-medium: 52px;
        --display-small: 44px;
    }
}

/* CSS reset and normalization */

/* ==========================================================================
   Modern CSS Reset / Normalize
   Based on Andy Bell's Modern CSS Reset with additions
   ========================================================================== */

/* Box sizing rules */

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

/* Remove default margin and padding */

* {
    margin: 0;
    padding: 0;
}

/* Set core root defaults */

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* Set core body defaults */

body {
    min-height: 100vh;
    line-height: 1.5;
    text-rendering: optimizeSpeed;
}

/* Remove list styles on ul, ol elements with a list role */

ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
    -webkit-text-decoration-skip: ink;
            text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

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

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Additional resets and normalizations
   ========================================================================== */

/* Remove default button styles */

button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Remove default fieldset styles */

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* Remove default blockquote styles */

blockquote {
    margin: 0;
    padding: 0;
}

/* Remove default dl, dd styles */

dl, dd {
    margin: 0;
}

/* Set consistent table spacing */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Prevent textarea from being resizable horizontally */

textarea {
    resize: vertical;
}

/* Remove default hr styles */

hr {
    border: none;
    border-top: 1px solid;
    margin: 0;
    opacity: 0.25;
}

/* Remove outline on focused elements that have focus-visible */

:focus:not(:focus-visible) {
    outline: none;
}

/* Make sure disabled elements don't have a cursor */

[disabled] {
    cursor: not-allowed;
}

/* Remove spinner from number inputs */

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type='number'] {
    -moz-appearance: textfield;
}

/* Remove default search input styles */

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Make sure meta elements are hidden */

[hidden] {
    display: none !important;
}

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

/* Hide visually but keep accessible to screen readers */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip to main content link */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #FFC11D;
    background: var(--primary);
    color: #1F1F1F;
    color: var(--on-primary);
    padding: 8px;
    padding: var(--space-sm);
    text-decoration: none;
    z-index: 999;
    z-index: var(--z-maximum);
}

.skip-link:focus {
    top: 0;
}

/* Typography system */

/* ==========================================================================
   Typography System
   Based on Material Design 3 type scale with Swiss typography principles
   ========================================================================== */

/* ==========================================================================
   Font imports
   ========================================================================== */

/* Inter font is imported in HTML for better performance */

/* ==========================================================================
   Base typography
   ========================================================================== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 
                 'Segoe UI Emoji', 'Segoe UI Symbol';
    font-size: 16px;
    font-size: var(--body-large);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    line-height: var(--line-height-body);
    color: #1F1F1F;
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    line-height: var(--line-height-headline);
    color: #1F1F1F;
    color: var(--on-surface);
}

/* Display styles */

.display-large,
h1 {
    font-size: clamp(36px, 7vw, 57px);
    font-size: clamp(var(--display-small), 7vw, var(--display-large));
    line-height: 1.1;
    line-height: var(--line-height-display);
    font-weight: 900;
    font-weight: var(--font-weight-black);
    letter-spacing: -0.02em;
    letter-spacing: var(--letter-spacing-tighter);
    margin-bottom: calc(8px * 2);
    margin-bottom: var(--space-md);
}

.display-medium {
    font-size: clamp(32px, 6vw, 45px);
    font-size: clamp(var(--headline-large), 6vw, var(--display-medium));
    line-height: 1.1;
    line-height: var(--line-height-display);
    font-weight: 900;
    font-weight: var(--font-weight-black);
    letter-spacing: -0.02em;
    letter-spacing: var(--letter-spacing-tighter);
}

.display-small {
    font-size: clamp(28px, 5vw, 36px);
    font-size: clamp(var(--headline-medium), 5vw, var(--display-small));
    line-height: 1.1;
    line-height: var(--line-height-display);
    font-weight: 900;
    font-weight: var(--font-weight-black);
    letter-spacing: -0.01em;
    letter-spacing: var(--letter-spacing-tight);
}

/* Headline styles */

.headline-large,
h2 {
    font-size: 32px;
    font-size: var(--headline-large);
    line-height: 1.25;
    line-height: var(--line-height-headline);
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(8px * 3);
    margin-bottom: var(--space-lg);
}

.headline-medium,
h3 {
    font-size: 28px;
    font-size: var(--headline-medium);
    line-height: 1.25;
    line-height: var(--line-height-headline);
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(8px * 3);
    margin-bottom: var(--space-lg);
}

.headline-small,
h4 {
    font-size: 24px;
    font-size: var(--headline-small);
    line-height: 1.25;
    line-height: var(--line-height-headline);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    margin-bottom: calc(8px * 2);
    margin-bottom: var(--space-md);
}

/* Title styles */

.title-large,
h5 {
    font-size: 22px;
    font-size: var(--title-large);
    line-height: 1.35;
    line-height: var(--line-height-title);
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(8px * 2);
    margin-bottom: var(--space-md);
}

.title-medium,
h6 {
    font-size: 16px;
    font-size: var(--title-medium);
    line-height: 1.35;
    line-height: var(--line-height-title);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
    margin-bottom: var(--space-sm);
}

.title-small {
    font-size: 14px;
    font-size: var(--title-small);
    line-height: 1.35;
    line-height: var(--line-height-title);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    letter-spacing: var(--letter-spacing-wide);
}

/* ==========================================================================
   Body text
   ========================================================================== */

p {
    margin: 0 0 calc(8px * 2) 0;
    margin: 0 0 var(--space-md) 0;
}

p:last-child {
    margin-bottom: 0;
}

.body-large {
    font-size: 16px;
    font-size: var(--body-large);
    line-height: 1.5;
    line-height: var(--line-height-body);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
}

.body-medium {
    font-size: 14px;
    font-size: var(--body-medium);
    line-height: 1.5;
    line-height: var(--line-height-body);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
}

.body-small {
    font-size: 12px;
    font-size: var(--body-small);
    line-height: 1.5;
    line-height: var(--line-height-body);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
}

/* ==========================================================================
   Labels
   ========================================================================== */

.label-large {
    font-size: 14px;
    font-size: var(--label-large);
    line-height: 1.4;
    line-height: var(--line-height-label);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    letter-spacing: var(--letter-spacing-wide);
}

.label-medium {
    font-size: 12px;
    font-size: var(--label-medium);
    line-height: 1.4;
    line-height: var(--line-height-label);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    letter-spacing: var(--letter-spacing-wider);
}

.label-small {
    font-size: 11px;
    font-size: var(--label-small);
    line-height: 1.4;
    line-height: var(--line-height-label);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    letter-spacing: var(--letter-spacing-wider);
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: #F0328E;
    color: var(--accent);
    text-decoration: none;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: color var(--transition-fast);
}

a:hover {
    color: #C91B6E;
    color: var(--accent-dark);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid #F0328E;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
    border-radius: var(--radius-xs);
}

/* ==========================================================================
   Lists
   ========================================================================== */

ul, ol {
    margin: 0 0 calc(8px * 2) 0;
    margin: 0 0 var(--space-md) 0;
    padding-left: calc(8px * 4);
    padding-left: var(--space-xl);
}

ul ul, ol ol, ul ol, ol ul {
    margin-bottom: 0;
}

li {
    margin-bottom: calc(8px * 0.5);
    margin-bottom: var(--space-xs);
}

li:last-child {
    margin-bottom: 0;
}

/* Custom list styles */

ul.unstyled,
ol.unstyled {
    list-style: none;
    padding-left: 0;
}

/* ==========================================================================
   Text utilities
   ========================================================================== */

/* Weight modifiers */

.text-regular { font-weight: 400; font-weight: var(--font-weight-regular); }

.text-medium { font-weight: 500; font-weight: var(--font-weight-medium); }

.text-semibold { font-weight: 600; font-weight: var(--font-weight-semibold); }

.text-bold { font-weight: 700; font-weight: var(--font-weight-bold); }

.text-black { font-weight: 900; font-weight: var(--font-weight-black); }

/* Alignment */

.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }

.text-justify { text-align: justify; }

/* Transform */

.text-uppercase { text-transform: uppercase; }

.text-lowercase { text-transform: lowercase; }

.text-capitalize { text-transform: capitalize; }

/* Color utilities */

.text-primary { color: #FFC11D; color: var(--primary); }

.text-accent { color: #F0328E; color: var(--accent); }

.text-muted { color: #49454E; color: var(--on-surface-variant); }

.text-error { color: #BA1A1A; color: var(--error); }

.text-success { color: #10C691; color: var(--success); }

.text-warning { color: #FFA726; color: var(--warning); }

.text-info { color: #3D75EE; color: var(--info); }

/* Truncation */

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Line clamp */

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Blockquotes
   ========================================================================== */

blockquote {
    margin: calc(8px * 3) 0;
    margin: var(--space-lg) 0;
    padding: calc(8px * 2) calc(8px * 3);
    padding: var(--space-md) var(--space-lg);
    border-left: 4px solid #F0328E;
    border-left: var(--border-thick) solid var(--accent);
    font-style: italic;
    color: #49454E;
    color: var(--on-surface-variant);
}

blockquote cite {
    display: block;
    margin-top: 8px;
    margin-top: var(--space-sm);
    font-size: 12px;
    font-size: var(--body-small);
    font-style: normal;
    color: #1F1F1F;
    color: var(--on-surface);
}

/* ==========================================================================
   Code
   ========================================================================== */

code, kbd, samp, pre {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 
                 'Roboto Mono', monospace;
}

code {
    padding: 2px 6px;
    background: #F7F7F7;
    background: var(--surface-variant);
    border-radius: 4px;
    border-radius: var(--radius-xs);
    font-size: 0.875em;
}

pre {
    display: block;
    margin: calc(8px * 3) 0;
    margin: var(--space-lg) 0;
    padding: calc(8px * 2);
    padding: var(--space-md);
    background: #F7F7F7;
    background: var(--surface-variant);
    border-radius: 8px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    line-height: 1.5;
    line-height: var(--line-height-body);
}

pre code {
    padding: 0;
    background: none;
    font-size: inherit;
}

/* ==========================================================================
   Responsive typography
   ========================================================================== */

@media (max-width: 905px) {
    :root {
        --display-large: 48px;
        --display-medium: 40px;
        --display-small: 32px;
        --headline-large: 28px;
        --headline-medium: 24px;
        --headline-small: 20px;
    }
}

@media (max-width: 600px) {
    :root {
        --display-large: 40px;
        --display-medium: 32px;
        --display-small: 28px;
        --headline-large: 24px;
        --headline-medium: 20px;
        --headline-small: 18px;
        --body-large: 15px;
        --body-medium: 14px;
    }
}

/* ==========================================================================
   Layout styles
   ========================================================================== */

/* Container and grid systems */

/* ==========================================================================
   Container & Layout System
   Responsive container and grid layouts
   ========================================================================== */

/* ==========================================================================
   Container
   ========================================================================== */

.container {
    width: 100%;
    max-width: 1440px;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: calc(8px * 2);
    padding: var(--container-padding-mobile);
}

/* Container variants */

.container-fluid {
    max-width: 100%;
}

.container-narrow {
    max-width: 800px;
}

.container-wide {
    max-width: 1920px;
    max-width: var(--breakpoint-2xl);
}

/* Container alignment */

.container-left {
    margin-left: 0;
    margin-right: auto;
}

.container-right {
    margin-left: auto;
    margin-right: 0;
}

/* Responsive container padding */

@media (min-width: 600px) {
    .container {
        padding: calc(8px * 3);
        padding: var(--container-padding-tablet);
    }
}

@media (min-width: 905px) {
    .container {
        padding: calc(8px * 4) calc(8px * 6);
        padding: var(--space-xl) var(--container-padding-desktop);
    }
}

@media (min-width: 1240px) {
    .container {
        padding: calc(8px * 6) calc(8px * 8);
        padding: var(--container-padding-desktop) var(--space-3xl);
    }
}

/* ==========================================================================
   Layout Grid
   ========================================================================== */

.layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: calc(8px * 2);
    grid-gap: var(--grid-gap-mobile);
    gap: calc(8px * 2);
    gap: var(--grid-gap-mobile);
}

/* Two column layout */

.layout-grid-2 {
    grid-template-columns: 1fr;
}

@media (min-width: 905px) {
    .layout-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: calc(8px * 4);
        gap: var(--grid-gap-desktop);
    }
}

/* Asymmetric two column layout (7:5 ratio) */

.layout-grid-asymmetric {
    grid-template-columns: 1fr;
}

@media (min-width: 905px) {
    .layout-grid-asymmetric {
        grid-template-columns: 7fr 5fr;
        gap: calc(8px * 8);
        gap: var(--space-3xl);
        align-items: start;
    }
}

/* Three column layout */

.layout-grid-3 {
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .layout-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 905px) {
    .layout-grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: calc(8px * 4);
        gap: var(--grid-gap-desktop);
    }
}

/* Four column layout */

.layout-grid-4 {
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .layout-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 905px) {
    .layout-grid-4 {
        grid-template-columns: repeat(4, 1fr);
        gap: calc(8px * 4);
        gap: var(--grid-gap-desktop);
    }
}

/* Auto-fit grid */

.layout-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(8px * 2);
    gap: var(--grid-gap-mobile);
}

@media (min-width: 905px) {
    .layout-grid-auto {
        gap: calc(8px * 4);
        gap: var(--grid-gap-desktop);
    }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section {
    padding: calc(8px * 8) 0;
    padding: var(--space-3xl) 0;
}

.section-sm {
    padding: calc(8px * 6) 0;
    padding: var(--space-2xl) 0;
}

.section-lg {
    padding: calc(8px * 12) 0;
    padding: var(--space-4xl) 0;
}

.section-xl {
    padding: calc(8px * 16) 0;
    padding: var(--space-5xl) 0;
}

/* Section backgrounds */

.section-primary {
    background-color: #FFC11D;
    background-color: var(--primary);
    color: #1F1F1F;
    color: var(--on-primary);
}

.section-accent {
    background-color: #F0328E;
    background-color: var(--accent);
    color: #FFFFFF;
    color: var(--on-accent);
}

.section-surface {
    background-color: #FFFFFF;
    background-color: var(--surface);
    color: #1F1F1F;
    color: var(--on-surface);
}

.section-variant {
    background-color: #F7F7F7;
    background-color: var(--surface-variant);
    color: #1F1F1F;
    color: var(--on-surface);
}

/* ==========================================================================
   Page layouts
   ========================================================================== */

/* Standard page layout */

.page-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-header {
    flex-shrink: 0;
}

.page-main {
    flex-grow: 1;
}

.page-footer {
    flex-shrink: 0;
}

/* Hero section */

.hero-section {
    padding: calc(8px * 12) 0;
    padding: var(--space-4xl) 0;
    text-align: center;
}

@media (min-width: 905px) {
    .hero-section {
        padding: calc(8px * 16) 0;
        padding: var(--space-5xl) 0;
        text-align: left;
    }
}

/* Content section */

.content-section {
    animation: fadeInUp 0.6s ease-out 0.3s backwards;
}

/* ==========================================================================
   Flex utilities
   ========================================================================== */

.flex {
    display: flex;
}

.flex-inline {
    display: inline-flex;
}

/* Direction */

.flex-row { flex-direction: row; }

.flex-row-reverse { flex-direction: row-reverse; }

.flex-col { flex-direction: column; }

.flex-col-reverse { flex-direction: column-reverse; }

/* Wrap */

.flex-wrap { flex-wrap: wrap; }

.flex-nowrap { flex-wrap: nowrap; }

.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify content */

.justify-start { justify-content: flex-start; }

.justify-end { justify-content: flex-end; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.justify-around { justify-content: space-around; }

.justify-evenly { justify-content: space-evenly; }

/* Align items */

.items-start { align-items: flex-start; }

.items-end { align-items: flex-end; }

.items-center { align-items: center; }

.items-baseline { align-items: baseline; }

.items-stretch { align-items: stretch; }

/* Align content */

.content-start { align-content: flex-start; }

.content-end { align-content: flex-end; }

.content-center { align-content: center; }

.content-between { align-content: space-between; }

.content-around { align-content: space-around; }

.content-evenly { align-content: space-evenly; }

/* Gap */

.gap-xs { gap: calc(8px * 0.5); gap: var(--space-xs); }

.gap-sm { gap: 8px; gap: var(--space-sm); }

.gap-md { gap: calc(8px * 2); gap: var(--space-md); }

.gap-lg { gap: calc(8px * 3); gap: var(--space-lg); }

.gap-xl { gap: calc(8px * 4); gap: var(--space-xl); }

.gap-2xl { gap: calc(8px * 6); gap: var(--space-2xl); }

/* ==========================================================================
   Spacing utilities
   ========================================================================== */

/* Margin */

.m-0 { margin: 0; }

.m-auto { margin: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }

.my-auto { margin-top: auto; margin-bottom: auto; }

/* Margin values */

.m-xs { margin: calc(8px * 0.5); margin: var(--space-xs); }

.m-sm { margin: 8px; margin: var(--space-sm); }

.m-md { margin: calc(8px * 2); margin: var(--space-md); }

.m-lg { margin: calc(8px * 3); margin: var(--space-lg); }

.m-xl { margin: calc(8px * 4); margin: var(--space-xl); }

.m-2xl { margin: calc(8px * 6); margin: var(--space-2xl); }

.m-3xl { margin: calc(8px * 8); margin: var(--space-3xl); }

/* Margin top */

.mt-0 { margin-top: 0; }

.mt-xs { margin-top: calc(8px * 0.5); margin-top: var(--space-xs); }

.mt-sm { margin-top: 8px; margin-top: var(--space-sm); }

.mt-md { margin-top: calc(8px * 2); margin-top: var(--space-md); }

.mt-lg { margin-top: calc(8px * 3); margin-top: var(--space-lg); }

.mt-xl { margin-top: calc(8px * 4); margin-top: var(--space-xl); }

.mt-2xl { margin-top: calc(8px * 6); margin-top: var(--space-2xl); }

.mt-3xl { margin-top: calc(8px * 8); margin-top: var(--space-3xl); }

/* Margin bottom */

.mb-0 { margin-bottom: 0; }

.mb-xs { margin-bottom: calc(8px * 0.5); margin-bottom: var(--space-xs); }

.mb-sm { margin-bottom: 8px; margin-bottom: var(--space-sm); }

.mb-md { margin-bottom: calc(8px * 2); margin-bottom: var(--space-md); }

.mb-lg { margin-bottom: calc(8px * 3); margin-bottom: var(--space-lg); }

.mb-xl { margin-bottom: calc(8px * 4); margin-bottom: var(--space-xl); }

.mb-2xl { margin-bottom: calc(8px * 6); margin-bottom: var(--space-2xl); }

.mb-3xl { margin-bottom: calc(8px * 8); margin-bottom: var(--space-3xl); }

/* Padding - similar pattern */

.p-0 { padding: 0; }

.p-xs { padding: calc(8px * 0.5); padding: var(--space-xs); }

.p-sm { padding: 8px; padding: var(--space-sm); }

.p-md { padding: calc(8px * 2); padding: var(--space-md); }

.p-lg { padding: calc(8px * 3); padding: var(--space-lg); }

.p-xl { padding: calc(8px * 4); padding: var(--space-xl); }

.p-2xl { padding: calc(8px * 6); padding: var(--space-2xl); }

.p-3xl { padding: calc(8px * 8); padding: var(--space-3xl); }

/* ==========================================================================
   Position utilities
   ========================================================================== */

.relative { position: relative; }

.absolute { position: absolute; }

.fixed { position: fixed; }

.sticky { position: sticky; }

.top-0 { top: 0; }

.right-0 { right: 0; }

.bottom-0 { bottom: 0; }

.left-0 { left: 0; }

.z-0 { z-index: 0; z-index: var(--z-base); }

.z-10 { z-index: 10; }

.z-20 { z-index: 20; }

.z-30 { z-index: 30; }

.z-40 { z-index: 40; }

.z-50 { z-index: 50; }

.z-dropdown { z-index: 100; z-index: var(--z-dropdown); }

.z-sticky { z-index: 200; z-index: var(--z-sticky); }

.z-fixed { z-index: 300; z-index: var(--z-fixed); }

.z-modal { z-index: 500; z-index: var(--z-modal); }

.z-max { z-index: 999; z-index: var(--z-maximum); }

/* ==========================================================================
   Component styles
   ========================================================================== */

/* Button components and variants */

/* ==========================================================================
   Button Component
   Unified button system with multiple variants and states
   ========================================================================== */

/* ==========================================================================
   Base button styles
   ========================================================================== */

.btn {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    gap: var(--space-sm);
    
    /* Sizing */
    min-height: 40px;
    min-height: var(--button-height-md);
    padding: 8px calc(8px * 3);
    padding: var(--button-padding-y) var(--button-padding-x);
    
    /* Typography */
    font-family: inherit;
    font-size: 14px;
    font-size: var(--label-large);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    
    /* Visual */
    background-color: #F0328E;
    background-color: var(--accent);
    color: #FFFFFF;
    color: var(--on-accent);
    border: 2px solid transparent;
    border: var(--border-medium) solid transparent;
    border-radius: 1000px;
    border-radius: var(--radius-full);
    
    /* Behavior */
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all var(--transition-fast);
    
    /* States */
    position: relative;
    overflow: hidden;
    transform: translateZ(0); /* GPU acceleration */
}

/* ==========================================================================
   Button variants
   ========================================================================== */

/* Primary button (default) */

.btn-primary {
    background-color: #F0328E;
    background-color: var(--accent);
    color: #FFFFFF;
    color: var(--on-accent);
}

.btn-primary:hover:not(:disabled) {
    background-color: #C91B6E;
    background-color: var(--accent-dark);
    transform: translateY(-2px);
    transform: var(--translate-hover);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-md);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    transform: var(--translate-active);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
}

/* Secondary button */

.btn-secondary {
    background-color: #FFFFFF;
    background-color: var(--surface);
    color: #F0328E;
    color: var(--accent);
    border-color: #F0328E;
    border-color: var(--accent);
}

.btn-secondary:hover:not(:disabled) {
    background-color: #F0328E;
    background-color: var(--accent);
    color: #FFFFFF;
    color: var(--on-accent);
    transform: translateY(-2px);
    transform: var(--translate-hover);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-md);
}

.btn-secondary:active:not(:disabled) {
    transform: translateY(0);
    transform: var(--translate-active);
}

/* Ghost button */

.btn-ghost {
    background-color: transparent;
    color: #1F1F1F;
    color: var(--on-surface);
    border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
    background-color: #F7F7F7;
    background-color: var(--surface-variant);
    transform: translateY(-2px);
    transform: var(--translate-hover);
}

.btn-ghost:active:not(:disabled) {
    transform: translateY(0);
    transform: var(--translate-active);
}

/* Surface button (for use on colored backgrounds) */

.btn-surface {
    background-color: #FFFFFF;
    background-color: var(--surface);
    color: #1F1F1F;
    color: var(--on-surface);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
}

.btn-surface:hover:not(:disabled) {
    background-color: #F0328E;
    background-color: var(--accent);
    color: #FFFFFF;
    color: var(--on-accent);
    transform: translateY(-2px);
    transform: var(--translate-hover);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-md);
}

.btn-surface:active:not(:disabled) {
    transform: translateY(0);
    transform: var(--translate-active);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Button sizes
   ========================================================================== */

.btn-sm {
    min-height: 32px;
    min-height: var(--button-height-sm);
    padding: calc(8px * 0.75) calc(calc(8px * 3) * 0.75);
    padding: calc(var(--button-padding-y) * 0.75) calc(var(--button-padding-x) * 0.75);
    font-size: 12px;
    font-size: var(--label-medium);
}

.btn-lg {
    min-height: 48px;
    min-height: var(--button-height-lg);
    padding: calc(8px * 1.25) calc(calc(8px * 3) * 1.25);
    padding: calc(var(--button-padding-y) * 1.25) calc(var(--button-padding-x) * 1.25);
    font-size: 16px;
    font-size: var(--title-medium);
}

/* ==========================================================================
   Button states
   ========================================================================== */

/* Disabled state */

.btn:disabled,
.btn.disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading state */

.btn.loading {
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #FFFFFF;
    border: 2px solid var(--on-accent);
    border-radius: 50%;
    border-top-color: transparent;
    animation: btn-loading-spin 1s linear infinite;
}

@keyframes btn-loading-spin {
    to { transform: rotate(360deg); }
}

/* Focus state */

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(240, 50, 142, 0.1);
    box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   Special button types
   ========================================================================== */

/* Icon button */

.btn-icon {
    min-height: 40px;
    min-height: var(--button-height-md);
    width: 40px;
    width: var(--button-height-md);
    padding: 0;
    border-radius: 1000px;
    border-radius: var(--radius-full);
}

.btn-icon.btn-sm {
    min-height: 32px;
    min-height: var(--button-height-sm);
    width: 32px;
    width: var(--button-height-sm);
}

.btn-icon.btn-lg {
    min-height: 48px;
    min-height: var(--button-height-lg);
    width: 48px;
    width: var(--button-height-lg);
}

/* Full width button */

.btn-block {
    width: 100%;
}

/* Button group */

.btn-group {
    display: inline-flex;
    gap: 8px;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.btn-group-vertical {
    flex-direction: column;
}

/* ==========================================================================
   Navigation pills (specific button variant)
   ========================================================================== */

.nav-pill {
    /* Extends button base */
    display: inline-flex;
    align-items: center;
    padding: 8px calc(8px * 3);
    padding: var(--space-sm) var(--space-lg);
    
    /* Visual */
    background-color: #FFFFFF;
    background-color: var(--surface);
    color: #1F1F1F;
    color: var(--on-surface);
    border-radius: 1000px;
    border-radius: var(--radius-full);
    
    /* Typography */
    font-size: 14px;
    font-size: var(--label-large);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    
    /* Behavior */
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all var(--transition-fast);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
}

.nav-pill:hover {
    background-color: #F0328E;
    background-color: var(--accent);
    color: #FFFFFF;
    color: var(--on-accent);
    transform: translateY(-2px);
    transform: var(--translate-hover);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.nav-pill:active {
    transform: translateY(0);
    transform: var(--translate-active);
}

.nav-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(240, 50, 142, 0.1);
    box-shadow: var(--shadow-focus);
}

/* Nav pills container */

.nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    gap: var(--space-sm);
}

/* ==========================================================================
   Social share buttons
   ========================================================================== */

.share-button {
    /* Extends button base */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px calc(8px * 2);
    padding: var(--space-sm) var(--space-md);
    
    /* Visual */
    background-color: #FFFFFF;
    background-color: var(--surface);
    color: #1F1F1F;
    color: var(--on-surface);
    border-radius: 8px;
    border-radius: var(--radius-sm);
    
    /* Typography */
    font-size: 14px;
    font-size: var(--body-medium);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    
    /* Behavior */
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all var(--transition-fast);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
    min-width: 80px;
}

.share-button:hover {
    transform: translateY(-2px);
    transform: var(--translate-hover);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

/* Individual social platform colors */

.share-button.facebook:hover { 
    background-color: #1877f2; 
    color: white; 
}

.share-button.linkedin:hover { 
    background-color: #0077b5; 
    color: white; 
}

.share-button.telegram:hover { 
    background-color: #0088cc; 
    color: white; 
}

.share-button.whatsapp:hover { 
    background-color: #25d366; 
    color: white; 
}

.share-button.twitter:hover { 
    background-color: #1da1f2; 
    color: white; 
}

.share-button.pinterest:hover { 
    background-color: #bd081c; 
    color: white; 
}

/* Share buttons container */

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    gap: var(--space-sm);
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */

@media (max-width: 600px) {
    .btn {
        min-height: calc(40px * 0.9);
        min-height: calc(var(--button-height-md) * 0.9);
        padding: calc(8px * 0.9) calc(calc(8px * 3) * 0.9);
        padding: calc(var(--button-padding-y) * 0.9) calc(var(--button-padding-x) * 0.9);
        font-size: 12px;
        font-size: var(--label-medium);
    }
    
    .btn-sm {
        min-height: calc(32px * 0.9);
        min-height: calc(var(--button-height-sm) * 0.9);
        font-size: 11px;
        font-size: var(--label-small);
    }
    
    .nav-pill {
        padding: calc(8px * 0.75) calc(8px * 2);
        padding: calc(var(--space-sm) * 0.75) var(--space-md);
        font-size: 12px;
        font-size: var(--label-medium);
    }
}

/* Card components and variants */

/* ==========================================================================
   Card Component
   Flexible card system for content containers
   ========================================================================== */

/* ==========================================================================
   Base card styles
   ========================================================================== */

.card {
    /* Layout */
    display: block;
    position: relative;
    
    /* Visual */
    background-color: #FFFFFF;
    background-color: var(--surface);
    border-radius: 16px;
    border-radius: var(--card-radius);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--card-shadow);
    
    /* Spacing */
    padding: calc(8px * 3);
    padding: var(--card-padding);
    margin-bottom: calc(8px * 2);
    margin-bottom: var(--space-md);
    
    /* Behavior */
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all var(--transition-medium);
    transform: translateZ(0); /* GPU acceleration */
}

/* Card hover effect */

.card-interactive,
.card.interactive {
    cursor: pointer;
}

.card-interactive:hover,
.card.interactive:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--card-shadow-hover);
}

/* ==========================================================================
   Card variants
   ========================================================================== */

/* Elevated card */

.card-elevated {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-md);
}

.card-elevated:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: var(--shadow-xl);
}

/* Outlined card */

.card-outlined {
    background-color: transparent;
    border: 1px solid #E0E0E0;
    border: var(--border-thin) solid var(--outline);
    box-shadow: none;
}

.card-outlined:hover {
    border-color: #F0328E;
    border-color: var(--accent);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
}

/* Filled card */

.card-filled {
    background-color: #F7F7F7;
    background-color: var(--surface-variant);
    box-shadow: none;
}

/* Accent card */

.card-accent {
    background-color: #F0328E;
    background-color: var(--accent);
    color: #FFFFFF;
    color: var(--on-accent);
}

.card-accent h1,
.card-accent h2,
.card-accent h3,
.card-accent h4,
.card-accent h5,
.card-accent h6 {
    color: #FFFFFF;
    color: var(--on-accent);
}

.card-accent a {
    color: #FFFFFF;
    color: var(--on-accent);
    text-decoration: underline;
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Card anatomy
   ========================================================================== */

/* Card header */

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: calc(calc(8px * 3) * -1) calc(calc(8px * 3) * -1) calc(8px * 3);
    margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) var(--card-padding);
    padding: calc(8px * 2) calc(8px * 3);
    padding: var(--space-md) var(--card-padding);
    background-color: #FFE08A;
    background-color: var(--primary-container);
    border-radius: 16px 16px 0 0;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.card-accent .card-header {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Card title */

.card-title {
    font-size: 22px;
    font-size: var(--title-large);
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    line-height: var(--line-height-headline);
    color: #1F1F1F;
    color: var(--on-surface);
    margin: 0 0 calc(8px * 2) 0;
    margin: 0 0 var(--space-md) 0;
    border-left: 4px solid #F0328E;
    border-left: var(--border-thick) solid var(--accent);
    padding-left: calc(8px * 2);
    padding-left: var(--space-md);
}

.card-accent .card-title {
    color: #FFFFFF;
    color: var(--on-accent);
    border-left-color: #FFFFFF;
    border-left-color: var(--on-accent);
}

/* Card subtitle */

.card-subtitle {
    font-size: 14px;
    font-size: var(--body-medium);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    color: #49454E;
    color: var(--on-surface-variant);
    margin: calc(8px * -1) 0 calc(8px * 2) 0;
    margin: calc(var(--space-sm) * -1) 0 var(--space-md) 0;
}

/* Card body */

.card-body {
    /* Reset margin for direct child paragraphs */
}

.card-body > *:last-child {
    margin-bottom: 0;
}

/* Card footer */

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: calc(8px * 3) calc(calc(8px * 3) * -1) calc(calc(8px * 3) * -1);
    margin: var(--card-padding) calc(var(--card-padding) * -1) calc(var(--card-padding) * -1);
    padding: calc(8px * 2) calc(8px * 3);
    padding: var(--space-md) var(--card-padding);
    border-top: 1px solid #E0E0E0;
    border-top: var(--border-thin) solid var(--outline);
}

.card-accent .card-footer {
    border-top-color: rgba(255, 255, 255, 0.2);
}

/* Card actions */

.card-actions {
    display: flex;
    gap: 8px;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* ==========================================================================
   Card links
   ========================================================================== */

.card a:not(.btn):not(.nav-pill) {
    color: #1F1F1F;
    color: var(--on-surface);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: var(--transition-fast);
}

.card a:not(.btn):not(.nav-pill):hover {
    color: #F0328E;
    color: var(--accent);
    border-bottom-color: #F0328E;
    border-bottom-color: var(--accent);
}

/* ==========================================================================
   Card lists
   ========================================================================== */

.card ul,
.card ol {
    list-style: none;
    padding: 0;
    margin: 0 0 calc(8px * 2) 0;
    margin: 0 0 var(--space-md) 0;
}

.card li {
    padding-left: calc(8px * 3);
    padding-left: var(--space-lg);
    margin-bottom: 8px;
    margin-bottom: var(--space-sm);
    position: relative;
}

.card li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: #F0328E;
    color: var(--accent);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
}

.card-accent li:before {
    color: #FFFFFF;
    color: var(--on-accent);
}

/* ==========================================================================
   Card grid
   ========================================================================== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: calc(8px * 3);
    grid-gap: var(--space-lg);
    gap: calc(8px * 3);
    gap: var(--space-lg);
}

.card-grid .card {
    margin-bottom: 0;
}

/* ==========================================================================
   Specific card types
   ========================================================================== */

/* Content card (legacy compatibility) */

.content-card {
    background-color: #FFFFFF;
    background-color: var(--surface);
    border-radius: 16px;
    border-radius: var(--card-radius);
    padding: calc(8px * 3);
    padding: var(--card-padding);
    margin-bottom: calc(8px * 2);
    margin-bottom: var(--space-md);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
    transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: var(--transition-medium);
}

.content-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-lg);
}

.content-card .title-large {
    color: #1F1F1F;
    color: var(--on-surface);
    border-left: 4px solid #F0328E;
    border-left: var(--border-thick) solid var(--accent);
    padding-left: calc(8px * 2);
    padding-left: var(--space-md);
    margin-top: 0;
}

/* Connect block (special case) */

.connect-block {
    background: #F0328E;
    background: var(--accent);
    color: #FFFFFF;
    color: var(--on-accent);
    border-radius: 20px;
    border-radius: var(--radius-xl);
    padding: calc(8px * 4);
    padding: var(--space-xl);
    margin-top: calc(8px * 4);
    margin-top: var(--space-xl);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.connect-block h2 {
    color: #FFFFFF;
    color: var(--on-accent);
    border: none;
    padding: 0;
    margin-bottom: calc(8px * 3);
    margin-bottom: var(--space-lg);
}

.connect-block a {
    color: #FFFFFF;
    color: var(--on-accent);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
}

/* ==========================================================================
   Card sizes
   ========================================================================== */

.card-sm {
    padding: calc(8px * 2);
    padding: var(--space-md);
}

.card-sm .card-title {
    font-size: 16px;
    font-size: var(--title-medium);
}

.card-lg {
    padding: calc(8px * 6);
    padding: var(--space-2xl);
}

.card-lg .card-title {
    font-size: 24px;
    font-size: var(--headline-small);
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */

@media (max-width: 905px) {
    .card {
        padding: calc(8px * 2);
        padding: var(--space-md);
    }
    
    .card-lg {
        padding: calc(8px * 3);
        padding: var(--space-lg);
    }
    
    .card-grid {
        grid-template-columns: 1fr;
        gap: calc(8px * 2);
        gap: var(--space-md);
    }
}

@media (max-width: 600px) {
    .card {
        border-radius: 12px;
        border-radius: var(--radius-md);
    }
    
    .card-title {
        font-size: 16px;
        font-size: var(--title-medium);
    }
    
    .connect-block {
        padding: calc(8px * 3);
        padding: var(--space-lg);
        border-radius: 16px;
        border-radius: var(--radius-lg);
    }
}

/* Form components and inputs */

/* ==========================================================================
   Form Components
   Input fields, selects, textareas, and form layouts
   ========================================================================== */

/* ==========================================================================
   Base form elements
   ========================================================================== */

/* Labels */

label {
    display: block;
    margin-bottom: 8px;
    margin-bottom: var(--space-sm);
    font-size: 14px;
    font-size: var(--label-large);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    color: #49454E;
    color: var(--on-surface-variant);
}

/* Required indicator */

label.required::after {
    content: ' *';
    color: #BA1A1A;
    color: var(--error);
}

/* ==========================================================================
   Input fields
   ========================================================================== */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    /* Layout */
    display: block;
    width: 100%;
    
    /* Sizing */
    min-height: 44px;
    min-height: var(--input-height);
    padding: 8px calc(8px * 2);
    padding: var(--space-sm) var(--input-padding-x);
    
    /* Typography */
    font-family: inherit;
    font-size: 14px;
    font-size: var(--body-medium);
    line-height: 1.5;
    
    /* Visual */
    background-color: #FFFFFF;
    background-color: var(--surface);
    color: #1F1F1F;
    color: var(--on-surface);
    border: 2px solid #E0E0E0;
    border: var(--input-border-width) solid var(--outline);
    border-radius: 8px;
    border-radius: var(--input-radius);
    
    /* Behavior */
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all var(--transition-fast);
}

/* Focus state */

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #F0328E;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(240, 50, 142, 0.1);
    box-shadow: var(--shadow-focus);
}

/* Hover state */

.form-control:hover:not(:disabled):not(:focus),
input:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus) {
    border-color: #F0328E;
    border-color: var(--accent);
}

/* Disabled state */

.form-control:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    background-color: #F7F7F7;
    background-color: var(--surface-variant);
    color: #49454E;
    color: var(--on-surface-variant);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Invalid state */

.form-control:invalid,
input:invalid,
textarea:invalid,
select:invalid {
    border-color: #BA1A1A;
    border-color: var(--error);
}

.form-control:invalid:focus,
input:invalid:focus,
textarea:invalid:focus,
select:invalid:focus {
    box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.1);
    box-shadow: var(--shadow-focus-danger);
}

/* ==========================================================================
   Textarea specific
   ========================================================================== */

textarea {
    min-height: calc(44px * 2.5);
    min-height: calc(var(--input-height) * 2.5);
    resize: vertical;
}

textarea.resize-none {
    resize: none;
}

/* ==========================================================================
   Select specific
   ========================================================================== */

select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2349454E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-position: right var(--space-sm) center;
    background-size: 20px;
    padding-right: calc(calc(8px * 2) + 24px);
    padding-right: calc(var(--input-padding-x) + 24px);
}

/* ==========================================================================
   Checkboxes and Radio buttons
   ========================================================================== */

input[type="checkbox"],
input[type="radio"] {
    /* Reset */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Sizing */
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    
    /* Visual */
    background-color: #FFFFFF;
    background-color: var(--surface);
    border: 2px solid #E0E0E0;
    border: var(--border-medium) solid var(--outline);
    
    /* Behavior */
    cursor: pointer;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all var(--transition-fast);
    position: relative;
    flex-shrink: 0;
}

input[type="checkbox"] {
    border-radius: 4px;
    border-radius: var(--radius-xs);
}

input[type="radio"] {
    border-radius: 1000px;
    border-radius: var(--radius-full);
}

/* Hover */

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) {
    border-color: #F0328E;
    border-color: var(--accent);
}

/* Checked state */

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: #F0328E;
    background-color: var(--accent);
    border-color: #F0328E;
    border-color: var(--accent);
}

/* Checkbox checkmark */

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #FFFFFF;
    border: solid var(--on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Radio button dot */

input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 1000px;
    border-radius: var(--radius-full);
    background-color: #FFFFFF;
    background-color: var(--on-accent);
}

/* Focus state */

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(240, 50, 142, 0.1);
    box-shadow: var(--shadow-focus);
}

/* Disabled state */

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Checkbox/Radio with label */

.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    margin-bottom: var(--space-sm);
}

.form-check input {
    margin-right: 8px;
    margin-right: var(--space-sm);
}

.form-check label {
    margin-bottom: 0;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

/* ==========================================================================
   Form groups
   ========================================================================== */

.form-group {
    margin-bottom: calc(8px * 3);
    margin-bottom: var(--space-lg);
}

.form-group:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Form layouts
   ========================================================================== */

/* Inline form */

.form-inline {
    display: flex;
    align-items: flex-end;
    gap: calc(8px * 2);
    gap: var(--space-md);
    flex-wrap: wrap;
}

.form-inline .form-group {
    flex: 1;
    margin-bottom: 0;
}

.form-inline .form-control {
    width: auto;
}

/* Form row */

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: calc(8px * 2);
    grid-gap: var(--space-md);
    gap: calc(8px * 2);
    gap: var(--space-md);
}

/* ==========================================================================
   Input groups
   ========================================================================== */

.input-group {
    display: flex;
    align-items: stretch;
}

.input-group .form-control {
    flex: 1;
    border-radius: 0;
}

.input-group .form-control:first-child {
    border-top-left-radius: 8px;
    border-top-left-radius: var(--input-radius);
    border-bottom-left-radius: 8px;
    border-bottom-left-radius: var(--input-radius);
}

.input-group .form-control:last-child {
    border-top-right-radius: 8px;
    border-top-right-radius: var(--input-radius);
    border-bottom-right-radius: 8px;
    border-bottom-right-radius: var(--input-radius);
}

.input-group-prepend,
.input-group-append {
    display: flex;
    align-items: center;
    padding: 0 calc(8px * 2);
    padding: 0 var(--space-md);
    background-color: #F7F7F7;
    background-color: var(--surface-variant);
    border: 2px solid #E0E0E0;
    border: var(--input-border-width) solid var(--outline);
    font-size: 14px;
    font-size: var(--body-medium);
    color: #49454E;
    color: var(--on-surface-variant);
}

.input-group-prepend {
    border-right: 0;
    border-radius: 8px 0 0 8px;
    border-radius: var(--input-radius) 0 0 var(--input-radius);
}

.input-group-append {
    border-left: 0;
    border-radius: 0 8px 8px 0;
    border-radius: 0 var(--input-radius) var(--input-radius) 0;
}

/* ==========================================================================
   Form validation
   ========================================================================== */

.form-error,
.form-success,
.form-warning {
    display: block;
    margin-top: calc(8px * 0.5);
    margin-top: var(--space-xs);
    font-size: 12px;
    font-size: var(--label-medium);
}

.form-error {
    color: #BA1A1A;
    color: var(--error);
}

.form-success {
    color: #10C691;
    color: var(--success);
}

.form-warning {
    color: #FFA726;
    color: var(--warning);
}

/* Input states with validation */

.has-error .form-control {
    border-color: #BA1A1A;
    border-color: var(--error);
}

.has-success .form-control {
    border-color: #10C691;
    border-color: var(--success);
}

.has-warning .form-control {
    border-color: #FFA726;
    border-color: var(--warning);
}

/* ==========================================================================
   Custom inputs
   ========================================================================== */

/* Toggle switch */

.form-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.form-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.form-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E0E0E0;
    background-color: var(--outline);
    border-radius: 1000px;
    border-radius: var(--radius-full);
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: var(--transition-fast);
}

.form-switch-slider::before {
    position: absolute;
    content: '';
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #FFFFFF;
    background-color: var(--surface);
    border-radius: 1000px;
    border-radius: var(--radius-full);
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: var(--transition-fast);
}

.form-switch input:checked + .form-switch-slider {
    background-color: #F0328E;
    background-color: var(--accent);
}

.form-switch input:checked + .form-switch-slider::before {
    transform: translateX(24px);
}

.form-switch input:focus-visible + .form-switch-slider {
    box-shadow: 0 0 0 3px rgba(240, 50, 142, 0.1);
    box-shadow: var(--shadow-focus);
}

/* Range slider */

input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    width: 100%;
    height: 6px;
    background: #E0E0E0;
    background: var(--outline);
    border-radius: 1000px;
    border-radius: var(--radius-full);
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #F0328E;
    background: var(--accent);
    border-radius: 1000px;
    border-radius: var(--radius-full);
    cursor: pointer;
    -webkit-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: var(--transition-fast);
    transition: var(--transition-fast);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #F0328E;
    background: var(--accent);
    border-radius: 1000px;
    border-radius: var(--radius-full);
    cursor: pointer;
    border: none;
    -moz-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: var(--transition-fast);
    transition: var(--transition-fast);
}

input[type="range"]:hover::-webkit-slider-thumb {
    transform: scale(1.2);
}

input[type="range"]:hover::-moz-range-thumb {
    transform: scale(1.2);
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form-inline .form-control {
        width: 100%;
    }
}

/* Cookie consent component */

/* ==========================================================================
   Cookie Consent Component
   Based on Material Design 3 principles
   ========================================================================== */

/* Cookie Banner */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    background-color: var(--surface);
    border-top: 3px solid #F0328E;
    border-top: 3px solid var(--accent);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) var(--ease-out);
    transition: transform var(--transition-medium) var(--ease-out);
}

.cookie-banner.show {
    transform: translateY(0);
}

.cookie-content {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: calc(8px * 3);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(8px * 3);
    gap: var(--space-lg);
}

.cookie-text h3 {
    font-size: 22px;
    font-size: var(--title-large);
    font-weight: var(--font-bold);
    color: #1F1F1F;
    color: var(--on-surface);
    margin-bottom: 8px;
    margin-bottom: var(--space-sm);
}

.cookie-text p {
    font-size: 14px;
    font-size: var(--body-medium);
    color: #49454E;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: 1.5;
    line-height: var(--line-height-body);
}

.cookie-buttons {
    display: flex;
    gap: calc(8px * 2);
    gap: var(--space-md);
    flex-shrink: 0;
}

/* Cookie Modal */

.cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: calc(8px * 3);
    padding: var(--space-lg);
}

.cookie-modal.show {
    display: flex;
}

.cookie-modal-content {
    background-color: #FFFFFF;
    background-color: var(--surface);
    border-radius: 20px;
    border-radius: var(--radius-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.3s var(--ease-out);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cookie-modal-header {
    padding: calc(8px * 4) calc(8px * 4) calc(8px * 3);
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    border-bottom: 1px solid #E0E0E0;
    border-bottom: 1px solid var(--outline);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cookie-modal-header h2 {
    font-size: 24px;
    font-size: var(--headline-small);
    font-weight: var(--font-bold);
    color: #1F1F1F;
    color: var(--on-surface);
    margin: 0;
}

.cookie-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #49454E;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: var(--transition-fast);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.cookie-close:hover {
    background-color: #F7F7F7;
    background-color: var(--surface-variant);
    color: #1F1F1F;
    color: var(--on-surface);
}

.cookie-modal-body {
    padding: calc(8px * 3) calc(8px * 4);
    padding: var(--space-lg) var(--space-xl);
}

.cookie-modal-body > p {
    font-size: 16px;
    font-size: var(--body-large);
    color: #49454E;
    color: var(--on-surface-variant);
    margin-bottom: calc(8px * 4);
    margin-bottom: var(--space-xl);
}

.cookie-category {
    margin-bottom: calc(8px * 3);
    margin-bottom: var(--space-lg);
    padding: calc(8px * 3);
    padding: var(--space-lg);
    border: 1px solid #E0E0E0;
    border: 1px solid var(--outline);
    border-radius: 16px;
    border-radius: var(--radius-lg);
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: var(--transition-fast);
}

.cookie-category:hover {
    border-color: #F0328E;
    border-color: var(--accent);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
}

.cookie-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    margin-bottom: var(--space-sm);
}

.cookie-category h4 {
    font-size: 16px;
    font-size: var(--title-medium);
    font-weight: var(--font-semibold);
    color: #1F1F1F;
    color: var(--on-surface);
    margin: 0;
}

.cookie-category p {
    font-size: 14px;
    font-size: var(--body-medium);
    color: #49454E;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: 1.5;
    line-height: var(--line-height-body);
}

/* Cookie Switches */

.cookie-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    cursor: pointer;
}

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

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #C7C7C7;
    background-color: var(--outline-variant);
    border-radius: 12px;
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: var(--transition-fast);
}

.cookie-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #FFFFFF;
    background-color: var(--surface);
    border-radius: 50%;
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: var(--transition-fast);
}

.cookie-switch input:checked + .cookie-slider {
    background-color: #F0328E;
    background-color: var(--accent);
}

.cookie-switch input:checked + .cookie-slider:before {
    transform: translateX(24px);
}

.cookie-modal-footer {
    padding: calc(8px * 3) calc(8px * 4);
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid #E0E0E0;
    border-top: 1px solid var(--outline);
    display: flex;
    gap: calc(8px * 2);
    gap: var(--space-md);
    flex-wrap: wrap;
}

.cookie-modal-links {
    padding: 0 calc(8px * 4) calc(8px * 3);
    padding: 0 var(--space-xl) var(--space-lg);
    text-align: center;
    font-size: 12px;
    font-size: var(--body-small);
}

.cookie-modal-links a {
    color: #F0328E;
    color: var(--accent);
    text-decoration: none;
    font-weight: var(--font-medium);
}

.cookie-modal-links a:hover {
    text-decoration: underline;
}

/* Dark mode support */

@media (prefers-color-scheme: dark) {
    .cookie-banner {
        background-color: #1E1E1E;
        background-color: var(--dark-surface);
    }
    
    .cookie-modal-content {
        background-color: #1E1E1E;
        background-color: var(--dark-surface);
    }
    
    .cookie-text h3,
    .cookie-modal-header h2,
    .cookie-category h4 {
        color: #E0E0E0;
        color: var(--dark-on-surface);
    }
    
    .cookie-text p,
    .cookie-modal-body > p,
    .cookie-category p {
        color: var(--dark-on-surface-variant);
    }
    
    .cookie-category {
        border-color: var(--dark-outline);
    }
    
    .cookie-category:hover {
        border-color: #F0328E;
        border-color: var(--accent);
    }
    
    .cookie-close {
        color: var(--dark-on-surface-variant);
    }
    
    .cookie-close:hover {
        background-color: #2D2D2D;
        background-color: var(--dark-surface-variant);
        color: #E0E0E0;
        color: var(--dark-on-surface);
    }
}

/* Responsive Design */

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: calc(8px * 2);
        gap: var(--space-md);
    }
    
    .cookie-buttons {
        width: 100%;
        justify-content: center;
    }
    
    .cookie-buttons .btn {
        flex: 1;
        min-width: 120px;
    }
    
    .cookie-modal-content {
        margin: calc(8px * 2);
        margin: var(--space-md);
        max-height: calc(100vh - 32px);
    }
    
    .cookie-modal-footer {
        flex-direction: column;
    }
    
    .cookie-modal-footer .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .cookie-buttons {
        flex-direction: column;
    }
    
    .cookie-category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        gap: var(--space-sm);
    }
    
    .cookie-switch {
        align-self: flex-end;
    }
}

/* ==========================================================================
   Utility styles (must be loaded last)
   ========================================================================== */

/* Helper utilities and animations */

/* ==========================================================================
   Utility Helpers
   Common utility classes for various purposes
   ========================================================================== */

/* ==========================================================================
   Display utilities
   ========================================================================== */

.block { display: block; }

.inline-block { display: inline-block; }

.inline { display: inline; }

.hidden { display: none; }

.invisible { visibility: hidden; }

/* Responsive display */

@media (min-width: 600px) {
    .sm\:block { display: block; }
    .sm\:inline-block { display: inline-block; }
    .sm\:inline { display: inline; }
    .sm\:hidden { display: none; }
}

@media (min-width: 905px) {
    .md\:block { display: block; }
    .md\:inline-block { display: inline-block; }
    .md\:inline { display: inline; }
    .md\:hidden { display: none; }
}

@media (min-width: 1240px) {
    .lg\:block { display: block; }
    .lg\:inline-block { display: inline-block; }
    .lg\:inline { display: inline; }
    .lg\:hidden { display: none; }
}

/* ==========================================================================
   Animations
   ========================================================================== */

/* Fade animations */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(calc(8px * 3));
        transform: translateY(var(--space-lg));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(calc(calc(8px * 3) * -1));
        transform: translateY(calc(var(--space-lg) * -1));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale animations */

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Slide animations */

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Spin animation */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Pulse animation */

@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Animation classes */

.animate-fadeIn { animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1); animation: fadeIn var(--duration-medium) var(--ease-standard); }

.animate-fadeOut { animation: fadeOut 250ms cubic-bezier(0.4, 0, 0.2, 1); animation: fadeOut var(--duration-medium) var(--ease-standard); }

.animate-fadeInUp { animation: fadeInUp 250ms cubic-bezier(0.4, 0, 0.2, 1); animation: fadeInUp var(--duration-medium) var(--ease-standard); }

.animate-fadeInDown { animation: fadeInDown 250ms cubic-bezier(0.4, 0, 0.2, 1); animation: fadeInDown var(--duration-medium) var(--ease-standard); }

.animate-scaleIn { animation: scaleIn 250ms cubic-bezier(0.4, 0, 0.2, 1); animation: scaleIn var(--duration-medium) var(--ease-standard); }

.animate-scaleOut { animation: scaleOut 250ms cubic-bezier(0.4, 0, 0.2, 1); animation: scaleOut var(--duration-medium) var(--ease-standard); }

.animate-slideInLeft { animation: slideInLeft 250ms cubic-bezier(0.4, 0, 0.2, 1); animation: slideInLeft var(--duration-medium) var(--ease-standard); }

.animate-slideInRight { animation: slideInRight 250ms cubic-bezier(0.4, 0, 0.2, 1); animation: slideInRight var(--duration-medium) var(--ease-standard); }

.animate-spin { animation: spin 500ms linear infinite; animation: spin var(--duration-slower) linear infinite; }

.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation: pulse 2s var(--ease-standard) infinite; }

/* Animation delays */

.animation-delay-100 { animation-delay: 100ms; }

.animation-delay-200 { animation-delay: 200ms; }

.animation-delay-300 { animation-delay: 300ms; }

.animation-delay-400 { animation-delay: 400ms; }

.animation-delay-500 { animation-delay: 500ms; }

/* ==========================================================================
   Hero content animation
   ========================================================================== */

.hero-content {
    animation: fadeInUp 0.6s ease-out;
}

/* ==========================================================================
   Selection styles
   ========================================================================== */

::-moz-selection {
    background-color: #F0328E;
    background-color: var(--accent);
    color: #FFFFFF;
    color: var(--on-accent);
}

::selection {
    background-color: #F0328E;
    background-color: var(--accent);
    color: #FFFFFF;
    color: var(--on-accent);
}

/* ==========================================================================
   Focus styles
   ========================================================================== */

:focus-visible {
    outline: 2px solid #F0328E;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Remove focus for mouse users */

:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   Scrollbar styles
   ========================================================================== */

/* Webkit browsers */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #F7F7F7;
    background: var(--surface-variant);
    border-radius: 4px;
    border-radius: var(--radius-xs);
}

::-webkit-scrollbar-thumb {
    background: #F0328E;
    background: var(--accent);
    border-radius: 4px;
    border-radius: var(--radius-xs);
}

::-webkit-scrollbar-thumb:hover {
    background: #C91B6E;
    background: var(--accent-dark);
}

/* Firefox */

* {
    scrollbar-width: thin;
    scrollbar-color: #F0328E #F7F7F7;
    scrollbar-color: var(--accent) var(--surface-variant);
}

/* ==========================================================================
   Loading states
   ========================================================================== */

.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #F0328E;
    border: 3px solid var(--accent);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

.loading-lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

.loading-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* Skeleton loading */

.skeleton {
    background: linear-gradient(
        90deg,
        #F7F7F7 25%,
        rgba(0, 0, 0, 0.05) 50%,
        #F7F7F7 75%
    );
    background: linear-gradient(
        90deg,
        var(--surface-variant) 25%,
        rgba(0, 0, 0, 0.05) 50%,
        var(--surface-variant) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ==========================================================================
   Overflow utilities
   ========================================================================== */

.overflow-auto { overflow: auto; }

.overflow-hidden { overflow: hidden; }

.overflow-visible { overflow: visible; }

.overflow-scroll { overflow: scroll; }

.overflow-x-auto { overflow-x: auto; }

.overflow-y-auto { overflow-y: auto; }

.overflow-x-hidden { overflow-x: hidden; }

.overflow-y-hidden { overflow-y: hidden; }

.overflow-x-scroll { overflow-x: scroll; }

.overflow-y-scroll { overflow-y: scroll; }

/* ==========================================================================
   Border utilities
   ========================================================================== */

.border { border: 1px solid #E0E0E0; border: var(--border-thin) solid var(--outline); }

.border-2 { border: 2px solid #E0E0E0; border: var(--border-medium) solid var(--outline); }

.border-4 { border: 4px solid #E0E0E0; border: var(--border-thick) solid var(--outline); }

.border-0 { border: 0; }

.border-t { border-top: 1px solid #E0E0E0; border-top: var(--border-thin) solid var(--outline); }

.border-r { border-right: 1px solid #E0E0E0; border-right: var(--border-thin) solid var(--outline); }

.border-b { border-bottom: 1px solid #E0E0E0; border-bottom: var(--border-thin) solid var(--outline); }

.border-l { border-left: 1px solid #E0E0E0; border-left: var(--border-thin) solid var(--outline); }

.border-primary { border-color: #FFC11D; border-color: var(--primary); }

.border-accent { border-color: #F0328E; border-color: var(--accent); }

.border-success { border-color: #10C691; border-color: var(--success); }

.border-error { border-color: #BA1A1A; border-color: var(--error); }

.border-warning { border-color: #FFA726; border-color: var(--warning); }

/* Border radius */

.rounded-none { border-radius: 0; }

.rounded-xs { border-radius: 4px; border-radius: var(--radius-xs); }

.rounded-sm { border-radius: 8px; border-radius: var(--radius-sm); }

.rounded { border-radius: 12px; border-radius: var(--radius-md); }

.rounded-lg { border-radius: 16px; border-radius: var(--radius-lg); }

.rounded-xl { border-radius: 20px; border-radius: var(--radius-xl); }

.rounded-2xl { border-radius: 24px; border-radius: var(--radius-2xl); }

.rounded-full { border-radius: 1000px; border-radius: var(--radius-full); }

/* ==========================================================================
   Shadow utilities
   ========================================================================== */

.shadow-none { box-shadow: none; }

.shadow-xs { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.02); box-shadow: var(--shadow-xs); }

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-sm); }

.shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: var(--shadow-md); }

.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-lg); }

.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); box-shadow: var(--shadow-xl); }

.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); box-shadow: var(--shadow-2xl); }

/* ==========================================================================
   Opacity utilities
   ========================================================================== */

.opacity-0 { opacity: 0; }

.opacity-10 { opacity: 0.1; }

.opacity-20 { opacity: 0.2; }

.opacity-30 { opacity: 0.3; }

.opacity-40 { opacity: 0.4; }

.opacity-50 { opacity: 0.5; }

.opacity-60 { opacity: 0.6; }

.opacity-70 { opacity: 0.7; }

.opacity-80 { opacity: 0.8; }

.opacity-90 { opacity: 0.9; }

.opacity-100 { opacity: 1; }

/* ==========================================================================
   Cursor utilities
   ========================================================================== */

.cursor-auto { cursor: auto; }

.cursor-default { cursor: default; }

.cursor-pointer { cursor: pointer; }

.cursor-wait { cursor: wait; }

.cursor-move { cursor: move; }

.cursor-not-allowed { cursor: not-allowed; }

.cursor-help { cursor: help; }

.cursor-text { cursor: text; }

/* ==========================================================================
   User select utilities
   ========================================================================== */

.select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.select-text { -webkit-user-select: text; -moz-user-select: text; user-select: text; }

.select-all { -webkit-user-select: all; -moz-user-select: all; user-select: all; }

.select-auto { -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; }

/* ==========================================================================
   Pointer events utilities
   ========================================================================== */

.pointer-events-none { pointer-events: none; }

.pointer-events-auto { pointer-events: auto; }

/* ==========================================================================
   Resize utilities
   ========================================================================== */

.resize-none { resize: none; }

.resize-y { resize: vertical; }

.resize-x { resize: horizontal; }

.resize { resize: both; }

/* ==========================================================================
   Page-specific styles (optional)
   Future enhancement: Add page-specific styles here
   ========================================================================== */

/* @import url('pages/home.css'); */

/* @import url('pages/competencies.css'); */

/* @import url('pages/tools.css'); */

/* ==========================================================================
   Theme variations (optional)
   Future enhancement: Add theme-specific overrides
   ========================================================================== */

/* @import url('themes/dark.css') (prefers-color-scheme: dark); */

/* ==========================================================================
   Vendor overrides (if needed)
   ========================================================================== */

/* Any third-party library style overrides */

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    /* Hide non-essential elements */
    .nav-pills,
    .share-buttons,
    .back-home,
    .skip-link {
        display: none !important;
    }
    
    /* Optimize for print */
    body {
        color: black;
        background: white;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    /* Show URLs for links */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    /* Ensure good page breaks */
    .card,
    .content-card {
        page-break-inside: avoid;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}