/* ═══════════════════════════════════════════════════════════════════
   BRIDGE — legacy token names → our theme
   ═══════════════════════════════════════════════════════════════════
   The app's 2,073 legacy rules don't hardcode colours; they reference
   tokens. So they don't need rewriting — they need re-pointing.

   This file maps every legacy name onto its equivalent in the theme.
   The result: the WHOLE app renders in Warm Paper and responds to a
   theme switch, without touching a single one of those 2,073 rules.

   It loads AFTER the legacy token file so these definitions win.

   This is scaffolding, not the destination. As rules move from
   _legacy.css into structure.css, their entries here become unused
   and can be deleted. When both files are empty, we're done.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Warm Paper names → ours (the invoicing redesign's vocabulary) ── */
  --wp-ink:               var(--ink);
  --wp-ink-secondary:     var(--ink-secondary);
  --wp-ink-muted:         var(--ink-muted);
  --wp-ink-label:         var(--ink-label);
  --wp-ink-icon:          var(--ink-icon);
  --wp-ink-placeholder:   var(--ink-label);
  --wp-bg:                var(--bg);
  --wp-surface:           var(--surface);
  --wp-panel:             var(--panel);
  --wp-panel-footer:      var(--panel-footer);
  --wp-accent:            var(--accent);
  --wp-accent-hover:      var(--accent-hover);
  --wp-accent-tint:       var(--accent-tint);
  --wp-accent-tint-border: var(--accent-tint-border);
  --wp-danger:            var(--danger);
  --wp-hairline:          var(--hairline);
  --wp-hairline-strong:   var(--hairline-strong);
  --wp-rule:              var(--rule);
  --wp-rule-heavy:        var(--wash-ink-strong);
  --wp-radius:            var(--radius);
  --wp-font-heading:      var(--font-heading);
  --wp-font-body:         var(--font-body);
  --wp-shadow-card:       var(--shadow-card);
  --wp-shadow-card-hover: var(--shadow-card-hover);
  --wp-shadow-col:        var(--shadow-col);
  --wp-shadow-modal:      var(--shadow-modal);
  --wp-shadow-btn:        var(--shadow-btn);
  --wp-col-1: var(--col-1);
  --wp-col-2: var(--col-2);
  --wp-col-3: var(--col-3);
  --wp-col-4: var(--col-4);
  --wp-client-grey: var(--card-accent-default);
  --wp-client-blue: var(--accent);
  /* --card-accent is deliberately NOT bridged: it's per-card, set
     inline by the app from each project's own colour. */

  /* ── Ink ── */
  --text-primary:     var(--ink);
  --text-strong:      var(--ink);
  --text-secondary:   var(--ink-secondary);
  --text-tertiary:    var(--ink-muted);
  --text-muted:       var(--ink-muted);
  --text-muted-cool:  var(--ink-icon);
  --text-light:       var(--ink-label);
  --text-lighter:     var(--ink-label);
  --text-placeholder: var(--ink-label);
  --text-on-accent:   var(--on-accent);

  /* ── Surfaces ── */
  --bg-app:     var(--bg);
  --bg-white:   var(--surface);
  --bg-card:    var(--surface);
  --bg-light:   var(--panel);
  --bg-subtle:  var(--panel);
  --bg-input:   var(--surface);
  --bg-cream:   var(--bg);
  --bg-hover:   var(--panel-footer);
  --bg-focus:   var(--accent-tint);
  --gray-50:    var(--panel);
  --gray-100:   var(--panel-footer);
  --gray-200:   var(--hairline-strong);
  --pd-board-bg: var(--bg);

  /* ── Lines ── */
  --border:            var(--hairline-strong);
  --border-default:    var(--hairline-strong);
  --border-light:      var(--hairline);
  --border-lighter:    var(--hairline);
  --blockquote-border: var(--hairline-strong);

  /* ── Nav ── */
  --bg-sidebar:          var(--sidebar-bg);
  --bg-sidebar-hover:    var(--sidebar-hover);
  --text-sidebar:        var(--sidebar-text);
  --text-sidebar-active: var(--sidebar-text-active);
  --border-sidebar:      var(--sidebar-border);

  /* ── Accent ── */
  --accent-active-bg:   var(--accent-tint);
  --accent-active-text: var(--accent);
  --accent-link:        var(--accent);
  --accent-blue:        var(--accent);
  --accent-blue-soft:   var(--accent);
  --indigo:             var(--accent);
  --accent-danger:      var(--danger);
  --panel-bg:           var(--accent-tint);
  --panel-border:       var(--accent-tint-border);

  /* ── Status ── */
  --danger-strong:  var(--danger);
  --danger-deep:    var(--danger);
  --danger-bg:      var(--warn-bg);
  --success:        var(--ok-ink);
  --warning-strong: var(--warn-ink);
  --warning-deep:   var(--warn-ink);
  --warning-bg:     var(--warn-bg);
  --info-bg:        var(--accent-tint);
  --info-border:    var(--accent-tint-border);

  /* ── Shape — Warm Paper is restrained; pill and circle keep their jobs ── */
  --radius-xs:   var(--radius);
  --radius-sm:   var(--radius);
  --radius-md:   var(--radius);
  --radius-lg:   var(--radius);
  --radius-xl:   var(--radius);
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ── Type / misc ── */
  --font-base:      var(--font-body);
  --font-mono:      ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pd-value-font:  var(--font-heading);
  --overlay:        var(--overlay-ink);
  --shadow-modal:   var(--shadow-modal-v);
  --thumb-color:    var(--hairline-strong);
}