/**
 * Premium Typography System
 * Relicform Studios - Mobile Enhancement (TASK-018)
 */

/* ========================================
   Font Feature Settings
   ======================================== */

/* Apply premium font features globally */
body {
    font-feature-settings:
        "kern" 1,           /* Kerning */
        "liga" 1,           /* Standard ligatures */
        "calt" 1;           /* Contextual alternates */
    text-rendering: optimizeLegibility;
}

/* Display/Heading Typography */
h1, h2, h3, h4, h5, h6,
.heading,
.product-card__title,
.page-title {
    font-feature-settings:
        "kern" 1,
        "liga" 1,
        "lnum" 1;           /* Lining numerals for headings */
}

/* ========================================
   Mobile Heading Hierarchy
   ======================================== */

/* Mobile-first headings with responsive scaling */
h1, .h1 {
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

h2, .h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
}

h3, .h3 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 600;
    line-height: 1.25;
}

h4, .h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    font-weight: 500;
    line-height: 1.3;
}

/* ========================================
   Enhanced Button Typography
   ======================================== */

.btn {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}

/* Primary button with luxury gradient */
.btn-primary,
.btn--primary {
    background: linear-gradient(135deg, var(--color-accent, #d4af37) 0%, #e8c252 50%, var(--color-accent, #d4af37) 100%);
    background-size: 200% 200%;
    color: var(--color-bg-primary, #04060b);
    border: none;
    box-shadow:
        0 2px 8px rgba(212, 175, 55, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover,
.btn--primary:hover {
    background-position: 100% 100%;
    box-shadow:
        0 4px 16px rgba(212, 175, 55, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.btn-primary:active,
.btn--primary:active {
    transform: translateY(0);
    box-shadow:
        0 2px 4px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Secondary button */
.btn-secondary,
.btn--secondary {
    background: transparent;
    color: var(--color-accent, #d4af37);
    border: 1px solid var(--color-accent, #d4af37);
    box-shadow: 0 0 0 transparent;
    transition: all 0.3s ease;
}

.btn-secondary:hover,
.btn--secondary:hover {
    background: rgba(212, 175, 55, 0.08);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
}

/* ========================================
   Product Card Typography
   ======================================== */

.product-card__title,
.product-card-title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.3;
    margin-bottom: 0.5rem;

    /* Premium text clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__price,
.product-card-price {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-accent, #d4af37);
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.01em;
}

.product-card__category,
.product-card-category {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary, #9ca3b0);
    margin-bottom: 0.25rem;
}

/* ========================================
   Price Typography
   ======================================== */

.price,
[class*="price"] {
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.price-currency {
    font-size: 0.75em;
    vertical-align: super;
    margin-right: 0.05em;
    opacity: 0.8;
}

.price-original {
    text-decoration: line-through;
    opacity: 0.5;
    font-size: 0.875em;
}

/* ========================================
   Premium Label
   ======================================== */

.premium-label,
.badge,
.stock-badge {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ========================================
   Body Text Refinements
   ======================================== */

p {
    line-height: 1.7;
}

/* Improve readability on mobile */
@media (max-width: 767px) {
    body {
        font-size: 16px; /* Prevent zoom on iOS */
        line-height: 1.65;
    }

    p {
        line-height: 1.75;
    }

    /* Slightly larger touch-friendly text */
    .product-card__title,
    .product-card-title {
        font-size: 1rem;
    }

    .product-card__price,
    .product-card-price {
        font-size: 1.125rem;
    }
}

/* ========================================
   Consistent Spacing System
   ======================================== */

:root {
    /* Spacing Scale (complementing existing vars) */
    --space-unit: 0.25rem;
    --space-1: calc(var(--space-unit) * 1);   /* 4px */
    --space-2: calc(var(--space-unit) * 2);   /* 8px */
    --space-3: calc(var(--space-unit) * 3);   /* 12px */
    --space-4: calc(var(--space-unit) * 4);   /* 16px */
    --space-5: calc(var(--space-unit) * 5);   /* 20px */
    --space-6: calc(var(--space-unit) * 6);   /* 24px */
    --space-8: calc(var(--space-unit) * 8);   /* 32px */
    --space-10: calc(var(--space-unit) * 10); /* 40px */
    --space-12: calc(var(--space-unit) * 12); /* 48px */
    --space-16: calc(var(--space-unit) * 16); /* 64px */
}

/* ========================================
   Section Spacing
   ======================================== */

.section,
section {
    padding-top: var(--space-3xl, 4.5rem);
    padding-bottom: var(--space-3xl, 4.5rem);
}

@media (max-width: 767px) {
    .section,
    section {
        padding-top: var(--space-2xl, 3rem);
        padding-bottom: var(--space-2xl, 3rem);
    }
}

/* ========================================
   Consolidated Breakpoint Guidelines
   ======================================== */
/*
 * Standard breakpoints (consolidating from 8+ to 4):
 * - Mobile: < 480px (small phones)
 * - Mobile Large: 480px - 767px (large phones, small tablets)
 * - Tablet: 768px - 1023px
 * - Desktop: 1024px+
 *
 * DEPRECATE: 375px, 425px, 576px, 640px, 992px, 1200px
 * Use primarily: 480px, 768px, 1024px
 */

/* Example of consolidated responsive typography */
@media (min-width: 480px) {
    /* Mobile large adjustments */
    .product-card__title,
    .product-card-title {
        font-size: 1.0625rem;
    }
}

@media (min-width: 768px) {
    /* Tablet adjustments */
    .product-card__title,
    .product-card-title {
        font-size: 1.125rem;
    }

    .product-card__price,
    .product-card-price {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    /* Desktop adjustments */
    .product-card__title,
    .product-card-title {
        font-size: 1.1875rem;
    }
}