/* ============================================================
   TabMargin — design tokens (single source of truth)
   Linked from both newtab.html and popup.html, before their
   component stylesheets.
   ============================================================ */

:root {
  /* Light — warm paper */
  --bg-canvas: #f7f3ec;
  --bg-recessed: #efeae0;
  --bg-elevated: #fcf9f3;
  --ink-primary: #2a2520;
  --ink-secondary: #6f6055;
  --ink-tertiary: #9d9181;
  --accent: #b87055;
  --accent-soft: #e8d5cc;
  --on-accent: #fff7ef;
  --danger: #9e4a3c;
  --danger-soft: #ecd9d3;
  --grain-opacity: 0.035;
  --grain-blend: multiply;

  /* Theme-independent */
  --font-ui: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas: #1a1612;
    --bg-recessed: #141008;
    --bg-elevated: #221d17;
    --ink-primary: #ebe2d4;
    --ink-secondary: #8a7e72;
    --ink-tertiary: #5a5048;
    --accent: #d99373;
    --accent-soft: #3a2820;
    --on-accent: #2a1f18;
    --danger: #d98b7d;
    --danger-soft: #3a221d;
    --grain-opacity: 0.05;
    --grain-blend: screen;
  }
}

:root[data-theme="dark"] {
  --bg-canvas: #1a1612;
  --bg-recessed: #141008;
  --bg-elevated: #221d17;
  --ink-primary: #ebe2d4;
  --ink-secondary: #8a7e72;
  --ink-tertiary: #5a5048;
  --accent: #d99373;
  --accent-soft: #3a2820;
  --on-accent: #2a1f18;
  --danger: #d98b7d;
  --danger-soft: #3a221d;
  --grain-opacity: 0.05;
  --grain-blend: screen;
}

:root[data-theme="light"] {
  --bg-canvas: #f7f3ec;
  --bg-recessed: #efeae0;
  --bg-elevated: #fcf9f3;
  --ink-primary: #2a2520;
  --ink-secondary: #6f6055;
  --ink-tertiary: #9d9181;
  --accent: #b87055;
  --accent-soft: #e8d5cc;
  --on-accent: #fff7ef;
  --danger: #9e4a3c;
  --danger-soft: #ecd9d3;
  --grain-opacity: 0.035;
  --grain-blend: multiply;
}