/**
 * Wavii Yachts - Premium Typography System
 * Editorial, consistent, and refined text styling
 */

/* ============================================
   TYPOGRAPHY VARIABLES
   ============================================ */
:root {
    /* Type Scale */
    --text-xs: 0.75rem;
    /* 12px - Meta text */
    --text-sm: 0.8125rem;
    /* 13px - Secondary text */
    --text-base: 1rem;
    /* 16px - Body text */
    --text-lg: 1.125rem;
    /* 18px - Large body */
    --text-xl: 1.25rem;
    /* 20px - H3 */
    --text-2xl: 1.375rem;
    /* 22px - H3 */
    --text-3xl: 1.75rem;
    /* 28px - H2 */
    --text-4xl: 2.125rem;
    /* 34px - H2 */
    --text-5xl: 2.75rem;
    /* 44px - H1 */
    --text-6xl: 3.5rem;
    /* 56px - H1 */

    /* Line Heights */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* Letter Spacing */
    --tracking-tighter: -0.02em;
    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.12em;

    /* Font Weights */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Text Colors */
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-white: #ffffff;
}

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */
body {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    font-weight: var(--font-regular);
    color: var(--text-primary);
    letter-spacing: var(--tracking-normal);
}

/* ============================================
   HEADINGS HIERARCHY
   ============================================ */

/* H1 - Hero Headlines */
h1,
.h1,
.hero-title {
    font-size: clamp(var(--text-5xl), 5vw, var(--text-6xl));
    line-height: var(--leading-tight);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tighter);
    margin-bottom: 1.5rem;
}

/* H2 - Section Headings */
h2,
.h2,
.section-title {
    font-size: clamp(var(--text-3xl), 3vw, var(--text-4xl));
    line-height: var(--leading-snug);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 1.25rem;
}

/* H3 - Card Titles, Subsections */
h3,
.h3,
.cruise-title,
.card-title {
    font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
    line-height: 1.3;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-normal);
    margin-bottom: 0.75rem;
}

/* H4 - Minor Headings */
h4,
.h4 {
    font-size: var(--text-lg);
    line-height: 1.4;
    font-weight: var(--font-semibold);
    margin-bottom: 0.5rem;
}

/* ============================================
   BODY TEXT
   ============================================ */
p,
.body-text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    font-weight: var(--font-regular);
    margin-bottom: 1.25rem;
    max-width: 72ch;
    /* Optimal line length */
}

.body-text-large,
.lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

/* ============================================
   META / SECONDARY TEXT
   ============================================ */
.meta-text,
.meta-item,
.cruise-meta,
.secondary-text {
    font-size: var(--text-xs);
    line-height: 1.5;
    font-weight: var(--font-regular);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Meta Line with Bullets */
.meta-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.meta-line>*:not(:last-child)::after {
    content: "•";
    margin-left: 0.5rem;
    color: var(--text-muted);
}

/* ============================================
   LABELS & FORM TEXT
   ============================================ */
label,
.form-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: capitalize;
    /* Sentence case */
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: block;
}

.form-section-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.helper-text,
.form-helper {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* ============================================
   PRICING TYPOGRAPHY
   ============================================ */
.price-amount,
.pricing-current {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--primary-wave-blue);
}

.price-label {
    font-size: var(--text-xs);
    font-weight: var(--font-regular);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.25rem;
}

.price-original,
.pricing-strikethrough {
    font-size: var(--text-base);
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.6;
    margin-left: 0.5rem;
}

.discount-badge {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    background: rgba(0, 107, 160, 0.1);
    color: var(--primary-wave-blue);
    border-radius: 4px;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: var(--primary-wave-blue);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* ============================================
   LISTS
   ============================================ */
ul,
ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
    line-height: var(--leading-relaxed);
}

/* ============================================
   EMPHASIS & FORMATTING
   ============================================ */
strong,
b {
    font-weight: var(--font-semibold);
}

em,
i {
    font-style: italic;
}

/* Em dashes - standardized */
.em-dash::before {
    content: " — ";
}

/* ============================================
   SPECIAL TEXT STYLES
   ============================================ */

/* Eyebrow Labels */
.eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.75rem;
}

/* Important Information Blocks */
.info-block-item strong,
.info-category {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.info-block-item {
    margin-bottom: 0.75rem;
    line-height: var(--leading-relaxed);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    :root {
        --text-5xl: 2.25rem;
        /* 36px */
        --text-6xl: 2.75rem;
        /* 44px */
        --text-3xl: 1.5rem;
        /* 24px */
        --text-4xl: 1.75rem;
        /* 28px */
    }

    p,
    .body-text {
        max-width: 100%;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.font-regular {
    font-weight: var(--font-regular);
}

.font-medium {
    font-weight: var(--font-medium);
}

.font-semibold {
    font-weight: var(--font-semibold);
}

.font-bold {
    font-weight: var(--font-bold);
}

.text-primary {
    color: var(--text-primary);
}

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

.text-muted {
    color: var(--text-muted);
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.lowercase {
    text-transform: lowercase;
}

.tracking-wide {
    letter-spacing: var(--tracking-wide);
}

.tracking-wider {
    letter-spacing: var(--tracking-wider);
}

/* Paragraph spacing */
.prose p+p {
    margin-top: 1.25rem;
}

.prose h2+p,
.prose h3+p {
    margin-top: 1rem;
}