/*
 * UAEFMA Newsroom — design tokens.
 *
 * ONE palette, not two. Every token below aliases onto the existing
 * :root set in newsroom-v3-shell.css (--v3-*). The literal after each
 * comma is a fallback for contexts where that file is not loaded —
 * chiefly the admin, which loads admin.css / admin-light.css instead.
 * Changing a colour means changing it in newsroom-v3-shell.css; this
 * file only gives those colours role-based names.
 *
 * Contrast: every text token here is verified >= 4.5:1 (WCAG AA) against
 * the surface it is intended for. Ratios noted inline. Do not lighten
 * these without re-checking.
 */
:root {
    /* ---- Brand -------------------------------------------------------
       The site's established identity, NOT the UAE flag palette. The
       green is the existing institutional teal; introducing flag green
       (#00843D) here would create a second, competing green. */
    --brand-green: var(--v3-green, #0d6e63);
    --brand-ink: var(--v3-ink, #0b1f33);
    --brand-red: var(--admin-red, #b21e2b);
    --accent-gold: var(--v3-copper, #c59a3d);

    /* Gold is a 2.60:1 colour on white — fine for rules, borders and
       icons, but it fails AA as body text. Use this darker tone when
       gold has to carry actual words. 4.86:1 white / 4.55:1 sand. */
    --accent-gold-text: #8c6d1c;

    /* ---- Dark surfaces (public footer, topbar) ------------------------
       Not the admin sidebar: that is light-themed via admin-light.css. */
    --shell-bg: var(--v3-ink, #0b1f33);
    --shell-bg-2: #0e2647;
    --shell-text: #e6edf5;          /* 14.15:1 on shell-bg */
    --shell-text-muted: #9fb0c4;    /*  7.54:1 on shell-bg */
    --shell-hover: rgba(255, 255, 255, .06);
    --shell-active: var(--v3-green, #0d6e63);
    --shell-border: rgba(255, 255, 255, .10);

    /* ---- Light surfaces ---------------------------------------------- */
    --bg: var(--v3-sand, #faf7f2);
    --surface: var(--v3-paper, #fff);
    --surface-2: #faf8f3;
    --border: var(--v3-rule, #d7dfe4);
    --border-strong: #c3ced6;

    --text: var(--v3-ink, #0b1f33);          /* 15.7:1 on white */
    --text-secondary: var(--v3-muted, #5f6f7e); /* 5.17 white / 4.84 sand */
    --text-muted: #5d6a79;                   /* 5.52 white / 5.17 sand */

    /* ---- Semantic ----------------------------------------------------- */
    --up: #0e7a55;
    --down: #c02626;
    --neutral: var(--text-muted);

    /* ---- Scale -------------------------------------------------------- */
    --radius: 8px;
    --radius-card: 12px;
    --shadow-card: 0 1px 2px rgba(16, 24, 40, .06);
}