/* Typography System */
/* Elegant, high-end typography for luxury aesthetics */

/* ===== HTML Font Display ===== */
html {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
}

/* ===== Heading Styles ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
}

h1 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

h2 {
    font-size: var(--font-size-4xl);
    line-height: 1.15;
}

h3 {
    font-size: var(--font-size-3xl);
    line-height: 1.2;
}

h4 {
    font-size: var(--font-size-2xl);
    line-height: 1.25;
}

h5 {
    font-size: var(--font-size-xl);
    line-height: 1.3;
}

h6 {
    font-size: var(--font-size-lg);
    line-height: 1.4;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
}

/* ===== Body Text Styles ===== */
p {
    font-family: var(--font-sans);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    font-weight: var(--font-weight-regular);
}

/* ===== Small Text ===== */
small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-tertiary);
}

/* ===== Link Styles ===== */
a {
    font-family: inherit;
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast) ease;
}

a:hover {
    color: var(--color-accent-dark);
}

/* ===== Strong/Bold Text ===== */
strong, b {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* ===== Emphasized/Italic Text ===== */
em, i {
    font-style: italic;
    font-family: var(--font-serif);
}

/* ===== Blockquote ===== */
blockquote {
    font-family: var(--font-serif);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    padding: var(--space-lg);
    border-left: 3px solid var(--color-accent);
    margin: var(--space-xl) 0;
    font-style: italic;
}

blockquote p {
    margin-bottom: 0;
}

/* ===== Code Styles ===== */
code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-background-alt);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

pre {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    background: var(--color-background-alt);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    line-height: var(--line-height-normal);
}

pre code {
    background: none;
    padding: 0;
}

/* ===== Lists ===== */
ul, ol {
    font-family: var(--font-sans);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

ul li {
    list-style-type: disc;
    margin-bottom: var(--space-sm);
}

ol li {
    list-style-type: decimal;
    margin-bottom: var(--space-sm);
}

/* ===== Definition Lists ===== */
dl {
    margin-bottom: var(--space-md);
}

dt {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

dd {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

/* ===== Abbreviation ===== */
abbr[title] {
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: help;
}

/* ===== Mark/Highlight ===== */
mark {
    background: var(--color-accent);
    color: var(--color-background);
    padding: 2px 4px;
}

/* ===== Del/Delete ===== */
del {
    text-decoration: line-through;
    color: var(--color-text-tertiary);
}

/* ===== Insert ===== */
ins {
    text-decoration: underline;
    color: var(--color-text-primary);
}

/* ===== Subscript/Superscript ===== */
sub, sup {
    font-size: var(--font-size-sm);
    line-height: 0;
    vertical-align: baseline;
    position: relative;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* ===== Text Utilities ===== */
.text-center {
    text-align: center;
}

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

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

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

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-nowrap {
    white-space: nowrap;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Font Weight Utilities ===== */
.font-light {
    font-weight: var(--font-weight-light);
}

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

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

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

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

/* ===== Font Family Utilities ===== */
.font-serif {
    font-family: var(--font-serif);
}

.font-sans {
    font-family: var(--font-sans);
}

.font-mono {
    font-family: var(--font-mono);
}

/* ===== Text Color Utilities ===== */
.text-primary {
    color: var(--color-text-primary);
}

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

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

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

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

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

/* ===== Font Size Utilities ===== */
.text-xs {
    font-size: var(--font-size-xs);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-base {
    font-size: var(--font-size-base);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-2xl {
    font-size: var(--font-size-2xl);
}

.text-3xl {
    font-size: var(--font-size-3xl);
}

.text-4xl {
    font-size: var(--font-size-4xl);
}

.text-5xl {
    font-size: var(--font-size-5xl);
}

.text-6xl {
    font-size: var(--font-size-6xl);
}

/* ===== Line Height Utilities ===== */
.leading-tight {
    line-height: var(--line-height-tight);
}

.leading-snug {
    line-height: var(--line-height-snug);
}

.leading-normal {
    line-height: var(--line-height-normal);
}

.leading-relaxed {
    line-height: var(--line-height-relaxed);
}

.leading-loose {
    line-height: var(--line-height-loose);
}

/* ===== Letter Spacing Utilities ===== */
.tracking-tighter {
    letter-spacing: -0.05em;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-normal {
    letter-spacing: 0;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

/* ===== Heading Display ===== */
.display-1 {
    font-family: var(--font-serif);
    font-size: clamp(48px, 8vw, 96px);
    font-weight: var(--font-weight-semibold);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
}

.display-2 {
    font-family: var(--font-serif);
    font-size: clamp(40px, 6vw, 72px);
    font-weight: var(--font-weight-medium);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.display-3 {
    font-family: var(--font-serif);
    font-size: clamp(32px, 5vw, 56px);
    font-weight: var(--font-weight-regular);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

/* ===== Section Label ===== */
.section-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-sm);
}

/* ===== Responsive Typography ===== */
@media (max-width: 1024px) {
    h1 {
        font-size: clamp(36px, 5vw, 48px);
    }

    h2 {
        font-size: clamp(32px, 4vw, 40px);
    }

    h3 {
        font-size: clamp(28px, 3vw, 32px);
    }

    h4 {
        font-size: clamp(24px, 2.5vw, 28px);
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: clamp(28px, 8vw, 36px);
        line-height: 1.2;
    }

    h2 {
        font-size: clamp(24px, 6vw, 32px);
        line-height: 1.25;
    }

    h3 {
        font-size: clamp(20px, 5vw, 28px);
        line-height: 1.3;
    }

    p {
        font-size: var(--font-size-base);
        line-height: var(--line-height-relaxed);
    }
}