/*
 * Colmagis design tokens.
 *
 * Single source of truth for the design system. Nothing else in the child theme
 * should hardcode a brand colour, radius or transition; use these variables.
 */

:root {
    /* Colour ---------------------------------------------------------- */
    --cm-navy: #16233a;          /* hero band, footer, primary button */
    --cm-navy-2: #22334d;        /* image overlays */
    --cm-accent: var(--nectar-accent-color, #8a2e3b);        /* bordó — accent bars, hover, details. Sourced from Salient's Theme Options > Accent Colors > Accent Color */
    --cm-accent-dark: color-mix(in srgb, var(--cm-accent) 80%, black);   /* bordó pressed, derived from --cm-accent */
    --cm-link: #23517a;          /* links only */
    --cm-link-hover: #16233a;

    --cm-surface: #ffffff;
    --cm-surface-2: #f1f0ed;     /* section background behind lists */
    --cm-cream: #f6f2ea;         /* featured card surface */

    --cm-text: #1e2733;
    --cm-popup-text: #38424f;   /* long-form copy inside benefit modals */
    --cm-text-soft: #5b6673;     /* dates, meta */
    --cm-text-mute: #8a94a2;     /* copyright, captions */
    --cm-text-invert: #d8d3ca;   /* body text on navy */

    --cm-border: #e4e1db;        /* card and control borders */
    --cm-rule: #edebe6;          /* hairline dividers */
    --cm-footer-label: #b7876e;  /* "SEDE …" labels on navy */

    /* Type ------------------------------------------------------------ */
    --cm-font-serif: "Source Serif 4", Georgia, serif;
    --cm-font-sans: "Public Sans", system-ui, -apple-system, sans-serif;

    /* Spacing — 8px base --------------------------------------------- */
    --cm-space-1: 8px;
    --cm-space-2: 16px;
    --cm-space-3: 24px;
    --cm-space-4: 32px;
    --cm-space-6: 48px;
    --cm-space-8: 64px;          /* vertical padding of a home section */
    --cm-content-max: 1200px;
    --cm-page-gutter: clamp(20px, 3vw, 40px);

    /* Shape and motion ----------------------------------------------- */
    --cm-radius-card: 10px;
    --cm-radius-control: 6px;
    --cm-radius-row: 8px;
    --cm-radius-pill: 999px;
    --cm-accent-bar: 3px;

    --cm-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.28);
    --cm-shadow-card-hover: 0 18px 38px rgba(0, 0, 0, 0.34);
    --cm-shadow-header: 0 1px 3px rgba(22, 35, 58, 0.08), 0 8px 24px rgba(22, 35, 58, 0.06);
    --cm-shadow-popup: 0 30px 80px rgba(9, 15, 26, 0.5);
    --cm-popup-overlay: rgba(22, 35, 58, 0.78);

    --cm-transition: 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --cm-transition: 0ms;
    }
}