/* =====================================================
   tokens.css — design tokens shared by the map pages
   Single source for the recurring brand palette. Linked
   before core.css so every rule can use var(--token).

   Theme-specific values are kept as separate tokens
   (--text-on-light, --panel-bg-light); collapsing the
   dark/light pairs into one token redefined under
   body[data-theme="light"] is a possible future step.
   ===================================================== */
:root {
    /* Text */
    --text:           #e2e8f0;  /* primary text on dark surfaces */
    --text-muted:     #94a3b8;  /* secondary / muted */
    --text-dim:       #64748b;  /* dim / tertiary */
    --text-on-light:  #1e293b;  /* primary text on light surfaces */

    /* Accent */
    --accent:         #38bdf8;  /* brand sky-blue */

    /* Panels */
    --panel-bg:           rgba(20, 20, 45, 0.92);     /* dark navy panel */
    --panel-bg-light:     rgba(255, 255, 255, 0.92);  /* light panel */
    --panel-border:       rgba(99, 99, 160, 0.35);    /* panel edge */
    --panel-border-muted: rgba(99, 99, 160, 0.25);
    --panel-border-soft:  rgba(99, 99, 160, 0.2);
    --panel-border-faint: rgba(99, 99, 160, 0.15);
}