/* Apple System Colors CSS Framework */

/* Apple System Colors CSS Variables */
:root {
    /* Light Mode - Apple System Colors */
    --apple-system-blue: #007AFF;
    --apple-system-green: #34C759;
    --apple-system-red: #FF3B30;
    --apple-system-orange: #FF9500;
    --apple-system-yellow: #FFCC00;
    --apple-system-purple: #AF52DE;
    --apple-system-teal: #5AC8FA;
    --apple-system-gray: #8E8E93;
    
    /* Apple Text Colors */
    --apple-label: #000000;
    --apple-secondary-label: #3C3C4399;
    --apple-tertiary-label: #3C3C434C;
    --apple-quaternary-label: #3C3C432D;
    
    /* Apple Background Colors */
    --apple-system-background: #FFFFFF;
    --apple-secondary-background: #F2F2F7;
    --apple-tertiary-background: #FFFFFF;
    --apple-grouped-background: #EFEFF4;
    --apple-separator: #C6C6C8;
    --apple-fill: #78788029;
}

/* Dark Mode - Apple System Colors */
@media (prefers-color-scheme: dark) {
    :root {
        /* Apple Text Colors - Dark Mode */
        --apple-label: #FFFFFF;
        --apple-secondary-label: #EBEBF599;
        --apple-tertiary-label: #EBEBF54C;
        --apple-quaternary-label: #EBEBF52D;
        
        /* Apple Background Colors - Dark Mode */
        --apple-system-background: #000000;
        --apple-secondary-background: #1C1C1E;
        --apple-tertiary-background: #2C2C2E;
        --apple-grouped-background: #000000;
        --apple-separator: #38383A;
        --apple-fill: #78788029;
    }
}

/* Apple-style Utility Classes */

/* Background Colors */
.apple-bg-primary {
    background-color: var(--apple-system-background);
}

.apple-bg-secondary {
    background-color: var(--apple-secondary-background);
}

.apple-bg-tertiary {
    background-color: var(--apple-tertiary-background);
}

.apple-bg-grouped {
    background-color: var(--apple-grouped-background);
}

/* Text Colors */
.apple-text-primary {
    color: var(--apple-label);
}

.apple-text-secondary {
    color: var(--apple-secondary-label);
}

.apple-text-tertiary {
    color: var(--apple-tertiary-label);
}

.apple-text-quaternary {
    color: var(--apple-quaternary-label);
}

/* System Colors */
.apple-blue {
    color: var(--apple-system-blue);
}

.apple-green {
    color: var(--apple-system-green);
}

.apple-red {
    color: var(--apple-system-red);
}

.apple-orange {
    color: var(--apple-system-orange);
}

.apple-yellow {
    color: var(--apple-system-yellow);
}

.apple-purple {
    color: var(--apple-system-purple);
}

.apple-teal {
    color: var(--apple-system-teal);
}

.apple-gray {
    color: var(--apple-system-gray);
}

/* Background System Colors */
.apple-bg-blue {
    background-color: var(--apple-system-blue);
}

.apple-bg-green {
    background-color: var(--apple-system-green);
}

.apple-bg-red {
    background-color: var(--apple-system-red);
}

.apple-bg-orange {
    background-color: var(--apple-system-orange);
}

.apple-bg-yellow {
    background-color: var(--apple-system-yellow);
}

.apple-bg-purple {
    background-color: var(--apple-system-purple);
}

.apple-bg-teal {
    background-color: var(--apple-system-teal);
}

.apple-bg-gray {
    background-color: var(--apple-system-gray);
}

/* Apple-style Components */

/* Buttons */
.apple-btn {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.apple-btn-primary {
    background-color: var(--apple-system-blue);
    color: white;
}

.apple-btn-primary:hover {
    background-color: #0056CC;
}

.apple-btn-secondary {
    background-color: transparent;
    color: var(--apple-system-blue);
    border: 1px solid var(--apple-system-blue);
}

.apple-btn-secondary:hover {
    background-color: rgba(0, 122, 255, 0.1);
}

.apple-btn-success {
    background-color: var(--apple-system-green);
    color: white;
}

.apple-btn-success:hover {
    background-color: #28A745;
}

.apple-btn-warning {
    background-color: var(--apple-system-orange);
    color: white;
}

.apple-btn-warning:hover {
    background-color: #E6850E;
}

.apple-btn-danger {
    background-color: var(--apple-system-red);
    color: white;
}

.apple-btn-danger:hover {
    background-color: #DC2626;
}

/* Cards */
.apple-card {
    background-color: var(--apple-system-background);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--apple-separator);
}

/* Alerts */
.apple-alert {
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid;
    margin: 8px 0;
}

.apple-alert-info {
    background-color: rgba(0, 122, 255, 0.1);
    border-left-color: var(--apple-system-blue);
    color: var(--apple-label);
}

.apple-alert-success {
    background-color: rgba(52, 199, 89, 0.1);
    border-left-color: var(--apple-system-green);
    color: var(--apple-label);
}

.apple-alert-warning {
    background-color: rgba(255, 204, 0, 0.1);
    border-left-color: var(--apple-system-yellow);
    color: var(--apple-label);
}

.apple-alert-danger {
    background-color: rgba(255, 59, 48, 0.1);
    border-left-color: var(--apple-system-red);
    color: var(--apple-label);
}

/* Progress Bars */
.apple-progress {
    width: 100%;
    height: 4px;
    background-color: var(--apple-separator);
    border-radius: 2px;
    overflow: hidden;
}

.apple-progress-bar {
    height: 100%;
    background-color: var(--apple-system-blue);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Separators */
.apple-separator {
    height: 1px;
    background-color: var(--apple-separator);
    margin: 16px 0;
}

/* Typography */
.apple-title {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    font-weight: 700;
    color: var(--apple-label);
}

.apple-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    font-weight: 600;
    color: var(--apple-secondary-label);
}

.apple-body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    font-weight: 400;
    color: var(--apple-label);
}

.apple-caption {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    font-weight: 400;
    color: var(--apple-secondary-label);
    font-size: 0.875rem;
}