/* ============================================================
   THE IARI TIMES — Design Tokens
   A complete design system for a digital newspaper experience
   ============================================================ */

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

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

/* Google Fonts: Noto Serif + Inter */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400..700;1,400..700&family=Inter:wght@400;500;600;700&display=swap');

/* --- CSS Custom Properties --- */
:root {
    /* ====== COLOR PALETTE ====== */

    /* Paper & Ink */
    --color-paper-base: #f0eee9;
    --color-ink-primary: #111111;
    --color-ink-secondary: #444444;

    /* Botanical Accent (Green — editorial highlights & interactive) */
    --color-accent: #3d7d55;
    --color-accent-hover: #2e6343;
    --color-accent-light: #aef2c1;
    --color-accent-container: #e8f5e9;

    /* Editorial Blue (Dashboard accents) */
    --color-editorial-blue: #1B365D;
    --color-editorial-red: #8B0000;

    /* Surface System (Material-inspired) */
    --color-surface: #f0eee9;
    --color-surface-dim: #d8d5cf;
    --color-surface-bright: #f5f3ef;
    --color-surface-container-lowest: #faf9f6;
    --color-surface-container-low: #f2f0eb;
    --color-surface-container: #eceae5;
    --color-surface-container-high: #e6e3df;
    --color-surface-container-highest: #dfddd8;

    /* On-Surface (text/icon on surfaces) */
    --color-on-surface: #1c1b1b;
    --color-on-surface-variant: #444748;

    /* Inverse */
    --color-inverse-surface: #313030;
    --color-inverse-on-surface: #f4f0ef;
    --color-inverse-primary: #c8c6c5;

    /* Primary (Black-based for newspaper authority) */
    --color-primary: #000000;
    --color-on-primary: #ffffff;
    --color-primary-container: #1c1b1b;
    --color-on-primary-container: #858383;
    --color-primary-fixed: #e5e2e1;
    --color-primary-fixed-dim: #c8c6c5;

    /* Secondary (Botanical Green) */
    --color-secondary: #296a44;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #aef2c1;
    --color-on-secondary-container: #30704a;

    /* Tertiary */
    --color-tertiary: #000000;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #1d1b1a;

    /* Error */
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;

    /* Outline & Dividers */
    --color-outline: #747878;
    --color-outline-variant: #c4c7c7;
    --color-rule-line: #E0E0E0;
    --color-divider: #E0E0E0;

    /* Overlay */
    --color-overlay-dim: rgba(0, 0, 0, 0.5);
    --color-overlay-dark: rgba(0, 0, 0, 0.7);

    /* Background */
    --color-background: #f0eee9;
    --color-on-background: #1c1b1b;

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

    /* Font Families */
    --font-masthead: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-headline: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Noto Serif', Georgia, serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Masthead (The IARI Times logo) */
    --text-masthead-size: 80px;
    --text-masthead-weight: 400; /* Medium-low thickness */
    --text-masthead-line-height: 1.1;
    --text-masthead-letter-spacing: -0.01em;

    /* Headline H1 (Hero story) */
    --text-h1-size: 40px;
    --text-h1-weight: 700;
    --text-h1-line-height: 1.15;

    /* Headline H2 (Section headers, featured stories) */
    --text-h2-size: 26px;
    --text-h2-weight: 600;
    --text-h2-line-height: 1.2;

    /* Headline H3 (Article cards) */
    --text-h3-size: 18px;
    --text-h3-weight: 600;
    --text-h3-line-height: 1.3;

    /* Body Main */
    --text-body-size: 16px;
    --text-body-weight: 400;
    --text-body-line-height: 1.7;

    /* Body Column (Smaller body for newspaper columns) */
    --text-column-size: 14px;
    --text-column-weight: 400;
    --text-column-line-height: 1.6;

    /* UI Label (Buttons, navigation, metadata) */
    --text-ui-size: 11px;
    --text-ui-weight: 600;
    --text-ui-line-height: 1;
    --text-ui-letter-spacing: 0.05em;

    /* Metadata (Dates, bylines) */
    --text-meta-size: 12px;
    --text-meta-weight: 400;
    --text-meta-line-height: 1.4;

    /* ====== SPACING ====== */
    --space-baseline: 8px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-gutter: 16px;
    --space-outer-margin: 32px;
    --space-section-gap: 64px;
    --space-text-inset: 24px;

    /* ====== BORDERS & RADII ====== */
    --radius-sm: 0.25rem;   /* 4px */
    --radius-default: 0.5rem; /* 8px — Level 2 roundedness */
    --radius-md: 0.75rem;   /* 12px */
    --radius-lg: 1rem;      /* 16px */
    --radius-xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;

    --border-thin: 1px solid var(--color-rule-line);
    --border-medium: 2px solid var(--color-primary);
    --border-rule: 1px solid var(--color-divider);

    /* ====== SHADOWS ====== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);

    /* ====== TRANSITIONS ====== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-smooth: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ====== GRID ====== */
    --grid-columns: 12;
    --grid-max-width: 900px;
    --grid-editorial-max-width: 1400px;

    /* Card & Canvas */
    --color-card-bg: #fdfbf7;
    --color-card-border: #e2ddd3;
    --color-canvas-bg: #c8c5be;

    /* ====== Z-INDEX SCALE ====== */
    --z-base: 0;
    --z-above: 10;
    --z-nav: 100;
    --z-overlay-backdrop: 2500;
    --z-overlay-content: 2510;
    --z-modal: 2600;
    --z-toast: 2700;

    /* ====== GLASSMORPHISM / LIQUID GLASS ====== */
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-strong: rgba(255, 255, 255, 0.72);
    --glass-bg-subtle: rgba(255, 255, 255, 0.35);
    --glass-border: rgba(255, 255, 255, 0.45);
    --glass-blur: blur(18px);
    --glass-blur-heavy: blur(28px);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

    /* ====== NEWSPAPER ORNAMENT ====== */
    --ornament-rule: 1px solid #111;
    --ornament-rule-double: 3px double #111;
    --ornament-rule-thick: 4px solid #111;
    --ornament-rule-thin: 0.5px solid #555;
    --ornament-dash: 1px dashed #ccc;
}

/* ====== GLOBAL RESET & BASE ====== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-line-height);
    color: var(--color-on-surface);
    background-color: var(--color-background);
    overflow-x: hidden;
}

/* Selection styling */
::selection {
    background: var(--color-secondary-container);
    color: var(--color-on-secondary-container);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-surface);
}
::-webkit-scrollbar-thumb {
    background: var(--color-outline-variant);
    border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-outline);
}

/* ====== TYPOGRAPHY UTILITY CLASSES ====== */

.masthead {
    font-family: var(--font-masthead);
    font-size: var(--text-masthead-size);
    font-weight: var(--text-masthead-weight);
    line-height: var(--text-masthead-line-height);
    letter-spacing: var(--text-masthead-letter-spacing);
    color: var(--color-ink-primary);
}

.headline-h1 {
    font-family: var(--font-headline);
    font-size: var(--text-h1-size);
    font-weight: var(--text-h1-weight);
    line-height: var(--text-h1-line-height);
    color: var(--color-ink-primary);
}

.headline-h2 {
    font-family: var(--font-headline);
    font-size: var(--text-h2-size);
    font-weight: var(--text-h2-weight);
    line-height: var(--text-h2-line-height);
    color: var(--color-ink-primary);
}

.headline-h3 {
    font-family: var(--font-headline);
    font-size: var(--text-h3-size);
    font-weight: var(--text-h3-weight);
    line-height: var(--text-h3-line-height);
    color: var(--color-ink-primary);
}

.body-main {
    font-family: var(--font-body);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-line-height);
}

.body-column {
    font-family: var(--font-body);
    font-size: var(--text-column-size);
    font-weight: var(--text-column-weight);
    line-height: var(--text-column-line-height);
}

.ui-label {
    font-family: var(--font-ui);
    font-size: var(--text-ui-size);
    font-weight: var(--text-ui-weight);
    line-height: var(--text-ui-line-height);
    letter-spacing: var(--text-ui-letter-spacing);
    text-transform: uppercase;
}

.metadata {
    font-family: var(--font-ui);
    font-size: var(--text-meta-size);
    font-weight: var(--text-meta-weight);
    line-height: var(--text-meta-line-height);
    color: var(--color-on-surface-variant);
}

/* Drop cap for lead paragraphs */
.drop-cap::first-letter {
    float: left;
    font-family: var(--font-headline);
    font-size: 4.5em;
    font-weight: 700;
    line-height: 0.8;
    margin-right: 0.08em;
    margin-top: 0.05em;
    color: var(--color-ink-primary);
}

/* ====== LINK STYLES ====== */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

/* ====== BUTTON BASE ====== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-ui);
    font-size: var(--text-ui-size);
    font-weight: var(--text-ui-weight);
    letter-spacing: var(--text-ui-letter-spacing);
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius-default);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}
.btn-primary:hover {
    background: var(--color-inverse-surface);
}

.btn-accent {
    background: var(--color-accent);
    color: var(--color-on-secondary);
}
.btn-accent:hover {
    background: var(--color-accent-hover);
}

.btn-outline {
    background: transparent;
    color: var(--color-on-surface);
    border: 1px solid var(--color-rule-line);
}
.btn-outline:hover {
    background: var(--color-surface-container);
}

.btn-ghost {
    background: transparent;
    color: var(--color-on-surface-variant);
}
.btn-ghost:hover {
    background: var(--color-surface-container);
    color: var(--color-on-surface);
}

/* ====== MATERIAL SYMBOLS SETUP ====== */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* ====== UTILITY CLASSES ====== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

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

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

/* ====== NEWSPAPER LOADING ANIMATION ====== */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes ck-unfold {
    0%   { opacity: 0; transform: rotateX(-12deg) scale(0.96); filter: blur(4px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { transform: rotateX(0deg) scale(1); }
}

@keyframes ck-ink-spread {
    0%   { clip-path: inset(100% 0 0 0); opacity: 0; }
    40%  { opacity: 1; }
    100% { clip-path: inset(0 0 0 0); }
}

@keyframes ck-typing {
    0%, 10% { width: 0; border-right-color: var(--color-accent); }
    70%, 90% { width: 14ch; border-right-color: var(--color-accent); }
    95%, 100% { width: 14ch; border-right-color: transparent; }
}

@keyframes ck-press-stamp {
    0%   { transform: scale(1.12); opacity: 0; filter: blur(2px); }
    50%  { transform: scale(0.97); opacity: 1; filter: blur(0); }
    100% { transform: scale(1); }
}

@keyframes ck-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes ck-pulse-dot {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

@keyframes ck-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Glassmorphism utility */
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inset);
}

.glass-strong {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inset);
}

/* ====== NEO-BRUTALIST OVERRIDES ====== */
/* Scoped: applies everywhere EXCEPT inside .ck-admin-wrap (admin/editorial dashboards) */

/* Buttons — landing, login, register, submit pages */
body:not(:has(.ck-admin-wrap)) .ck-btn,
body:not(:has(.ck-admin-wrap)) .ck-btn-primary,
body:not(:has(.ck-admin-wrap)) .ck-btn-ghost,
body:not(:has(.ck-admin-wrap)) .ck-btn-outline,
.ck-landing .btn,
.ck-landing .btn-primary,
.ck-landing .btn-accent,
.ck-landing .btn-outline,
.ck-landing .btn-ghost,
.ck-register .ck-btn,
.ck-register .ck-btn-primary,
.ck-register .ck-btn-ghost {
    border: 2px solid #141413 !important;
    box-shadow: 4px 4px 0px 0px #141413 !important;
    border-radius: 4px !important;
    color: #141413 !important;
    background: #fff !important;
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: all 0.1s ease !important;
}

body:not(:has(.ck-admin-wrap)) .ck-btn-primary,
.ck-landing .btn-primary,
.ck-landing .btn-accent,
.ck-register .ck-btn-primary {
    background: var(--color-accent) !important;
    color: #fff !important;
}

body:not(:has(.ck-admin-wrap)) .ck-btn:hover,
body:not(:has(.ck-admin-wrap)) .ck-btn-primary:hover,
body:not(:has(.ck-admin-wrap)) .ck-btn-ghost:hover,
.ck-landing .btn:hover,
.ck-landing .btn-primary:hover,
.ck-landing .btn-accent:hover {
    box-shadow: 2px 2px 0px 0px #141413 !important;
    transform: translate(2px, 2px) !important;
}

/* Form inputs — landing, login, register, submit pages */
body:not(:has(.ck-admin-wrap)) .ck-form-input {
    border: 2px solid #141413 !important;
    box-shadow: 4px 4px 0px 0px #141413 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #141413 !important;
    font-family: var(--font-ui) !important;
    transition: all 0.1s ease !important;
}
body:not(:has(.ck-admin-wrap)) .ck-form-input:focus {
    box-shadow: 2px 2px 0px 0px #141413 !important;
    transform: translate(2px, 2px) !important;
    outline: none !important;
}

/* Cards & Panels — ONLY landing page cards (not admin/editorial) */
.ck-feature-card,
.ck-institute-card,
.ck-register-card {
    border: 2px solid #141413 !important;
    box-shadow: 4px 4px 0px 0px #141413 !important;
    border-radius: 4px !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: all 0.1s ease !important;
}

.ck-feature-card:hover,
.ck-institute-card:hover {
    box-shadow: 2px 2px 0px 0px #141413 !important;
    transform: translate(2px, 2px) !important;
}