/*
 * Design tokens — "Newsroom" direction.
 * Source of truth: docs/design_handoff_far_right_ep/README.md
 *
 * The chart-relevant values are mirrored as a THEME object at the top of
 * js/maingraph.js, because D3 computes SVG attributes in JS and cannot read
 * these custom properties. Keep the two in sync.
 */
:root {
    /* Text */
    --ink: #14140f;
    --ink-2: #2b2f36;
    --muted: #78776f;
    --muted-2: #8a8a80;
    --faint: #9a9a90;

    /* Brand */
    --brand: #17548c;
    --nav-active: #4d9be6;

    /* Chart — EP groups (upper tier) */
    --group-stroke: #17548c;
    --group-fill: #eef4fb;

    /* Chart — European parties (lower tier) */
    --party-stroke: #b25a17;
    --party-fill: #fbf1e8;

    /* Chart — journey */
    --journey-highlight: #f6e3cf;
    --ribbon-under: rgba(178, 90, 23, 0.28);
    --ribbon-over: rgba(178, 90, 23, 0.72);

    /* Surfaces */
    --page: #ffffff;
    --border: #e7e7e2;
    --avatar: #e3e3dc;
    --bar-track: #f4f4f1;
    --axis: #d0d0c8;

    /* Footer nav */
    --nav-bg: #14140f;
    --nav-text: #e6e6df;
    --nav-dim: #9a9a90;

    /* Type */
    --font-ui: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Radii */
    --radius-control: 4px;
    --radius-panel: 8px;
    --radius-swatch: 2px;

    /* Layout */
    --sidebar-width: 312px;
    --app-max-width: 1560px;
    --text-max-width: 760px;
    --nav-height: 57px;

    /* Shadows */
    --shadow-button: 0 8px 24px rgba(23, 84, 140, 0.35);
    --shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.4);
}