/* iOS Typography System - SF Pro Rounded Implementation */

/* CSS Variables for iOS Typography Scale */
:root {
    --font-sf-pro-rounded: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* iOS Font Weights */
    --weight-ultralight: 100;
    --weight-thin: 200;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-heavy: 800;
    --weight-black: 900;

    /* iOS Color System */
    --ios-label: rgba(0, 0, 0, 1);
    --ios-secondary-label: rgba(60, 60, 67, 0.6);
    --ios-tertiary-label: rgba(60, 60, 67, 0.3);
    --ios-quaternary-label: rgba(60, 60, 67, 0.18);

    /* Dark mode colors */
    /*--ios-label-dark: rgba(255, 255, 255, 1);*/
    /*--ios-secondary-label-dark: rgba(235, 235, 245, 0.6);*/
    /*--ios-tertiary-label-dark: rgba(235, 235, 245, 0.3);*/
    /*--ios-quaternary-label-dark: rgba(235, 235, 245, 0.16);*/
}

/* Base body styling */
body {
    font-family: var(--font-sf-pro-rounded);
    font-weight: var(--weight-regular);
    color: var(--ios-label);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* iOS Typography Scale - Large Titles */
.ios-large-title,
.large-title {
    font-family: var(--font-sf-pro-rounded);
    font-size: 34px;
    font-weight: var(--weight-black);
    line-height: 1.12;
    letter-spacing: 0.37px;
    color: var(--ios-label);
    margin: 0 0 8px 0;
}

/* iOS Typography Scale - Title 1 */
h1, .ios-title1, .title1 {
    font-family: var(--font-sf-pro-rounded);
    font-size: 28px;
    font-weight: var(--weight-black);
    line-height: 1.14;
    letter-spacing: 0.36px;
    color: var(--ios-label);
    margin: 0 0 6px 0;
}

/* iOS Typography Scale - Title 2 */
h2, .ios-title2, .title2 {
    font-family: var(--font-sf-pro-rounded);
    font-size: 22px;
    font-weight: var(--weight-black);
    line-height: 1.18;
    letter-spacing: 0.35px;
    color: var(--ios-label);
    margin: 0 0 4px 0;
}

/* iOS Typography Scale - Title 3 */
h3, .ios-title3, .title3 {
    font-family: var(--font-sf-pro-rounded);
    font-size: 20px;
    font-weight: var(--weight-regular);
    line-height: 1.2;
    letter-spacing: 0.38px;
    color: var(--ios-label);
    margin: 0 0 4px 0;
}

/* iOS Typography Scale - Headline */
h4, .ios-headline, .headline {
    font-family: var(--font-sf-pro-rounded);
    font-size: 17px;
    font-weight: var(--weight-black);
    line-height: 1.29;
    letter-spacing: -0.41px;
    color: var(--ios-label);
    margin: 0 0 2px 0;
}

/* iOS Typography Scale - Body */
p, .ios-body, .body, h5 {
    font-family: var(--font-sf-pro-rounded);
    font-size: 17px;
    font-weight: var(--weight-regular);
    line-height: 1.29;
    letter-spacing: -0.41px;
    color: var(--ios-label);
    margin: 0 0 16px 0;
}

/* iOS Typography Scale - Callout */
.ios-callout, .callout, h6 {
    font-family: var(--font-sf-pro-rounded);
    font-size: 16px;
    font-weight: var(--weight-regular);
    line-height: 1.31;
    letter-spacing: -0.32px;
    color: var(--ios-label);
    margin: 0 0 12px 0;
}

/* iOS Typography Scale - Subheadline */
.ios-subheadline, .subheadline {
    font-family: var(--font-sf-pro-rounded);
    font-size: 15px;
    font-weight: var(--weight-regular);
    line-height: 1.33;
    letter-spacing: -0.24px;
    color: var(--ios-label);
    margin: 0 0 8px 0;
}

/* iOS Typography Scale - Footnote */
.ios-footnote, .footnote, small {
    font-family: var(--font-sf-pro-rounded);
    font-size: 13px;
    font-weight: var(--weight-regular);
    line-height: 1.38;
    letter-spacing: -0.08px;
    color: var(--ios-secondary-label);
    margin: 0 0 8px 0;
}

/* iOS Typography Scale - Caption 1 */
.ios-caption1, .caption1 {
    font-family: var(--font-sf-pro-rounded);
    font-size: 12px;
    font-weight: var(--weight-regular);
    line-height: 1.33;
    letter-spacing: 0px;
    color: var(--ios-secondary-label);
    margin: 0 0 4px 0;
}

/* iOS Typography Scale - Caption 2 */
.ios-caption2, .caption2 {
    font-family: var(--font-sf-pro-rounded);
    font-size: 11px;
    font-weight: var(--weight-regular);
    line-height: 1.36;
    letter-spacing: 0.07px;
    color: var(--ios-secondary-label);
    margin: 0 0 4px 0;
}

/* Font Weight Modifiers */
.weight-ultralight { font-weight: var(--weight-ultralight); }
.weight-thin { font-weight: var(--weight-thin); }
.weight-light { font-weight: var(--weight-light); }
.weight-regular { font-weight: var(--weight-regular); }
.weight-medium { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }
.weight-bold { font-weight: var(--weight-bold); }
.weight-heavy { font-weight: var(--weight-heavy); }
.weight-black { font-weight: var(--weight-black); }

/* iOS Color Hierarchy */
.label-primary { color: var(--ios-label); }
.label-secondary { color: var(--ios-secondary-label); }
.label-tertiary { color: var(--ios-tertiary-label); }
.label-quaternary { color: var(--ios-quaternary-label); }

/* Emphasized text (for important content) */
.ios-emphasized,
.emphasized {
    font-weight: var(--weight-semibold);
}

/* Lists styling following iOS guidelines */
ul, ol {
    font-family: var(--font-sf-pro-rounded);
    font-size: 17px;
    font-weight: var(--weight-regular);
    line-height: 1.29;
    letter-spacing: -0.41px;
    color: var(--ios-label);
    margin: 0 0 16px 0;
    padding-left: 20px;
}

li {
    margin-bottom: 4px;
}

/* Navigation and Tab Bar text */
.ios-tab-bar-text {
    font-family: var(--font-sf-pro-rounded);
    font-size: 10px;
    font-weight: var(--weight-medium);
    line-height: 1.2;
    letter-spacing: 0.12px;
    text-align: center;
}

.ios-nav-title {
    font-family: var(--font-sf-pro-rounded);
    font-size: 17px;
    font-weight: var(--weight-semibold);
    line-height: 1.29;
    letter-spacing: -0.41px;
}

/* Button text */
.ios-button-text {
    font-family: var(--font-sf-pro-rounded);
    font-size: 17px;
    font-weight: var(--weight-regular);
    line-height: 1.29;
    letter-spacing: -0.41px;
}

.ios-button-text.prominent {
    font-weight: var(--weight-semibold);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --ios-label: var(--ios-label-dark);
        --ios-secondary-label: var(--ios-secondary-label-dark);
        --ios-tertiary-label: var(--ios-tertiary-label-dark);
        --ios-quaternary-label: var(--ios-quaternary-label-dark);
    }

    body {
        background-color: #000000;
        color: var(--ios-label-dark);
    }
}

/* Responsive adjustments for larger screens */
@media (min-width: 768px) {
    .ios-large-title, .large-title {
        font-size: 40px;
        line-height: 1.1;
    }

    h1, .ios-title1, .title1 {
        font-size: 32px;
        line-height: 1.125;
    }

    h2, .ios-title2, .title2 {
        font-size: 24px;
        line-height: 1.17;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    :root {
        --ios-secondary-label: rgba(60, 60, 67, 0.8);
        --ios-tertiary-label: rgba(60, 60, 67, 0.6);
    }
}