/**
 * Premium Design System for ResumeCraft Web
 * Matching iOS design tokens for cross-platform consistency
 */

:root {
    /* ========== COLOR PALETTE ========== */
    
    /* Primary Brand Colors */
    --color-primary-blue: #2563EB;
    --color-primary-dark: #1E40AF;
    --color-primary-light: #60A5FA;
    
    /* Accent Colors */
    --color-accent-green: #10B981;
    --color-accent-orange: #F59E0B;
    --color-accent-red: #EF4444;
    --color-accent-purple: #8B5CF6;
    
    /* Neutral Palette */
    --color-neutral-900: #111827;
    --color-neutral-800: #1F2937;
    --color-neutral-700: #374151;
    --color-neutral-600: #4B5563;
    --color-neutral-500: #6B7280;
    --color-neutral-400: #9CA3AF;
    --color-neutral-300: #D1D5DB;
    --color-neutral-200: #E5E7EB;
    --color-neutral-100: #F3F4F6;
    --color-neutral-50: #F9FAFB;
    --color-white: #FFFFFF;
    
    /* Surface Colors */
    --color-surface-background: var(--color-neutral-50);
    --color-surface-card: var(--color-white);
    --color-surface-overlay: rgba(0, 0, 0, 0.6);
    --color-surface-modal: var(--color-white);
    
    /* Semantic Colors */
    --color-text-primary: var(--color-neutral-900);
    --color-text-secondary: var(--color-neutral-700);
    --color-text-tertiary: var(--color-neutral-500);
    --color-text-disabled: var(--color-neutral-400);
    --color-text-on-primary: var(--color-white);
    
    --color-border-default: var(--color-neutral-300);
    --color-border-focus: var(--color-primary-blue);
    --color-border-error: var(--color-accent-red);
    --color-border-success: var(--color-accent-green);
    
    /* Template-Specific Colors */
    --color-template-professional: var(--color-primary-blue);
    --color-template-creative: var(--color-accent-purple);
    --color-template-minimal: var(--color-neutral-800);
    --color-template-modern: #06B6D4;
    --color-template-technical: #0EA5E9;
    
    /* ========== TYPOGRAPHY ========== */
    
    /* Font Families */
    --font-family-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-rounded: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
    
    /* Font Sizes */
    --font-size-display-large: 57px;
    --font-size-display-medium: 45px;
    --font-size-display-small: 36px;
    
    --font-size-headline-large: 32px;
    --font-size-headline-medium: 28px;
    --font-size-headline-small: 24px;
    
    --font-size-title-large: 22px;
    --font-size-title-medium: 18px;
    --font-size-title-small: 16px;
    
    --font-size-body-large: 17px;
    --font-size-body-medium: 15px;
    --font-size-body-small: 13px;
    
    --font-size-label-large: 14px;
    --font-size-label-medium: 12px;
    --font-size-label-small: 10px;
    
    --font-size-caption: 12px;
    
    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2.0;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.5px;
    --letter-spacing-normal: 0px;
    --letter-spacing-wide: 0.5px;
    --letter-spacing-wider: 1px;
    
    /* ========== SPACING ========== */
    
    /* Base Unit: 4px */
    --spacing-xxxs: 4px;
    --spacing-xxs: 8px;
    --spacing-xs: 12px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 40px;
    --spacing-xxl: 48px;
    --spacing-xxxl: 64px;
    --spacing-huge: 80px;
    
    /* Component-Specific Spacing */
    --spacing-card-padding: var(--spacing-md);
    --spacing-card-gap: var(--spacing-sm);
    --spacing-section: var(--spacing-lg);
    --spacing-page-horizontal: var(--spacing-md);
    --spacing-page-vertical: var(--spacing-lg);
    
    /* ========== BORDER RADIUS ========== */
    
    --radius-none: 0px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-xxl: 24px;
    --radius-full: 9999px;
    
    /* Component-Specific Radii */
    --radius-button: var(--radius-md);
    --radius-card: var(--radius-lg);
    --radius-input: var(--radius-md);
    --radius-modal: var(--radius-xl);
    --radius-chip: var(--radius-full);
    
    /* ========== SHADOWS ========== */
    
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);
    
    /* Colored Shadows */
    --shadow-primary: 0 4px 8px rgba(37, 99, 235, 0.3);
    --shadow-success: 0 4px 8px rgba(16, 185, 129, 0.3);
    --shadow-error: 0 4px 8px rgba(239, 68, 68, 0.3);
    
    /* ========== TRANSITIONS ========== */
    
    --transition-instant: 100ms;
    --transition-fast: 200ms;
    --transition-normal: 300ms;
    --transition-slow: 500ms;
    --transition-slower: 700ms;
    
    /* Timing Functions */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ========== Z-INDEX ========== */
    
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ========== DARK MODE SUPPORT ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-surface-background: var(--color-neutral-900);
        --color-surface-card: var(--color-neutral-800);
        --color-text-primary: var(--color-neutral-50);
        --color-text-secondary: var(--color-neutral-300);
        --color-text-tertiary: var(--color-neutral-400);
        --color-border-default: var(--color-neutral-700);
    }
}

/* ========== BASE STYLES ========== */

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

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

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-body-medium);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-surface-background);
}

/* ========== TYPOGRAPHY CLASSES ========== */

.display-large {
    font-family: var(--font-family-rounded);
    font-size: var(--font-size-display-large);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.display-medium {
    font-family: var(--font-family-rounded);
    font-size: var(--font-size-display-medium);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.headline-large {
    font-family: var(--font-family-rounded);
    font-size: var(--font-size-headline-large);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.headline-medium {
    font-family: var(--font-family-rounded);
    font-size: var(--font-size-headline-medium);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.title-large {
    font-size: var(--font-size-title-large);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

.title-medium {
    font-size: var(--font-size-title-medium);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

.body-large {
    font-size: var(--font-size-body-large);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
}

.body-medium {
    font-size: var(--font-size-body-medium);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
}

.label-medium {
    font-size: var(--font-size-label-medium);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.caption {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-tertiary);
}