/* =========================================================
   DS BRIDGE — maps the LOCALACT app's legacy custom properties
   onto the LocalAct Design System tokens (Criss Updates).
   Loaded AFTER styles.css and the DS token files, so these win.

   DS direction (DESIGN-SYSTEM §1.8):
     primary    = Action Orange  → CTAs / key accents
     secondary  = Navy           → structure / nav / active / selected
     tertiary   = Digital Teal    → positive / trend
     quaternary = Authority Gold  → top metrics / awards
   Type: Jost (display) + Carlito (UI/body) + Georgia (editorial).
   ========================================================= */

:root {
  /* ── Neutrals → DS neutral ramp ───────────────────────────── */
  --cream:   var(--la-neutral-50);
  --cream-2: var(--la-neutral-100);
  --cream-3: var(--la-neutral-300);
  --paper:   var(--la-neutral-0);
  --ink:     var(--la-neutral-900);
  --ink-2:   var(--la-neutral-800);
  --ink-3:   var(--la-neutral-500);
  --ink-4:   var(--la-neutral-400);
  --ink-5:   #a9a9ae;
  --line:    var(--la-neutral-200);
  --line-2:  var(--la-neutral-300);

  /* ── Structure (navy) ─────────────────────────────────────── */
  --brand-navy:   var(--la-brand-secondary-500);
  --brand-navy-2: var(--la-brand-secondary-600);

  /* ── Primary ACTION → Action Orange ───────────────────────── */
  --terra:        var(--la-brand-primary-500);
  --terra-2:      var(--la-brand-primary-600);
  --terra-3:      var(--la-brand-primary-300);
  --terra-soft:   var(--la-brand-primary-100);
  --terra-softer: var(--la-brand-primary-50);

  /* ── Data / pastel palette → DS slots + status ────────────── */
  --sage:          var(--la-brand-tertiary-500);
  --sage-soft:     var(--la-brand-tertiary-100);
  --marigold:      var(--la-brand-quaternary-500);
  --marigold-soft: var(--la-brand-quaternary-100);
  --berry:         var(--la-status-error-400);
  --berry-soft:    var(--la-status-error-100);
  --sky:           #545458;   /* was status-info blue — now dark gray (brand hierarchy) */
  --sky-soft:      #ececee;
  --violet:        var(--la-brand-secondary-400);
  --violet-soft:   var(--la-brand-secondary-100);
  --coral:         var(--la-brand-primary-400);
  --coral-soft:    var(--la-brand-primary-100);
  --teal:          var(--la-brand-tertiary-500);
  --teal-soft:     var(--la-brand-tertiary-100);

  /* ── Semantic status ──────────────────────────────────────── */
  --ok:   var(--la-status-success-500);
  --warn: var(--la-status-warning-600);
  --bad:  var(--la-status-error-500);

  /* ── Channel hues — distinct, pulled toward the DS family ──── */
  --ch-ppc:    #002857;  /* Paid Search — navy (was blue) */
  --ch-seo:    var(--la-brand-tertiary-500);
  --ch-lsa:    var(--la-brand-quaternary-500);
  --ch-social: var(--la-status-error-400);
  --ch-lseo:   var(--la-brand-secondary-400);
  --ch-llm:    var(--la-brand-primary-500);

  /* ── Radii → DS rounded signature ─────────────────────────── */
  --r-sm: 12px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* ── Shadows → DS navy-tinted elevation ───────────────────── */
  --sh-1: var(--la-shadow-sm);
  --sh-2: var(--la-shadow-md);
  --sh-3: var(--la-shadow-lg);

  /* ── Type → Jost + Carlito ────────────────────────────────── */
  --ff-display: var(--la-font-display);
  --ff-ui:      var(--la-font-ui);
  /* Aliases used in a few inline styles — all resolve to the DS UI font */
  --ff-text:    var(--la-font-ui);
  --ff-sans:    var(--la-font-ui);
  --ff-body:    var(--la-font-ui);
  --ff-mono:    var(--la-font-mono);
}

/* DS-correct: navy structure for the active nav item (secondary), not the
   action color. Soft navy chip on the white sidebar. */
.nav-item.active {
  background: var(--la-brand-secondary-soft);
  color: var(--la-brand-secondary-700);
  border-color: var(--la-brand-secondary-200);
}
.nav-item.active .nav-icon { color: var(--la-brand-secondary-700); }

/* Account-scope chrome → navy (structure), consistent with the DS */
.loc-sw--account,
.loc-sw--account:hover {
  background: var(--la-brand-secondary-subtle);
  border-color: var(--la-brand-secondary-200);
}
.loc-sw--account .loc-sw-lbl { color: var(--la-brand-secondary-600); }
.loc-sw--account .loc-sw-name::before { background: var(--la-brand-secondary-500); }
.crumb-scope { background: var(--la-brand-secondary-soft); color: var(--la-brand-secondary-700); }
.crumb-scope::before { background: var(--la-brand-secondary-500); }

/* Warm DS orange focus glow */
:focus-visible { outline: none; box-shadow: var(--la-focus-ring); }

/* Page entrance is a transform-only rise (see styles.css @keyframes pageIn) so
   content is always visible even if the animation is throttled/never runs. */
@media (prefers-reduced-motion: reduce) { .page.active { animation: none; } }