/* ============================================================
   editor-tokens.css: bridge from legacy --color-* tokens
   to the new printshi tokens defined in tokens.css.

   Loaded after global.css and BEFORE editor.css/components.css
   so the editor and templates pages inherit the new brand without
   touching every existing rule.
   ============================================================ */

:root {
  --color-bg:           var(--surface);
  --color-bg-alt:       var(--surface-2);
  --color-bg-elevated:  var(--card);
  --color-surface:      var(--surface-2);
  --color-card:         var(--card);
  --color-border:       var(--border);
  --color-border-focus: var(--accent);
  --color-text:         var(--ink);
  --color-text-soft:    var(--ink-muted);
  --color-text-muted:   var(--ink-subtle);
  --color-accent:       var(--accent);
  --color-accent-hover: var(--accent-ink);
  --color-accent-light: var(--accent-soft);
  --color-success:      var(--success);
  --color-error:        var(--danger);
  --color-warning:      #B2733B;
  --color-info:         var(--accent);

  --font-sans:    var(--sans);
  --font-display: var(--serif);
  --font-mono:    var(--mono);
}

[data-theme="dark"] {
  --color-bg:           var(--surface);
  --color-bg-alt:       var(--surface-2);
  --color-bg-elevated:  var(--card);
  --color-surface:      var(--surface-2);
  --color-card:         var(--card);
  --color-border:       var(--border);
  --color-border-focus: var(--accent);
  --color-text:         var(--ink);
  --color-text-soft:    var(--ink-muted);
  --color-text-muted:   var(--ink-subtle);
  --color-accent:       var(--accent);
  --color-accent-hover: var(--accent-ink);
  --color-accent-light: var(--accent-soft);
  --color-success:      var(--success);
  --color-error:        var(--danger);
  --color-warning:      #D3995A;
  --color-info:         var(--accent);
}

/* light-mode canvas grid: tinted to harmonize with cream surface */
.canvas {
  background:
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    linear-gradient(var(--border) 1px, transparent 1px),
    var(--surface-2) !important;
  background-size: 20px 20px !important;
}
[data-theme="dark"] .canvas {
  background:
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    linear-gradient(var(--border) 1px, transparent 1px),
    var(--surface-2) !important;
}

/* wordmark on the editor toolbar matches the landing brand */
.toolbar__logo {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.toolbar__logo::after {
  content: ".";
  color: var(--accent);
}

/* primary toolbar button uses brand accent */
.toolbar__btn--primary {
  background: var(--accent) !important;
  color: var(--surface) !important;
}
.toolbar__btn--primary:hover { background: var(--accent-ink) !important; }
[data-theme="dark"] .toolbar__btn--primary { color: var(--surface) !important; }