/* Apple.com Premier Class Design System */

:root {
    /* Apple's Exact Typography System */
    --apple-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
    --apple-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    --apple-font-mono: ui-monospace, Menlo, Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
    
    /* Apple's Exact Color System */
    /* COLORS REMOVED: Inheriting from unified-variables.css for Dark Mode support */

    
    /* Apple's Spacing System (8pt grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
    
    /* Apple's Motion System */
    --apple-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --apple-ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
    --apple-ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
    --apple-ease-emphasize: cubic-bezier(0.28, 0.11, 0.32, 1);
    
    /* Apple's Border Radius System */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 9999px;
    
    /* Apple's Shadow System */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

/* Mock Data Toggle Switch - iOS Style */
.mock-data-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 24px;
}

.mock-data-toggle label {
    font-size: 15px;
    font-weight: 500;
    color: var(--apple-label-secondary);
    margin: 0;
    user-select: none;
}

.toggle-switch {
    position: relative;
    width: 51px;
    height: 31px;
    background-color: var(--apple-gray4);
    border-radius: 31px;
    cursor: pointer;
    transition: background-color 200ms var(--apple-ease-standard);
}

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

.toggle-switch .slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    background-color: white;
    border-radius: 50%;
    transition: transform 200ms var(--apple-ease-standard);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .slider {
    transform: translateX(20px);
}

.toggle-switch.checked {
    background-color: var(--apple-blue);
}

/* Apple.com Premier Typography - Complete Scale */

/* Hero Typography - Apple's Largest Headlines */
.hero-title-premier {
    font-family: var(--apple-font-display);
    font-size: clamp(48px, 8vw, 80px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.9;
    color: var(--apple-label-primary);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
}

.hero-subtitle-premier {
    font-family: var(--apple-font-text);
    font-size: 21px;
    font-weight: 400;
    letter-spacing: -0.022em;
    line-height: 1.47619;
    color: var(--apple-label-secondary);
    font-feature-settings: "kern" 1;
}

/* Apple's Complete Typography Scale */
.display-large {
    font-family: var(--apple-font-display);
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.9;
    color: var(--apple-label-primary);
}

.display-medium {
    font-family: var(--apple-font-display);
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -0.032em;
    line-height: 1.0;
    color: var(--apple-label-primary);
}

.display-small {
    font-family: var(--apple-font-display);
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.05;
    color: var(--apple-label-primary);
}

/* Headlines - Apple's Primary Headers */
.headline-large {
    font-family: var(--apple-font-display);
    font-size: 34px; /* Standardized across all pages */
    font-weight: 700;
    letter-spacing: -0.024em;
    line-height: 1.125;
    color: #ffffff !important; /* White for dark mode - !important to override text-primary */
}

.headline-medium {
    font-family: var(--apple-font-display);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.14286;
    color: var(--apple-label-primary);
}

.headline-small {
    font-family: var(--apple-font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.020em;
    line-height: 1.16667;
    color: var(--apple-label-primary);
}

/* Titles - Apple's Section Headers */
.title-large {
    font-family: var(--apple-font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.27273;
    color: var(--apple-label-primary);
}

.title-medium {
    font-family: var(--apple-font-text);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.016em;
    line-height: 1.3;
    color: var(--apple-label-primary);
}

.title-small {
    font-family: var(--apple-font-text);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.014em;
    line-height: 1.31579;
    color: var(--apple-label-primary);
}

/* Body Text - Apple's Primary Content */
.body-large {
    font-family: var(--apple-font-text);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.012em;
    line-height: 1.42105;
    color: var(--apple-label-primary);
}

.body-medium {
    font-family: var(--apple-font-text);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.022em;
    line-height: 1.47059;
    color: var(--apple-label-primary);
}

.body-small {
    font-family: var(--apple-font-text);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.008em;
    line-height: 1.46667;
    color: var(--apple-label-primary);
}

/* Labels - Apple's UI Text */
.label-large {
    font-family: var(--apple-font-text);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 1.29412;
    color: var(--apple-label-primary);
}

.label-medium {
    font-family: var(--apple-font-text);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.016em;
    line-height: 1.33333;
    color: var(--apple-label-primary);
}

.label-small {
    font-family: var(--apple-font-text);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.008em;
    line-height: 1.38462;
    color: var(--apple-label-primary);
}

/* Caption - Apple's Small Text */
.caption-large {
    font-family: var(--apple-font-text);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.008em;
    line-height: 1.38462;
    color: var(--apple-label-secondary);
}

.caption-medium {
    font-family: var(--apple-font-text);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.006em;
    line-height: 1.33333;
    color: var(--apple-label-secondary);
}

.caption-small {
    font-family: var(--apple-font-text);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.006em;
    line-height: 1.36364;
    color: var(--apple-label-tertiary);
}

/* Apple Font Weight Utilities */
.font-ultralight { font-weight: 100; }
.font-thin { font-weight: 200; }
.font-light { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-heavy { font-weight: 800; }
.font-black { font-weight: 900; }

/* Apple Color Utilities */
.text-primary { color: #ffffff !important; } /* Force white for dark mode */
.text-secondary { color: var(--apple-label-secondary); }
.text-tertiary { color: var(--apple-label-tertiary); }
.text-quaternary { color: var(--apple-label-quaternary); }
.text-blue { color: var(--apple-blue); }
.text-white { color: #ffffff; }

/* Global Apple Font Application */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--apple-font-text);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.022em;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);

    /* Disable overscroll bounce */
    overscroll-behavior: none;
    touch-action: manipulation;
}

.dark-mode body {
    background-color: #000000;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--apple-font-display);
    font-weight: 600;
    margin: 0;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.024em;
    line-height: 1.125;
}

h2 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.14286;
}

h3 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.020em;
    line-height: 1.16667;
}

h4 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.27273;
}

h5 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.016em;
    line-height: 1.3;
}

h6 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.014em;
    line-height: 1.31579;
}

p {
    font-family: var(--apple-font-text);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.022em;
    line-height: 1.47059;
    margin: 0;
}

button, input, select, textarea {
    font-family: var(--apple-font-text);
    font-feature-settings: "kern" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Apple.com Premier Cards */
.card-premier {
    background: var(--bg-secondary);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow: 
        0 1px 2.2px rgba(0, 0, 0, 0.02),
        0 2.5px 5.3px rgba(0, 0, 0, 0.028),
        0 4.5px 10px rgba(0, 0, 0, 0.035),
        0 8px 17.9px rgba(0, 0, 0, 0.042),
        0 15px 33.4px rgba(0, 0, 0, 0.05),
        0 36px 80px rgba(0, 0, 0, 0.07);
    transition: all 0.4s var(--apple-ease-emphasize);
    position: relative;
    overflow: hidden;
}

.card-premier::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-premier:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 
        0 2px 4.4px rgba(0, 0, 0, 0.025),
        0 5px 10.6px rgba(0, 0, 0, 0.035),
        0 9px 20px rgba(0, 0, 0, 0.04),
        0 16px 35.8px rgba(0, 0, 0, 0.045),
        0 30px 66.8px rgba(0, 0, 0, 0.055),
        0 72px 160px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 122, 255, 0.1);
}

.card-premier:hover::before {
    opacity: 1;
}

/* Apple.com Premier Buttons */
.btn-premier {
    font-family: var(--apple-font-text);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.022em;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: all 0.3s var(--apple-ease-emphasize);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

.btn-premier-primary {
    background: linear-gradient(135deg, var(--apple-blue) 0%, var(--apple-indigo) 100%);
    color: white;
    box-shadow: 
        0 1px 2px rgba(0, 122, 255, 0.25),
        0 4px 12px rgba(0, 122, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-premier-primary:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 
        0 2px 4px rgba(0, 122, 255, 0.3),
        0 8px 25px rgba(0, 122, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-premier-secondary {
    background: rgba(0, 122, 255, 0.08);
    color: var(--apple-blue);
    border: 0.5px solid rgba(0, 122, 255, 0.2);
    backdrop-filter: blur(10px);
}

.btn-premier-secondary:hover {
    background: rgba(0, 122, 255, 0.12);
    transform: translateY(-0.5px);
}

/* Apple.com Premier Animations */
@keyframes appleSlideUp {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes appleScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Apple.com Premier Glass Effects */
.glass-premier {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    box-shadow: 
        0 1px 1px rgba(0, 0, 0, 0.02),
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Apple.com Premier Input Fields */
.input-premier {
    font-family: var(--apple-font-text);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.022em;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    transition: all 0.2s var(--apple-ease-standard);
}

.input-premier:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* Apple.com Premier Status Indicators */
.status-premier {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.status-premier-active {
    background: rgba(52, 199, 89, 0.1);
    color: #34c759;
}

.status-premier-pending {
    background: rgba(255, 149, 0, 0.1);
    color: #ff9500;
}

.status-premier-inactive {
    background: var(--apple-fill-secondary);
    color: var(--apple-label-tertiary);
}

/* Apple.com Premier List Items */
.list-item-premier {
    display: flex;
    align-items: center;
    padding: var(--space-4);
    border-bottom: 0.33px solid var(--apple-separator-non-opaque);
    transition: all 0.2s var(--apple-ease-standard);
    cursor: pointer;
    position: relative;
}

.list-item-premier:hover {
    background: var(--apple-fill-primary);
}

.list-item-premier:last-child {
    border-bottom: none;
}

/* Apple.com Premier Navigation */
.nav-premier {
    background: var(--bg-secondary);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-primary);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-item-premier {
    font-family: var(--apple-font-text);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.022em;
    color: var(--apple-label-primary);
    text-decoration: none;
    padding: var(--space-3) var(--space-4);
    transition: all 0.15s var(--apple-ease-standard);
    position: relative;
}

.nav-item-premier:hover {
    color: var(--apple-blue);
}

.nav-item-premier.active {
    color: var(--apple-blue);
    font-weight: 500;
}

/* Apple.com Premier Responsive */
@media (max-width: 768px) {
    .hero-title-premier {
        font-size: clamp(32px, 8vw, 48px);
        letter-spacing: -0.032em;
    }
    
    .hero-subtitle-premier {
        font-size: 19px;
        line-height: 1.42105;
    }
    
    .btn-premier {
        font-size: 17px;
        padding: var(--space-4) var(--space-8);
    }
}

@media (max-width: 480px) {
    .hero-title-premier {
        font-size: clamp(28px, 7vw, 36px);
        letter-spacing: -0.028em;
    }
    
    .hero-subtitle-premier {
        font-size: 17px;
        line-height: 1.41176;
    }
}

/* Apple.com Premier Motion Effects */
.animate-slide-up {
    animation: appleSlideUp 0.6s var(--apple-ease-emphasize) both;
}

.animate-fade-in {
    animation: appleFadeIn 0.4s var(--apple-ease-standard) both;
}

.animate-scale {
    animation: appleScale 0.5s var(--apple-ease-emphasize) both;
}

/* Staggered Animation Delays */
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-delay-500 { animation-delay: 0.5s; }

/* Apple.com Premier Focus States */
.focus-premier:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
    border-color: var(--apple-blue);
}

/* Apple.com Premier Loading States */
.loading-premier {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.loading-premier::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: appleShimmer 1.5s ease-in-out infinite;
}

@keyframes appleShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ========================================
   RESPONSIVE TYPOGRAPHY - Standardized
   ======================================== */

/* Tablet and below */
@media (max-width: 768px) {
    .headline-large {
        font-size: 28px; /* Tablet standard */
    }
}

/* Mobile */
@media (max-width: 480px) {
    .headline-large {
        font-size: 24px; /* Mobile standard */
    }
}