/* ============================================
   DESIGN TOKENS — myndfocal News
   Centralized CSS variables for the entire app
   ============================================ */

:root {
    /* ── Typography ── */
    --font-heading: 'Libre Baskerville', Georgia, serif;
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* ── Core palette (Light) ── */
    --ink: #0f172a;
    --ink-muted: #475569;
    --ink-faint: #94a3b8;
    --paper: #f0fdfa;
    --paper-elevated: #ffffff;
    --paper-warm: #ccfbf1;
    --paper-subtle: #f8fffe;

    /* ── Accent ── */
    --accent: #0d9488;
    --accent-hover: #0f766e;
    --accent-light: #14b8a6;
    --accent-soft: rgba(13, 148, 136, 0.10);
    --accent-softer: rgba(13, 148, 136, 0.05);
    --accent-glow: rgba(13, 148, 136, 0.25);

    /* ── Semantic colors ── */
    --success: #16a34a;
    --success-bg: #dcfce7;
    --success-border: #bbf7d0;
    --success-text: #166534;
    --error: #dc2626;
    --error-bg: #fee2e2;
    --error-border: #fecaca;
    --error-text: #991b1b;
    --warning: #d97706;
    --warning-bg: #fef3c7;
    --warning-border: #fde68a;
    --warning-text: #92400e;

    /* ── Borders ── */
    --border: #99f6e4;
    --border-strong: #5eead4;
    --border-subtle: #d1fae5;
    --border-muted: #e2e8f0;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06);
    --shadow-glow: 0 0 20px var(--accent-glow);
    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04);

    /* ── Glass ── */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.35);
    --glass-blur: 16px;

    /* ── Spacing scale ── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* ── Radius ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 999px;

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.4s;

    /* ── Layout ── */
    --header-height: 64px;
    --sidebar-width: 280px;
    --max-content: 1600px;
    --max-article: 720px;
    --max-article-body: 680px;

    /* ── Source tag ── */
    --source-bg: #0f172a;
    --source-text: #ffffff;

    /* ── Admin palette ── */
    --admin-side: #1e293b;
    --admin-side-text: #e2e8f0;
    --admin-side-hover: #334155;
    --admin-accent: #3b82f6;
    --admin-accent-hover: #2563eb;
    --admin-bg: #f1f5f9;
    --admin-card: #ffffff;
    --admin-border: #e2e8f0;
    --admin-muted: #64748b;

    /* ── Color mode transition ── */
    --theme-transition: background 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── DARK MODE ── */
[data-theme="dark"] {
    --ink: #e2e8f0;
    --ink-muted: #94a3b8;
    --ink-faint: #64748b;
    --paper: #0b1120;
    --paper-elevated: #151f32;
    --paper-warm: #0f1a2e;
    --paper-subtle: #121d30;

    --accent: #2dd4bf;
    --accent-hover: #5eead4;
    --accent-light: #99f6e4;
    --accent-soft: rgba(45, 212, 191, 0.12);
    --accent-softer: rgba(45, 212, 191, 0.06);
    --accent-glow: rgba(45, 212, 191, 0.20);

    --border: #1e3a4a;
    --border-strong: #2d5a6a;
    --border-subtle: #1a2e40;
    --border-muted: #1e293b;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.40);
    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.35);

    --glass-bg: rgba(15, 23, 42, 0.80);
    --glass-border: rgba(255, 255, 255, 0.08);

    --source-bg: #e2e8f0;
    --source-text: #0f172a;

    --success-bg: #052e16;
    --success-border: #166534;
    --success-text: #86efac;
    --error-bg: #450a0a;
    --error-border: #991b1b;
    --error-text: #fca5a5;

    --admin-side: #0f172a;
    --admin-side-text: #cbd5e1;
    --admin-side-hover: #1e293b;
    --admin-bg: #0b1120;
    --admin-card: #151f32;
    --admin-border: #1e293b;
    --admin-muted: #64748b;
}