/**
 * Typography System – Jony Ive-inspired
 *
 * Philosophy:
 * - The reading surface is first-class; UI chrome recedes
 * - Inter for UI (crisp, precise, never ornamental)
 * - Source Serif 4 for prose (humane, optically sized)
 * - JetBrains Mono for code (first-class, not tolerated)
 * - Respects system fonts on Apple devices (SF, New York)
 * - Universal intent via Google Fonts
 */

/* ========================================
   FONT LOADING
   ======================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Inter-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Inter-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Inter-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Inter-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/JetBrainsMono-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/JetBrainsMono-Medium.ttf') format('truetype');
}

/* ========================================
   CSS VARIABLES – LIGHT MODE
   ======================================== */

:root {
    /* Font Stacks */
    --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-reader: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-code: 'SF Mono', 'JetBrains Mono', 'Menlo', 'Consolas', 'Courier New', monospace;

    /* UI Typography Scale */
    --text-ui-xs: 11px;
    /* Smallest labels, captions */
    --text-ui-sm: 13px;
    /* Labels, timestamps, controls */
    --text-ui-base: 14px;
    /* Body UI text */
    --text-ui-lg: 16px;
    /* Emphasized UI */
    --text-ui-xl: 18px;
    /* Headings */

    /* Reading Surface Scale */
    --text-reader-base: clamp(16px, 1.6vw, 18px);
    /* Body text */
    --text-reader-sm: 14px;
    /* Captions, signatures */
    --text-reader-lg: 20px;
    /* Subheadings */
    --text-reader-xl: 24px;
    /* Main headings */

    /* Code Scale */
    --text-code-sm: 12px;
    /* Inline code */
    --text-code-base: 13px;
    /* Code blocks */

    /* Line Heights */
    --leading-ui-tight: 1.2;
    /* Compact UI elements */
    --leading-ui-normal: 1.4;
    /* Standard UI */
    --leading-ui-relaxed: 1.5;
    /* Comfortable UI */
    --leading-reader: 1.6;
    /* Reading comfort */
    --leading-code: 1.5;
    /* Code readability */

    /* Letter Spacing */
    --tracking-tight: -0.01em;
    /* Headings, emphasized */
    --tracking-normal: -0.003em;
    /* Body text */
    --tracking-wide: 0.01em;
    /* Small text legibility */

    /* Font Weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Measure (optimal reading width) */
    --measure-reader: 75ch;
    --measure-ui: 50ch;
}

/* ========================================
   CSS VARIABLES – DARK MODE
   ======================================== */

@media (prefers-color-scheme: dark) {
    :root {
        /* Slightly increase font weight in dark mode to compensate for halation */
        --weight-normal: 420;
        --weight-medium: 520;
        --weight-semibold: 620;
        --weight-bold: 720;

        /* Slightly increase letter spacing in dark mode */
        --tracking-normal: -0.001em;
    }
}

/* ========================================
   BASE TYPOGRAPHY
   ======================================== */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

body {
    font-family: var(--font-ui);
    font-size: var(--text-ui-base);
    line-height: var(--leading-ui-normal);
    letter-spacing: var(--tracking-normal);
    font-weight: var(--weight-normal);
}

/* Sidebar label text: force crisp rendering in Chrome */
.sidebar-label-text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Chrome/Edge: slightly lighter + crisper sidebar labels */
@supports (-webkit-appearance: none) and (not (font: -apple-system-body)) {
    .label-link .sidebar-label-text {
        font-weight: 400;
        letter-spacing: -0.002em;
        text-rendering: geometricPrecision;
    }
}

/* ========================================
   UI CHROME TYPOGRAPHY
   ======================================== */

/* Labels, timestamps, metadata */
.text-ui-xs {
    font-family: var(--font-ui);
    font-size: var(--text-ui-xs);
    line-height: var(--leading-ui-relaxed);
    letter-spacing: var(--tracking-wide);
}

.text-ui-sm {
    font-family: var(--font-ui);
    font-size: var(--text-ui-sm);
    line-height: var(--leading-ui-normal);
    letter-spacing: var(--tracking-normal);
}

.text-ui-base {
    font-family: var(--font-ui);
    font-size: var(--text-ui-base);
    line-height: var(--leading-ui-normal);
    letter-spacing: var(--tracking-normal);
}

.text-ui-lg {
    font-family: var(--font-ui);
    font-size: var(--text-ui-lg);
    line-height: var(--leading-ui-tight);
    letter-spacing: var(--tracking-tight);
}

.text-ui-xl {
    font-family: var(--font-ui);
    font-size: var(--text-ui-xl);
    line-height: var(--leading-ui-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-semibold);
}

/* Tabular numbers for timestamps, counts, badges */
.font-tabular {
    font-variant-numeric: tabular-nums;
}

/* Proportional numbers for prose */
.font-proportional {
    font-variant-numeric: proportional-nums;
}

/* Weight utilities */
.font-normal {
    font-weight: var(--weight-normal);
}

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

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

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

/* ========================================
   READING SURFACE TYPOGRAPHY
   ======================================== */

.reader-body {
    font-family: var(--font-reader);
    font-size: var(--text-reader-base);
    line-height: var(--leading-reader);
    letter-spacing: var(--tracking-normal);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1, "pnum" 1;
    /* onum = old-style numerals, pnum = proportional numerals */
    hyphens: auto;
    hanging-punctuation: first allow-end;
}

/* Headings in reading surface */
.reader-heading-1 {
    font-family: var(--font-reader);
    font-size: var(--text-reader-xl);
    line-height: 1.3;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.reader-heading-2 {
    font-family: var(--font-reader);
    font-size: var(--text-reader-lg);
    line-height: 1.4;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.015em;
    margin-top: 1.2em;
    margin-bottom: 0.4em;
}

/* Blockquotes – soften contrast, don't shrink */
.reader-blockquote {
    font-family: var(--font-reader);
    font-size: var(--text-reader-base);
    line-height: var(--leading-reader);
    font-style: italic;
    opacity: 0.85;
    border-left: 3px solid currentColor;
    padding-left: 1em;
    margin: 1em 0;
}

/* Signatures and footers – quiet, not invisible */
.reader-signature {
    font-family: var(--font-reader);
    font-size: calc(var(--text-reader-base) * 0.9);
    line-height: var(--leading-reader);
    opacity: 0.9;
    margin-top: 2em;
}

/* Quoted replies – lower contrast */
.reader-quoted {
    opacity: 0.75;
}

/* Tables in reading surface – switch to tabular numerals */
.reader-table {
    font-family: var(--font-reader);
    font-size: var(--text-reader-base);
    line-height: var(--leading-ui-normal);
    font-variant-numeric: lining-nums tabular-nums;
    /* lnum = lining numerals (align vertically), tnum = tabular (align horizontally) */
}

/* ========================================
   CODE & MONOSPACE TYPOGRAPHY
   ======================================== */

/* Inline code – integrated, not pasted on */
.code-inline {
    font-family: var(--font-code);
    font-size: var(--text-code-sm);
    line-height: inherit;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    padding: 2px 4px;
    /* Subtle baseline offset to keep lines even */
    vertical-align: baseline;
    position: relative;
    top: -1px;
}

@media (prefers-color-scheme: dark) {
    .code-inline {
        background-color: rgba(255, 255, 255, 0.08);
    }
}

/* Code blocks – roomy, copyable, readable */
.code-block {
    font-family: var(--font-code);
    font-size: var(--text-code-base);
    line-height: var(--leading-code);
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 1em;
    margin: 1em 0;
    overflow-x: auto;
    position: relative;
}

@media (prefers-color-scheme: dark) {
    .code-block {
        background-color: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

/* Code block with language label */
.code-block-label {
    font-family: var(--font-ui);
    font-size: var(--text-ui-xs);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}

/* Copy button for code blocks */
.code-copy-btn {
    font-family: var(--font-ui);
    font-size: var(--text-ui-xs);
    font-weight: var(--weight-medium);
    opacity: 0;
    transition: opacity 0.2s ease;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    padding: 0.25em 0.5em;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    cursor: pointer;
}

.code-block:hover .code-copy-btn {
    opacity: 1;
}

/* Syntax highlighting – restrained, WCAG-compliant */
.code-keyword {
    color: #0033b3;
    font-weight: var(--weight-medium);
}

.code-string {
    color: #067d17;
}

.code-comment {
    color: #8c8c8c;
    font-style: italic;
}

.code-number {
    color: #1750eb;
}

.code-function {
    color: #00627a;
}

@media (prefers-color-scheme: dark) {
    .code-keyword {
        color: #cc7832;
    }

    .code-string {
        color: #6a8759;
    }

    .code-comment {
        color: #808080;
    }

    .code-number {
        color: #6897bb;
    }

    .code-function {
        color: #ffc66d;
    }
}

/* ========================================
   THREAD LIST TYPOGRAPHY
   ======================================== */

/* Thread sender name - prominent for scanning */
.thread-sender {
    font-family: var(--font-ui);
    font-size: var(--text-ui-base);
    line-height: var(--leading-ui-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-medium);
    /* macOS: Standard weight (500) */
}

.thread-sender-unread {
    font-weight: var(--weight-bold);
    /* Bold (700) for unread */
}

/* Thread subject - lighter than sender for hierarchy */
.thread-subject {
    font-family: var(--font-ui);
    font-size: var(--text-ui-sm);
    line-height: 1.25;
    letter-spacing: -0.006em;
    font-weight: var(--weight-normal);
    /* Regular (400) */
    color: var(--text-content-secondary, #374151);
    /* Slightly lighter than sender */
    margin: 6px 0;
}

.thread-subject-unread {
    color: var(--text-content-primary, #111827);
    /* Keep weight normal for subject even if unread, rely on color/sender bolding, or use medium */
    font-weight: var(--weight-medium);
}

/* Thread snippet */
.thread-snippet {
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: var(--tracking-normal);
    color: var(--text-content-tertiary);
    /* Ensure distinct tertiary color */
    margin: 6px 0;
}

/* Thread timestamp */
.thread-timestamp {
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: var(--leading-ui-tight);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-normal);
}

/* Thread badges (Unread, Draft, etc.) */
.thread-badge {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: var(--weight-medium);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* ========================================
   MESSAGE VIEW TYPOGRAPHY
   ======================================== */

/* Message header (sender, timestamp, recipient) */
.message-sender {
    font-family: var(--font-ui);
    font-size: var(--text-ui-base);
    line-height: var(--leading-ui-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-semibold);
}

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

.message-timestamp {
    font-family: var(--font-ui);
    font-size: var(--text-ui-xs);
    line-height: var(--leading-ui-tight);
    font-variant-numeric: tabular-nums;
}

.message-recipient {
    font-family: var(--font-ui);
    font-size: var(--text-ui-xs);
    line-height: var(--leading-ui-tight);
}

/* Message body – reading surface */
.message-body {
    font-family: var(--font-reader);
    font-size: var(--text-reader-base);
    line-height: var(--leading-reader);
    letter-spacing: var(--tracking-normal);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1, "pnum" 1;
}

/* ========================================
   SIDEBAR TYPOGRAPHY
   ======================================== */

/* Folder names */
.sidebar-folder {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: var(--weight-normal);
    letter-spacing: var(--tracking-normal);
}

/* Folder count badges */
.sidebar-count {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
}

/* Section headers (INBOX, Labels, etc.) */
.sidebar-section-header {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Account names */
.sidebar-account {
    font-family: var(--font-ui);
    font-size: var(--text-ui-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
}

/* ========================================
   ATTACHMENTS
   ======================================== */

/* Attachment chips in messages and composer */
.attachment-chip,
.attachment-preview,
.attachment-name,
.attachment-size {
    font-family: var(--font-ui);
    font-size: var(--text-ui-sm);
}

/* ========================================
   SEMANTIC COLOR CLASSES
   ======================================== */

/* For DARK backgrounds (sidebar) */
.text-sidebar-primary {
    color: #e5e7eb;
    /* gray-200 - 10:1 contrast on gray-800 */
}

.text-sidebar-secondary {
    color: #d1d5db;
    /* gray-300 - 8:1 contrast on gray-800 */
}

.text-sidebar-tertiary {
    color: #9ca3af;
    /* gray-400 - 4.5:1 contrast, only for disabled */
}

/* For LIGHT backgrounds (thread list, message view) */
.text-content-emphasis {
    color: #000000;
    /* Pure black - 21:1 contrast */
}

.text-content-primary {
    color: #111827;
    /* gray-900 - 18:1 contrast */
}

.text-content-primary-soft {
    color: #1f2937;
    /* gray-800 - 12:1 contrast */
}

.text-content-secondary {
    color: #374151;
    /* gray-700 - 10:1 contrast */
}

.text-content-tertiary {
    color: #4b5563;
    /* gray-600 - 7:1 contrast */
}

.text-content-metadata {
    color: #6b7280;
    /* gray-500 - 4.9:1 contrast, for timestamps only */
}

/* ========================================
   UTILITIES
   ======================================== */

/* Truncate text with ellipsis */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Line clamp (multiple lines with ellipsis) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* Standard property for compatibility */
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* Standard property for compatibility */
    overflow: hidden;
}

/* Selection color */
::selection {
    background-color: rgba(127, 160, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
    ::selection {
        background-color: rgba(127, 160, 255, 0.3);
    }
}