/**
 * tokens.css - Cross-Platform UI Standardization Design Token Layer
 * Ez Editorials Platform
 * Ground Rule 2: Mobile: < 768px, Tablet: min-width: 768px, Desktop: min-width: 1024px
 */

:root {
    /* --- BRAND COLORS --- */
    --brand-red: #e73b50;
    --brand-red-hover: #cf2d41;
    --brand-blue: #1c64f2;
    --brand-blue-hover: #1952c4;
    --brand-light: #eff6ff;
    --brand-dark: #1e3a8a;

    /* --- SEMANTIC COLORS --- */
    --color-success: #10b981;
    --color-success-bg: #def7ec;
    --color-success-border: #059669;
    --color-success-text: #03543f;

    --color-warning: #f59e0b;
    --color-warning-bg: #fef3c7;
    --color-warning-border: #d97706;
    --color-warning-text: #92400e;

    --color-danger: #ef4444;
    --color-danger-bg: #fde8e8;
    --color-danger-border: #dc2626;
    --color-danger-text: #9b1c1c;

    --color-info: #3b82f6;
    --color-info-bg: #eff6ff;
    --color-info-border: #93c5fd;
    --color-info-text: #1e40af;

    --color-review: #8b5cf6;
    --color-review-bg: #f3e8ff;
    --color-review-border: #7c3aed;
    --color-review-text: #6b21a8;

    /* --- TEXT COLORS --- */
    --text-main: #1a1a1a;
    --text-dark: #1a1a1a;
    --text-muted: #6b7280;
    --text-subtle: #94a3b8;
    --text-inverse: #ffffff;

    /* --- BACKGROUNDS & SURFACES --- */
    --bg-body: #f5f6f8;
    --bg-main: #f5f6f8;
    --bg-card: #ffffff;
    --card-bg: #ffffff;
    --bg-subtle: #f8fafc;
    --bg-overlay: rgba(0, 0, 0, 0.5);

    /* --- BORDERS --- */
    --border-color: #e5e7eb;
    --border-light: #f1f5f9;
    --border-subtle: #cbd5e1;

    /* --- GRADIENTS --- */
    --gradient-header: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    --gradient-brand: linear-gradient(135deg, #e73b50 0%, #ff6b81 100%);
    --gradient-blue: linear-gradient(135deg, #1c64f2 0%, #3b82f6 100%);
    --gradient-cup-gold: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --gradient-dark: linear-gradient(135deg, #18181b 0%, #27272a 100%);

    /* --- SPACING SCALE --- */
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-base: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* --- RADII --- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-base: 12px;
    --radius-lg: 18px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* --- TYPOGRAPHY SCALE --- */
    --font-xs: 11px;
    --font-sm: 13px;
    --font-base: 14px;
    --font-md: 15px;
    --font-lg: 18px;
    --font-xl: 22px;
    --font-2xl: 28px;

    /* --- CONTAINER WIDTHS & BREAKPOINTS --- */
    --container-tablet: 768px;
    --container-desktop: 1440px;
    --max-reading-width: 680px;
    --rail-left-width: 240px;
    --rail-right-width: 340px;

    /* --- SHADOWS --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-dialog: 0 20px 45px rgba(0, 0, 0, 0.2);
    --focus-ring: 0 0 0 2px rgba(37, 99, 235, 0.5);
}

/* --- DARK MODE TOKEN OVERRIDES --- */
html.dark-mode,
body.dark-mode {
    --text-main: #f3f4f6;
    --text-dark: #f3f4f6;
    --text-muted: #9ca3af;
    --text-subtle: #6b7280;

    --bg-body: #121212;
    --bg-main: #121212;
    --bg-card: #1e1e1e;
    --card-bg: #1e1e1e;
    --bg-subtle: #27272a;

    --border-color: #2e2e38;
    --border-light: #383842;
    --border-subtle: #4b5563;

    --color-success-bg: #064e3b;
    --color-success-text: #a7f3d0;
    --color-warning-bg: #78350f;
    --color-warning-text: #fde68a;
    --color-danger-bg: #7f1d1d;
    --color-danger-text: #fecaca;
    --color-info-bg: #1e3a8a;
    --color-info-text: #bfdbfe;
    --color-review-bg: #4c1d95;
    --color-review-text: #ddd6fe;

    --gradient-header: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --shadow-dialog: 0 20px 45px rgba(0, 0, 0, 0.6);
}

/* --- UNIVERSAL DARK MODE FORM CONTROL RULES --- */
html.dark-mode input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode select,
html.dark-mode textarea {
    background-color: var(--bg-subtle, #27272a) !important;
    color: var(--text-main, #f3f4f6) !important;
    border-color: var(--border-subtle, #4b5563) !important;
}

html.dark-mode select option {
    background-color: var(--bg-card, #1e1e1e);
    color: var(--text-main, #f3f4f6);
}

/* ==============================================================================
   --- MAGAZINE & EVIDENCE LENS COMPONENT STYLES ---
   ============================================================================== */

/* Evidence Lens Highlighting */
.stat-number {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    padding: 1px 6px;
    border-radius: var(--radius-xs, 4px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: inline-block;
    border: 1px solid var(--color-warning-border, #d97706);
    line-height: 1.3;
}

/* Magazine Container & Layout */
.magazine-container {
    max-width: var(--max-reading-width, 680px);
    margin: 0 auto;
    padding: var(--space-base, 16px);
}

.magazine-hero {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base, 12px);
    padding: var(--space-base, 16px);
    margin-bottom: var(--space-base, 16px);
    box-shadow: var(--shadow-sm);
}

.magazine-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm, 8px);
}

.magazine-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-xs, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: var(--radius-full, 9999px);
    background: var(--brand-light);
    color: var(--brand-blue);
}

.magazine-progress-text {
    font-size: var(--font-xs, 11px);
    color: var(--text-muted);
    font-weight: 600;
}

/* Day Pills Navigation (Mon-Sun) */
.magazine-day-nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-xs, 4px);
    margin-bottom: var(--space-lg, 24px);
}

@media (max-width: 480px) {
    .magazine-day-nav {
        grid-template-columns: repeat(6, 1fr);
        gap: 2px;
    }
}

.mag-day-pill {
    padding: var(--space-sm, 8px) 2px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: var(--font-xs, 11px);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
}

.mag-day-pill:hover:not(.disabled) {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.mag-day-pill.active {
    background: var(--brand-blue) !important;
    color: var(--text-inverse) !important;
    border-color: var(--brand-blue) !important;
    box-shadow: var(--shadow-sm);
}

.mag-day-pill.active .mag-pill-date {
    color: var(--text-inverse) !important;
}

.mag-day-pill.active .mag-read-dot {
    background: #ffffff;
}

.mag-day-pill.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--bg-subtle);
}

.mag-pill-day {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mag-pill-date {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}

.mag-read-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-success);
    margin-top: 1px;
}

/* Magazine Article Cards */
.magazine-article-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base, 12px);
    padding: var(--space-lg, 24px);
    margin-bottom: var(--space-lg, 24px);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.magazine-article-card:hover {
    box-shadow: var(--shadow-md);
}

.mag-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm, 8px);
    margin-bottom: var(--space-md, 12px);
}

.mag-source-pill {
    font-size: var(--font-xs, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.mag-topic-pill {
    font-size: var(--font-xs, 11px);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-subtle);
    color: var(--text-muted);
}

.mag-time {
    font-size: var(--font-xs, 11px);
    color: var(--text-subtle);
    margin-left: auto;
}

.mag-title {
    font-size: var(--font-xl, 22px);
    font-weight: 800;
    line-height: 1.35;
    color: var(--text-main);
    margin: 0 0 var(--space-xs, 4px) 0;
}

.mag-subtitle {
    font-size: var(--font-sm, 13px);
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: var(--space-base, 16px);
    line-height: 1.5;
}

.mag-tone-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-xs, 11px);
    font-weight: 600;
    color: var(--color-review-text);
    background: var(--color-review-bg);
    padding: 3px 8px;
    border-radius: var(--radius-xs, 4px);
    margin-bottom: var(--space-base, 16px);
}

.mag-passage {
    font-size: var(--font-md, 15px);
    line-height: 1.75;
    color: var(--text-main);
    margin-bottom: var(--space-base, 16px);
}

.mag-passage p {
    margin-bottom: var(--space-base, 16px);
}

.mag-stats-summary {
    margin-top: var(--space-base, 16px);
    padding: var(--space-md, 12px) var(--space-base, 16px);
    background: var(--bg-subtle);
    border-radius: var(--radius-md, 8px);
    border-left: 3px solid var(--color-warning);
}

.mag-stats-title {
    font-size: var(--font-xs, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-warning-text);
    margin-bottom: var(--space-xs, 4px);
}

.mag-stats-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 4px);
}

.mag-stat-chip {
    font-size: var(--font-xs, 11px);
    font-weight: 700;
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    padding: 1px 6px;
    border-radius: var(--radius-xs, 4px);
}

/* Empty State */
.mag-empty-state {
    text-align: center;
    padding: var(--space-2xl, 48px) var(--space-base, 16px);
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-base, 12px);
    color: var(--text-muted);
}

.mag-empty-icon {
    font-size: 36px;
    margin-bottom: var(--space-sm, 8px);
}

.mag-empty-title {
    font-size: var(--font-md, 15px);
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: var(--space-xs, 4px);
}

.mag-empty-desc {
    font-size: var(--font-sm, 13px);
    color: var(--text-muted);
    max-width: 320px;
    margin: 0 auto;
}