/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY — Font faces and type scale
   ═══════════════════════════════════════════════════════════════════
   Purpose: Define all typography-related styles including
   font-face declarations, heading styles, and text utilities.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   FONT-FACE DECLARATIONS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Plus Jakarta Sans ── */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: local('Plus Jakarta Sans'),
        url('../../assets/fonts/plus-jakarta-sans/PlusJakartaSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: local('Plus Jakarta Sans'),
        url('../../assets/fonts/plus-jakarta-sans/PlusJakartaSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: local('Plus Jakarta Sans'),
        url('../../assets/fonts/plus-jakarta-sans/PlusJakartaSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: local('Plus Jakarta Sans'),
        url('../../assets/fonts/plus-jakarta-sans/PlusJakartaSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: local('Plus Jakarta Sans'),
        url('../../assets/fonts/plus-jakarta-sans/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

/* ── Playfair Display ── */
@font-face {
    font-family: 'Playfair Display';
    src: local('Playfair Display'),
        url('../../assets/fonts/playfair-display/PlayfairDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: local('Playfair Display'),
        url('../../assets/fonts/playfair-display/PlayfairDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: local('Playfair Display'),
        url('../../assets/fonts/playfair-display/PlayfairDisplay-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: local('Playfair Display'),
        url('../../assets/fonts/playfair-display/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* ── DM Sans ── */
@font-face {
    font-family: 'DM Sans';
    src: local('DM Sans'),
        url('../../assets/fonts/dm-sans/DMSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: local('DM Sans'),
        url('../../assets/fonts/dm-sans/DMSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: local('DM Sans'),
        url('../../assets/fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════════
   BODY & BASE
   ═══════════════════════════════════════════════════════════════════ */

body {
    font-family: 'DM Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-body, #2c241e);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════════════
   HEADINGS
   ═══════════════════════════════════════════════════════════════════ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', 'Syne', Georgia, serif;
    font-weight: 700;
    color: var(--text-dark, #1e1713);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

h1 {
    font-size: 2.25rem;
    letter-spacing: -0.025em;
}

h2 {
    font-size: 1.75rem;
    letter-spacing: -0.02em;
}

h3 {
    font-size: 1.5rem;
    letter-spacing: -0.015em;
}

h4 {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

h5 {
    font-size: 1.125rem;
    letter-spacing: -0.005em;
}

h6 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   PARAGRAPHS
   ═══════════════════════════════════════════════════════════════════ */

p {
    margin-bottom: 1rem;
}

p:last-child {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   LINKS
   ═══════════════════════════════════════════════════════════════════ */

a {
    color: var(--role-secondary, #7a5a7a);
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

a:hover {
    color: var(--role-primary, #2d1f3a);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--role-primary, #2d1f3a);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   CODE & MONOSPACE
   ═══════════════════════════════════════════════════════════════════ */

code,
.code,
kbd,
samp {
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.9em;
    background: rgba(30, 23, 19, 0.05);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    color: var(--text-dark, #1e1713);
}

[data-theme="dark"] code,
[data-theme="dark"] .code {
    background: rgba(240, 235, 230, 0.08);
    color: var(--text-body, #d4ccc6);
}

pre {
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 0.875rem;
    background: rgba(30, 23, 19, 0.04);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid rgba(30, 23, 19, 0.06);
}

[data-theme="dark"] pre {
    background: rgba(240, 235, 230, 0.04);
    border-color: rgba(240, 235, 230, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════
   BLOCKQUOTE
   ═══════════════════════════════════════════════════════════════════ */

blockquote {
    border-left: 3px solid var(--role-secondary, #7a5a7a);
    padding-left: 1.25rem;
    margin: 1.25rem 0;
    color: var(--text-soft, #6b5f56);
    font-style: italic;
}

[data-theme="dark"] blockquote {
    border-left-color: var(--role-secondary, #9a7a9a);
    color: var(--text-soft, #9a8e86);
}

/* ═══════════════════════════════════════════════════════════════════
   SMALL & MUTED
   ═══════════════════════════════════════════════════════════════════ */

small,
.text-sm {
    font-size: 0.875rem;
}

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

.text-soft {
    color: var(--text-soft, #6b5f56);
}

/* ═══════════════════════════════════════════════════════════════════
   TEXT ALIGNMENT
   ═══════════════════════════════════════════════════════════════════ */

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

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

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

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

/* ═══════════════════════════════════════════════════════════════════
   TEXT SIZES
   ═══════════════════════════════════════════════════════════════════ */

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   TEXT WEIGHTS
   ═══════════════════════════════════════════════════════════════════ */

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.font-black {
    font-weight: 900;
}

/* ═══════════════════════════════════════════════════════════════════
   TEXT COLORS
   ═══════════════════════════════════════════════════════════════════ */

.text-primary {
    color: var(--text-primary, #2c241e);
}

.text-secondary {
    color: var(--text-secondary, #6b5f56);
}

.text-soft {
    color: var(--text-soft, #6b5f56);
}

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

.text-success {
    color: var(--success, #3a7a5a);
}

.text-warning {
    color: var(--warning, #b8983a);
}

.text-danger {
    color: var(--danger, #c45a4a);
}

.text-info {
    color: var(--info, #4a7a8a);
}

.text-role {
    color: var(--role-primary, #2d1f3a);
}

.text-role-secondary {
    color: var(--role-secondary, #7a5a7a);
}

.text-inverse {
    color: var(--text-inverse, #f5f0eb);
}

/* ═══════════════════════════════════════════════════════════════════
   TEXT TRANSFORMS
   ═══════════════════════════════════════════════════════════════════ */

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

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

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

.text-normal-case {
    text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════════
   TEXT DECORATION
   ═══════════════════════════════════════════════════════════════════ */

.text-underline {
    text-decoration: underline;
}

.text-line-through {
    text-decoration: line-through;
}

.text-no-underline {
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════
   LINE CLAMP & TRUNCATION
   ═══════════════════════════════════════════════════════════════════ */

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
}

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

/* ═══════════════════════════════════════════════════════════════════
   WORD BREAK & WHITE SPACE
   ═══════════════════════════════════════════════════════════════════ */

.break-normal {
    word-break: normal;
    overflow-wrap: normal;
}

.break-words {
    word-break: break-word;
    overflow-wrap: break-word;
}

.break-all {
    word-break: break-all;
}

.whitespace-normal {
    white-space: normal;
}

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

.whitespace-pre {
    white-space: pre;
}

.whitespace-pre-line {
    white-space: pre-line;
}

.whitespace-pre-wrap {
    white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════════════════════════
   ADDITIONAL HELPERS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Leading (line-height) ── */
.leading-none {
    line-height: 1;
}

.leading-tight {
    line-height: 1.25;
}

.leading-snug {
    line-height: 1.375;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.625;
}

.leading-loose {
    line-height: 2;
}

/* ── Tracking (letter-spacing) ── */
.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;
}

/* ── Font smoothing overrides ── */
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.subpixel-antialiased {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}