/* ==========================================================================
   Plek v5 → Cohere bridge — v5.1
   --------------------------------------------------------------------------
   Load order on migrated surfaces ONLY (landing/, app/):

       core.css  →  design/tokens.css  →  design/bridge.css

   case_study/ must load none of this. It keeps rendering from core.css
   unchanged. See DESIGN.md § Coexistence.

   What this file does: remaps the Cohere token names that landing/ and app/
   still consume onto their v5 equivalents, and overrides the four shared
   core.css classes that violate v5 outright. That converts both surfaces
   without editing a single line of core.css — so nothing frozen can break.

   Retire an entry only when its last migrated consumer is gone.
   ========================================================================== */

:root {
  /* ── Ground / ink ───────────────────────────────────────────────────── */
  --bg: var(--canvas);
  --bg-muted: var(--surface);
  --panel: var(--canvas);
  --panel-muted: var(--surface);
  --soft-stone: var(--surface);
  --content-bg: var(--canvas);
  --sidebar-bg: var(--surface);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-secondary);
  --ink-2: var(--ink-secondary);
  --slate: var(--muted);

  --hairline: var(--border);
  --divider-contrast: var(--border);
  --rule: var(--border);
  --avatar-ring: var(--border-strong);

  /* ── Accent ─────────────────────────────────────────────────────────── */
  /* Both gradient stops resolve to the same flat teal, so every
     linear-gradient(--grad-a, --grad-b) in core.css renders as a solid
     --signal-strong fill. No gradients on controls, no CSS edits needed. */
  --grad-a: var(--signal-strong);
  --grad-b: var(--signal-strong);

  --accent: var(--signal);
  --accent-dark: var(--signal-strong);
  --accent-bg: var(--signal-soft);
  --action-blue: var(--signal-strong);
  --brand: var(--ink);

  /* ── Chart entities — mapped by meaning, not by hue ─────────────────── */
  --cognitive-accent: var(--chart-1);
  --manual-accent: var(--chart-2);
  --accent-ai: var(--chart-3);
  --accent-ai-bg: var(--surface);
  --coral: var(--chart-2);
  --coral-soft: var(--border-strong);
  --deep-green: var(--dark);
  --navy: var(--dark);
  --success-fg: var(--success);

  /* ── Depth — v5 bans shadows and glassmorphism outright ─────────────── */
  --shadow-soft: none;
  --shadow-glow: none;
  --glass-shadow: none;
  --glass-bg: var(--canvas);
  --glass-border: var(--border);

  /* ── Shape ──────────────────────────────────────────────────────────── */
  --r-xs: var(--radius-xs);
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-card);
  --r-lg: var(--radius-card);
  --r-xl: var(--radius-pill);
  --r-pill: var(--radius-pill);

  /* NOT bridged on purpose: --font-2xl … --font-xs. The app's type scale
     bottoms out at 0.65rem and its body sits at 0.85rem; remapping it onto
     the v5 scale reflows every dashboard at once. Migrate it as its own
     step, screen by screen, against DESIGN.md § Typography. */
}

/* ==========================================================================
   Shared core.css classes that violate v5. Overridden here rather than
   edited in place, because case_study/ still depends on them.
   ========================================================================== */

/* Eyebrows are Inter, never mono — v5 retires the mono eyebrow. */
.mono-label {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

/* The primary pill: flat, teal, 14px/500, ink focus ring. */
.btn-gradient-pill {
  background: var(--signal-strong);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-button);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 12px 26px;
  transition: background-color var(--dur-hover) ease-out;
}
.btn-gradient-pill:hover { background: var(--signal-strong-hover); opacity: 1; }
.btn-gradient-pill:active { background: var(--signal-strong-hover); transform: none; }
.btn-gradient-pill:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}
.btn-gradient-pill:disabled {
  background: var(--surface);
  color: var(--ink-disabled);
  opacity: 1;
  cursor: not-allowed;
}

/* No glassmorphism, no shadows — a card is surface + radius + air. */
.glass-panel {
  background: var(--surface);
  border: none;
  border-radius: var(--radius-card);
  padding: var(--space-8);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.glass-panel h1 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
  font-size: var(--text-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

/* Gradient text and the glow button have no place in the system. */
.gradient-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}
.glow-button {
  background: var(--signal-strong);
  border-radius: var(--radius-pill);
  box-shadow: none;
  font-size: var(--text-button);
  font-weight: var(--weight-medium);
  padding: 12px 26px;
}
.glow-button:hover { background: var(--signal-strong-hover); transform: none; box-shadow: none; }

/* The text wordmark and its gradient dot are gone from every template — the
   shipped lockup replaced them — so the overrides that used to neutralise
   them here have nothing left to match. */