/* Apple App Store Design Tokens */

:root {
    /* ========== COLORS ==========*/
    
    /* System Colors - Light Mode */
    --systemPrimary: #000000;
    --systemSecondary: rgba(60, 60, 67, 0.6);
    --systemTertiary: rgba(60, 60, 67, 0.3);
    --systemQuaternary: rgba(116, 116, 128, 0.08);
    --systemQuinary: rgba(116, 116, 128, 0.04);
    
    /* Background Colors */
    --pageBg: #ffffff;
    --cardBg: #ffffff;
    --navSidebarBG: #f9f9f9;
    --footerBg: #f2f2f2;
    
    /* Accent Colors */
    --keyColor: #0071e3;
    --keyColorHover: #0077ed;
    --selectionColor: rgba(0, 113, 227, 0.1);
    
    /* Label Colors */
    --label-primary: #000000;
    --label-inverse: #ffffff;
    
    /* Contrast Colors (for overlays and special buttons) */
    --contrast-bg: #ffffff;
    --contrast-text: #000000;
    
    /* Border Colors */
    --borderColor: rgba(0, 0, 0, 0.1);
    --borderColorLight: rgba(0, 0, 0, 0.04);
    --keylineBorder: 1px solid rgba(0, 0, 0, 0.1);
    
    /* Shadow Colors */
    --shadowSmall: 0 3px 9px rgba(0, 0, 0, 0.08);
    --shadowMedium: 0 3px 20px rgba(0, 0, 0, 0.08);
    --shadowLarge: 0 10px 40px rgba(0, 0, 0, 0.12);
    
    /* ========== TYPOGRAPHY ========== */
    
    /* Font Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-heavy: 800;
    
    /* Font Sizes - Mobile First */
    --fs-largeTitle: 26px;
    --fs-title1: 22px;
    --fs-title2: 17px;
    --fs-title3: 15px;
    --fs-headline: 13px;
    --fs-body: 13px;
    --fs-callout: 12px;
    --fs-subhead: 11px;
    --fs-footnote: 10px;
    
    /* Line Heights */
    --lh-largeTitle: 1.23077;
    --lh-title1: 1.18182;
    --lh-title2: 1.29412;
    --lh-title3: 1.33333;
    --lh-headline: 1.23077;
    --lh-body: 1.23077;
    --lh-bodyTall: 1.38462;
    --lh-callout: 1.25;
    --lh-subhead: 1.27273;
    --lh-footnote: 1.3;
    
    /* ========== SPACING ========== */
    --space-3: 3px;
    --space-5: 5px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-18: 18px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-36: 36px;
    --space-40: 40px;
    
    /* ========== BORDER RADIUS ========== */
    --radius-small: 5px;
    --radius-medium: 8px;
    --radius-large: 12px;
    --radius-xlarge: 16px;
    --radius-xxlarge: 20px;
    --radius-round: 50%;
    
    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.14s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.56s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ========== LAYOUT ========== */
    --sidebar-width: 260px;
    --content-max-width: 1680px;
    --gutter-small: 20px;
    --gutter-medium: 20px;
    --gutter-large: 30px;
    
    /* Grid */
    --grid-gap: 20px;
    --grid-columns-mobile: 1;
    --grid-columns-tablet: 2;
    --grid-columns-desktop: 3;
    --grid-columns-wide: 4;
}

/* ========== DARK MODE ========== */
html[data-theme="dark"] {
    /* System Colors - Dark Mode */
    --systemPrimary: #ffffff;
    --systemSecondary: rgba(235, 235, 245, 0.6);
    --systemTertiary: rgba(235, 235, 245, 0.3);
    --systemQuaternary: rgba(118, 118, 128, 0.24);
    --systemQuinary: rgba(118, 118, 128, 0.12);
    
    /* Background Colors */
    --pageBg: #000000;
    --cardBg: #1c1c1e;
    --navSidebarBG: #1c1c1e;
    --footerBg: #1c1c1e;
    
    /* Accent Colors */
    --keyColor: #0a84ff;
    --keyColorHover: #409cff;
    --selectionColor: rgba(10, 132, 255, 0.2);
    
    /* Label Colors */
    --label-primary: #ffffff;
    --label-inverse: #000000;
    
    /* Contrast Colors (for overlays and special buttons) */
    --contrast-bg: #ffffff;
    --contrast-text: #000000;
    
    /* Border Colors */
    --borderColor: rgba(255, 255, 255, 0.1);
    --borderColorLight: rgba(255, 255, 255, 0.04);
    --keylineBorder: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Shadow Colors */
    --shadowSmall: 0 3px 9px rgba(0, 0, 0, 0.4);
    --shadowMedium: 0 3px 20px rgba(0, 0, 0, 0.5);
    --shadowLarge: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* System preference for dark mode (when no explicit theme set) */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        /* System Colors - Dark Mode */
        --systemPrimary: #ffffff;
        --systemSecondary: rgba(235, 235, 245, 0.6);
        --systemTertiary: rgba(235, 235, 245, 0.3);
        --systemQuaternary: rgba(118, 118, 128, 0.24);
        --systemQuinary: rgba(118, 118, 128, 0.12);
        
        /* Background Colors */
        --pageBg: #000000;
        --cardBg: #1c1c1e;
        --navSidebarBG: #1c1c1e;
        --footerBg: #1c1c1e;
        
        /* Accent Colors */
        --keyColor: #0a84ff;
        --keyColorHover: #409cff;
        --selectionColor: rgba(10, 132, 255, 0.2);
        
        /* Label Colors */
        --label-primary: #ffffff;
        --label-inverse: #000000;
        
        /* Contrast Colors (for overlays and special buttons) */
        --contrast-bg: #ffffff;
        --contrast-text: #000000;
        
        /* Border Colors */
        --borderColor: rgba(255, 255, 255, 0.1);
        --borderColorLight: rgba(255, 255, 255, 0.04);
        --keylineBorder: 1px solid rgba(255, 255, 255, 0.1);
        
        /* Shadow Colors */
        --shadowSmall: 0 3px 9px rgba(0, 0, 0, 0.4);
        --shadowMedium: 0 3px 20px rgba(0, 0, 0, 0.5);
        --shadowLarge: 0 10px 40px rgba(0, 0, 0, 0.6);
    }
}

/* ========== LIGHT MODE ========== */
html[data-theme="light"] {
    /* System Colors - Light Mode */
    --systemPrimary: #000000;
    --systemSecondary: rgba(60, 60, 67, 0.6);
    --systemTertiary: rgba(60, 60, 67, 0.3);
    --systemQuaternary: rgba(116, 116, 128, 0.08);
    --systemQuinary: rgba(116, 116, 128, 0.04);
    
    /* Background Colors */
    --pageBg: #ffffff;
    --cardBg: #ffffff;
    --navSidebarBG: #f9f9f9;
    --footerBg: #f2f2f2;
    
    /* Accent Colors */
    --keyColor: #0071e3;
    --keyColorHover: #0077ed;
    --selectionColor: rgba(0, 113, 227, 0.1);
    
    /* Label Colors */
    --label-primary: #000000;
    --label-inverse: #ffffff;
    
    /* Contrast Colors (for overlays and special buttons) */
    --contrast-bg: #ffffff;
    --contrast-text: #000000;
    
    /* Border Colors */
    --borderColor: rgba(0, 0, 0, 0.1);
    --borderColorLight: rgba(0, 0, 0, 0.04);
    --keylineBorder: 1px solid rgba(0, 0, 0, 0.1);
    
    /* Shadow Colors */
    --shadowSmall: 0 3px 9px rgba(0, 0, 0, 0.08);
    --shadowMedium: 0 3px 20px rgba(0, 0, 0, 0.08);
    --shadowLarge: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* ========== RESPONSIVE TYPOGRAPHY ========== */

/* Tablet - 740px */
@media (min-width: 740px) {
    :root {
        --fs-largeTitle: 28px;
        --fs-title1: 24px;
        --fs-headline: 17px;
        --fs-body: 14px;
        --fs-callout: 13px;
    }
}

/* Desktop - 1000px */
@media (min-width: 1000px) {
    :root {
        --fs-largeTitle: 32px;
        --fs-title1: 28px;
        --fs-headline: 17px;
        --gutter-small: 40px;
        --gutter-medium: 60px;
        --grid-gap: 24px;
    }
}

/* Large Desktop - 1320px */
@media (min-width: 1320px) {
    :root {
        --fs-largeTitle: 40px;
        --fs-title1: 32px;
        --fs-headline: 21px;
    }
}

/* XL Desktop - 1680px */
@media (min-width: 1680px) {
    :root {
        --fs-largeTitle: 48px;
        --fs-title1: 36px;
        --fs-headline: 24px;
        --gutter-large: 80px;
    }
}