/* 
 * Responsive Font System for ONEHAE Design Studio
 * Device-specific font scaling for optimal readability
 */

/* Base Typography with Responsive Scaling */
html {
    /* Base font size - scales down on smaller devices */
    font-size: clamp(13px, 4vw, 16px);
}

/* Device-Specific Font Scaling */

/* Ultra Small Devices (iPhone SE 320px and smaller) */
@media screen and (max-width: 320px) {
    html { font-size: 12px; }
    
    .hero-title { font-size: clamp(1.8rem, 8vw, 2.2rem); }
    .section-title { font-size: clamp(1.2rem, 6vw, 1.4rem); }
    .card-title { font-size: clamp(0.8rem, 4vw, 0.9rem); }
    .text-small { font-size: clamp(0.6rem, 3vw, 0.7rem); }
    .text-regular { font-size: clamp(0.75rem, 3.5vw, 0.85rem); }
}

/* Small Devices (iPhone SE, iPhone Mini 321px-375px) */
@media screen and (min-width: 321px) and (max-width: 375px) {
    html { font-size: 13px; }
    
    .hero-title { font-size: clamp(2rem, 7vw, 2.4rem); }
    .section-title { font-size: clamp(1.3rem, 5.5vw, 1.5rem); }
    .card-title { font-size: clamp(0.85rem, 4.2vw, 0.95rem); }
    .text-small { font-size: clamp(0.65rem, 3.2vw, 0.75rem); }
    .text-regular { font-size: clamp(0.8rem, 3.8vw, 0.9rem); }
}

/* Standard Small Devices (iPhone 376px-414px) */
@media screen and (min-width: 376px) and (max-width: 414px) {
    html { font-size: 14px; }
    
    .hero-title { font-size: clamp(2.2rem, 6.5vw, 2.6rem); }
    .section-title { font-size: clamp(1.4rem, 5vw, 1.6rem); }
    .card-title { font-size: clamp(0.9rem, 4vw, 1rem); }
    .text-small { font-size: clamp(0.7rem, 3.3vw, 0.8rem); }
    .text-regular { font-size: clamp(0.85rem, 3.6vw, 0.95rem); }
}

/* Large Small Devices (iPhone Plus 415px-480px) */
@media screen and (min-width: 415px) and (max-width: 480px) {
    html { font-size: 14.5px; }
    
    .hero-title { font-size: clamp(2.4rem, 6vw, 2.8rem); }
    .section-title { font-size: clamp(1.5rem, 4.8vw, 1.7rem); }
    .card-title { font-size: clamp(0.95rem, 3.8vw, 1.05rem); }
    .text-small { font-size: clamp(0.75rem, 3.1vw, 0.85rem); }
    .text-regular { font-size: clamp(0.9rem, 3.4vw, 1rem); }
}

/* Small Tablets (481px-768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    html { font-size: 15px; }
    
    .hero-title { font-size: clamp(2.6rem, 5.5vw, 3rem); }
    .section-title { font-size: clamp(1.6rem, 4.5vw, 1.8rem); }
    .card-title { font-size: clamp(1rem, 3.5vw, 1.1rem); }
    .text-small { font-size: clamp(0.8rem, 2.8vw, 0.9rem); }
    .text-regular { font-size: clamp(0.95rem, 3.2vw, 1.05rem); }
}

/* Large Tablets (769px-1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    html { font-size: 16px; }
    
    .hero-title { font-size: clamp(3rem, 5vw, 3.5rem); }
    .section-title { font-size: clamp(1.8rem, 4vw, 2rem); }
    .card-title { font-size: clamp(1.1rem, 3vw, 1.2rem); }
    .text-small { font-size: clamp(0.9rem, 2.5vw, 1rem); }
    .text-regular { font-size: clamp(1rem, 2.8vw, 1.1rem); }
}

/* Desktop (1025px+) */
@media screen and (min-width: 1025px) {
    html { font-size: 16px; }
    
    .hero-title { font-size: 3.5rem; }
    .section-title { font-size: 2rem; }
    .card-title { font-size: 1.2rem; }
    .text-small { font-size: 1rem; }
    .text-regular { font-size: 1.1rem; }
}

/* Responsive Text Classes */
.text-xs { font-size: clamp(0.6rem, 2.5vw, 0.75rem); }
.text-sm { font-size: clamp(0.7rem, 3vw, 0.875rem); }
.text-base { font-size: clamp(0.8rem, 3.5vw, 1rem); }
.text-lg { font-size: clamp(0.9rem, 4vw, 1.125rem); }
.text-xl { font-size: clamp(1rem, 4.5vw, 1.25rem); }
.text-2xl { font-size: clamp(1.2rem, 5vw, 1.5rem); }
.text-3xl { font-size: clamp(1.4rem, 6vw, 1.875rem); }
.text-4xl { font-size: clamp(1.6rem, 7vw, 2.25rem); }
.text-5xl { font-size: clamp(2rem, 8vw, 3rem); }

/* Card and UI Element Specific Scaling */
.card-text {
    font-size: clamp(0.75rem, 3.2vw, 0.9rem);
    line-height: 1.4;
}

.button-text {
    font-size: clamp(0.8rem, 3.5vw, 0.95rem);
    font-weight: 500;
}

.price-text {
    font-size: clamp(0.9rem, 4vw, 1.1rem);
    font-weight: 600;
}

.title-text {
    font-size: clamp(0.85rem, 3.8vw, 1rem);
    font-weight: 500;
    line-height: 1.3;
}

/* Viewport-based Typography with Fallbacks */
.responsive-title {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    line-height: 1.2;
    font-weight: 600;
}

.responsive-subtitle {
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    line-height: 1.4;
    font-weight: 400;
}

.responsive-body {
    font-size: clamp(0.8rem, 3vw, 1rem);
    line-height: 1.6;
}

.responsive-caption {
    font-size: clamp(0.7rem, 2.5vw, 0.875rem);
    line-height: 1.4;
}

/* Special handling for Korean text */
@supports (font-feature-settings: "kern" 1) {
    body {
        font-feature-settings: "kern" 1;
        text-rendering: optimizeLegibility;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}