/* ============================================================
   NewsBot shared design system — single source of truth.
   Loaded by every page so tokens, base styles, dark mode and
   core components stay consistent and pages don't drift apart.

   Canonical tokens are the (most mature) stock_detail set.
   Legacy variable names used by older pages are kept as
   ALIASES that resolve to the same canonical value, so existing
   page CSS keeps working while rendering consistently.
   ============================================================ */

:root {
    /* Spacing scale */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

    /* Typography scale */
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.75rem;

    /* Canonical colors */
    --bg: #f5f7fa;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --text: #0f172a;
    --text-strong: #020617;
    --text-muted: #64748b;
    --text-soft: #94a3b8;
    --border: #e5eaf1;
    --border-soft: #eef2f7;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --blue-soft: #eff6ff;
    --green: #16a34a;
    --green-soft: #dcfce7;
    --red: #dc2626;
    --red-soft: #fee2e2;
    --amber: #d97706;
    --amber-soft: #fef3c7;
    --indigo: #4f46e5;

    /* One shared dark chrome surface (was #111827 vs #1e293b) */
    --surface-dark: #111827;
    --surface-dark-soft: #1f2937;

    /* Shadow / radius */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06);
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;

    /* ---- Legacy aliases (do not introduce new uses) ---- */
    --primary: var(--blue);
    --primary-dark: var(--blue-dark);
    --card: var(--panel);
    --text-main: var(--text);
    --text-secondary: #475569;
    --muted: var(--text-muted);
    --line: var(--border);
    --detail-bg: var(--panel-soft);
}

/* Centralized dark mode — one definition for ALL pages
   (previously only login + error had this, causing a hard
   light/dark jump when navigating between pages). */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f172a;
        --panel: #1e293b;
        --panel-soft: #0f172a;
        --text: #e2e8f0;
        --text-strong: #f8fafc;
        --text-muted: #94a3b8;
        --text-soft: #64748b;
        --border: #334155;
        --border-soft: #1e293b;
        --blue: #3b82f6;
        --blue-dark: #2563eb;
        --blue-soft: #1e3a8a;
        --surface-dark: #020617;
        --surface-dark-soft: #0f172a;
        --text-secondary: #cbd5e1;
    }
}

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

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============ SHARED COMPONENTS ============ */

/* Unified button baseline. Works standalone and overrides
   Bootstrap's .btn-primary so buttons match across pages. */
.btn {
    border-radius: var(--r-sm);
    font-weight: 600;
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}

.btn-primary,
.btn-primary:focus {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.btn-primary:hover {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
}

/* Consistent card radius/border (was 8 / 12 / 16px per page) */
.card,
.settings-card,
.error-container {
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--panel);
}

.form-control {
    border-radius: var(--r-sm);
    border-color: var(--border);
}

.form-control:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Shared inline-icon sizing so SVG icons sit like the old emoji */
.icon-inline {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
}