/**
 * Life360 Horizon design tokens — the single source of truth for colour,
 * type, shape and elevation (Phase 85, 2026-10-15).
 *
 * Loaded before life360-theme.css (staff app, via layouts/head-css.php) and
 * before l360-portal.css (member and employer portals). Phase 82 adds the dark
 * values here, once, for every surface. Keep --l360-navy a dark colour in both
 * themes: it is a fill under white text (modal headers, brand strips).
 */
:root {
  /* Horizon palette (light) */
  --l360-primary: #5a4fe0;
  --l360-primary-rgb: 90, 79, 224;
  --l360-primary-hover: #4a40c8;
  --l360-primary-active: #4037b0;
  --l360-primary-soft: #ecebfd;
  --l360-accent: #128c7e;          /* teal: fund value and investment growth only */
  --l360-accent-soft: #dcf1ee;

  --l360-ok: #0d7f61;    --l360-ok-soft: #ddf4ec;
  --l360-warn: #a35f00;  --l360-warn-soft: #fdf0dc;
  --l360-bad: #c2401f;   --l360-bad-soft: #fde6df;
  --l360-info-c: #2f67cf; --l360-info-soft: #e3ecfc;

  --l360-ink: #17163a;
  --l360-canvas: #f5f5fb;
  --l360-raised: #faf9fe;

  /* Existing names, kept so every current rule and page keeps working */
  --l360-gold: var(--l360-primary);
  --l360-gold-light: #8f87f3;
  --l360-gold-muted: var(--l360-primary-soft);
  --l360-success: var(--l360-ok);
  --l360-warning: var(--l360-warn);
  --l360-danger: var(--l360-bad);
  --l360-info: var(--l360-info-c);
  --l360-teal: var(--l360-accent);
  --l360-teal-light: #5cc4bd;

  --l360-navy: var(--l360-ink);
  --l360-navy-mid: #2b2870;
  --l360-navy-light: #4338ca;

  --l360-text: #2c2b42;
  --l360-text-soft: #45435e;
  --l360-slate: #6a6886;
  --l360-slate-light: #a09eb8;

  --l360-bg: var(--l360-canvas);
  --l360-bg-hover: var(--l360-raised);
  --l360-bg-head: #f7f6fc;
  --l360-surface: #ffffff;
  --l360-border: #e3e2f0;
  --l360-border-soft: #efeef7;

  /* Shape & elevation */
  --l360-radius: 0.75rem;
  --l360-radius-sm: 0.5rem;
  --l360-radius-btn: 3px;
  --l360-shadow: 0 1px 2px rgba(23, 22, 58, 0.05), 0 6px 18px rgba(23, 22, 58, 0.05);
  --l360-shadow-md: 0 8px 24px rgba(23, 22, 58, 0.08);
  --l360-shadow-hover: 0 8px 24px rgba(var(--l360-primary-rgb), 0.10);

  /* Type */
  --l360-font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --l360-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --l360-font-mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
  --l360-font-button: "IBM Plex Sans Condensed", "Arial Narrow", "DM Sans", sans-serif;
}