/* ==========================================================================
   AZ NEWS PORTAL - MASTER DESIGN SYSTEM & THEME TOKENS
   --------------------------------------------------------------------------
   Changing colors or fonts in THIS SINGLE FILE will automatically update
   the ENTIRE website theme (Public Site, Admin, Editor & Member Panels).

   Theme direction: "Editorial Premium" — an ink-navy + saffron-gold
   identity for light mode, switching to "Midnight Desk" (charcoal +
   emerald) for dark mode. Built for a multi-language news & magazine
   platform with a premium/paywall tier.
   ========================================================================== */

:root {
    /* 🎨 BRAND COLOR PALETTE (Edit here to change full website theme) */
    --primary-color: #1B2A4A;
    /* Ink Navy — masthead, links, primary buttons */
    --primary-hover: #142038;
    /* Primary Hover State */
    --accent-color: #7A1F2B;
    /* Deep Maroon — ticker / breaking / alert */
    --accent-hover: #5E1620;
    /* Accent Hover State */
    --warning-color: #B8860B;
    /* Gold — Premium badge / crown / "seal" */
    --warning-soft: #F4E4C1;
    /* Light gold background for premium chips */
    --success-color: #1F8A70;
    /* Emerald — Active / Published state */
    --dark-bg: #1C1C1E;
    /* Dark Mode body / Topbar (warm charcoal, not pure black) */
    --dark-surface: #262626;
    /* Dark Mode card/panel surface */
    --card-bg: #ffffff;
    /* Card / Container White */
    --body-bg: #F7F4EE;
    /* Global Body Background — soft warm neutral (works for Admin too) */
    --surface-paper: #FAF3E4;
    /* Reading surface for Public article/E-Paper pages */
    --text-main: #1E2333;
    /* Main Text Color — warm near-navy, not flat gray-black */
    --text-muted: #6B6B62;
    /* Subtitle / Muted Text */
    --border-color: #E5DFD1;
    /* Border / Divider Line — warm hairline */

    /* 🔤 TYPOGRAPHY */
    --font-heading: 'Merriweather', 'Noto Serif Devanagari', serif;
    /* Editorial authority, regional-script ready */
    --font-body: 'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;

    /* 📐 UI RADIUS & SHADOWS */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 20px;
    /* Shadows tinted with the brand navy instead of flat black — reads softer/premium */
    --shadow-sm: 0 2px 8px rgba(27, 42, 74, 0.06);
    --shadow-md: 0 10px 25px rgba(27, 42, 74, 0.10);
    --shadow-lg: 0 20px 45px rgba(27, 42, 74, 0.14);
}

/* Global Color Utility Application */
a {
    color: var(--primary-color);
}

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

.bg-primary {
    background-color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

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

.bg-danger {
    background-color: var(--accent-color) !important;
}

/* 👑 Premium / Paywall badge — the site's signature element.
   Gold text on gold-tint background (never plain black on a colored chip). */
.badge-premium {
    background-color: var(--warning-soft);
    color: var(--warning-color);
    border: 1px solid var(--warning-color);
    border-radius: var(--radius-pill);
    font-weight: 600;
    padding: 4px 12px;
    font-size: 12px;
}

/* 📰 Breaking news ticker strip */
.ticker-strip {
    background-color: var(--accent-color);
    color: #FAF3E4;
    border-radius: var(--radius-sm);
}

/* 📄 Reading surface — use on public Article / E-Paper pages only,
   NOT on Admin/Editor dashboards, so the CMS stays neutral and functional. */
.surface-paper {
    background-color: var(--surface-paper);
}

/* Cards get the soft tinted shadow instead of a flat generic one */
.card {
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    border-color: var(--border-color);
}

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

/* ==========================================================================
   DARK MODE — "Midnight Desk"
   Redefine the TOKENS themselves (not just utility classes) so every
   component that already uses var(--primary-color) etc. adapts automatically.
   ========================================================================== */
body.dark-mode {
    --primary-color: #3CBF9E;
    /* Emerald reads far better than navy on a dark bg */
    --primary-hover: #2FA286;
    --accent-color: #E8952F;
    /* Saffron for alerts on dark — navy-maroon combo loses contrast at night */
    --accent-hover: #C97C1D;
    --warning-color: #D9A93B;
    --warning-soft: #3A2F14;
    --card-bg: var(--dark-surface);
    --body-bg: var(--dark-bg);
    --surface-paper: var(--dark-surface);
    --text-main: #F2EFE9;
    --text-muted: #9C9992;
    --border-color: #333333;

    background-color: var(--dark-bg) !important;
    color: var(--text-main) !important;
}

body.dark-mode .bg-white,
body.dark-mode .card {
    background-color: var(--dark-surface) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .text-dark {
    color: var(--text-main) !important;
}