/* ─── Theme System ────────────────────────────────────────────────────────── */
/*                                                                             */
/*  Four seeds define everything: --color-bg, --color-text, --accent, --away   */
/*  All other colors are derived via color-mix() in oklch space.               */
/*  Change the seeds, the whole UI follows.                                    */
/*                                                                             */
/*  --away is the extreme: white on light, black on dark.                      */
/*  --lift-* steps toward it (lighter, softer, less contrast).                 */
/*  --push-* steps toward text (heavier, more contrast).                       */
/*                                                                             */
/* ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Seeds ──────────────────────────────────────────────────────────────── */
  --color-bg:   #e0e0e0;
  --color-text: #454545;
  --accent:     #ff5722;
  --away:       white;

  /* ─── Lift Scale (bg → away) ─────────────────────────────────────────────── */
  --lift-10: color-mix(in oklch, var(--color-bg), var(--away) 10%);
  --lift-20: color-mix(in oklch, var(--color-bg), var(--away) 20%);
  --lift-40: color-mix(in oklch, var(--color-bg), var(--away) 40%);
  --lift-50: color-mix(in oklch, var(--color-bg), var(--away) 50%);
  --lift-60: color-mix(in oklch, var(--color-bg), var(--away) 60%);
  --lift-80: color-mix(in oklch, var(--color-bg), var(--away) 80%);

  /* ─── Push Scale (bg → text) ─────────────────────────────────────────────── */
  --push-10: color-mix(in oklch, var(--color-bg), var(--color-text) 10%);
  --push-20: color-mix(in oklch, var(--color-bg), var(--color-text) 20%);
  --push-40: color-mix(in oklch, var(--color-bg), var(--color-text) 40%);
  --push-50: color-mix(in oklch, var(--color-bg), var(--color-text) 50%);
  --push-60: color-mix(in oklch, var(--color-bg), var(--color-text) 60%);
  --push-80: color-mix(in oklch, var(--color-bg), var(--color-text) 80%);

  /* ─── Effects ────────────────────────────────────────────────────────────── */
  --marked-fx:  url(pen-brushes-8.svg);
  --deleted-fx: url(pen-brushes-9.svg);

  /* ─── Chart Palette (accent stepped toward text for contrast) ──────────── */
  --chart-p1: var(--accent);
  --chart-p2: color-mix(in oklch, var(--accent), var(--color-text) 15%);
  --chart-p3: color-mix(in oklch, var(--accent), var(--color-text) 30%);
  --chart-p4: color-mix(in oklch, var(--accent), var(--color-text) 45%);
  --chart-p5: color-mix(in oklch, var(--accent), var(--color-text) 60%);
  --chart-p6: color-mix(in oklch, var(--accent), var(--color-text) 75%);

  /* ─── Chart Structural ───────────────────────────────────────────────────── */
  --chart-fg:          var(--color-text);
  --chart-dim:         var(--push-50);
  --chart-grid:        var(--push-10);
  --chart-bg:          var(--color-bg);
  --chart-surface:     var(--lift-10);
  --chart-node-fill:   var(--lift-10);
  --chart-node-stroke: var(--push-10);
  --chart-edge-stroke: var(--push-10);
  --chart-font:        var(--font-sans);
  --chart-mono:        var(--font-mono);

  /* ─── Typography ─────────────────────────────────────────────────────────── */
  --font-sans:  "Instrument Sans", Helvetica, sans-serif;
  --font-serif: "Instrument Serif", Times, serif;
  --font-mono:  "SF Mono", Monaco, Consolas, "Liberation Mono", monospace;

  /* ─── Layout ─────────────────────────────────────────────────────────────── */
  --panel-width:   min(80vw, calc(100vw - 320px));
  --header-height: 64px;

}

/* ─── Dark Theme ──────────────────────────────────────────────────────────── */
/*  Only the four seeds change. Everything else recalculates.                  */

[data-theme="dark"] {
  --color-bg:   #393939;
  --color-text: #e8e8e8;
  --accent:     #ffc107;
  --away:       black;
}

/* ─── Dark Mode Image Treatment ───────────────────────────────────────────── */

[data-theme="dark"] img {
  filter: brightness(0.8) grayscale(1);
  transition: filter 0.3s ease;
}

[data-theme="dark"] img:hover,
[data-theme="dark"] img:active {
  filter: brightness(1) grayscale(0);
}

/* ─── Theme Toggle Icons ──────────────────────────────────────────────────── */

.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }