/* ---------- design tokens ---------- */

/* Light palette: a 10% grey ground (#e6e6e6) with the chrome lifted to white,
   mirroring how dark mode lifts its toolbar off a near-black ground.
   Every colour in the UI comes from here. */
:root {
  color-scheme: light;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;

  --bg: #e6e6e6;
  --surface: #ffffff;
  --surface-hover: #ededee;
  --surface-active: #e0e0e2;

  --text: #18181a;
  --text-dim: #6a6a70;
  --icon: #55555d;
  --icon-strong: #18181a;

  --border: #d9d9db;
  --divider: #dcdcde;
  --dropzone: #c2c2c6;
  --dropzone-hover: #9c9ca3;
  --dropzone-tint: #eeeeef;

  --ok: #17945a;
  --link-hover: #4a4a52;

  --toast-bg: #18181a;
  --toast-text: #f7f7f8;
  --toast-border: #18181a;

  --focus-ring: rgba(0, 0, 0, .28);
  --swatch-edge: rgba(0, 0, 0, .16);
  --canvas-edge: rgba(24, 24, 28, .08);

  --shadow-canvas: 0 10px 32px rgba(24, 24, 28, .18);
  --shadow-toolbar: 0 8px 26px rgba(24, 24, 28, .15);
}

/* dark values, applied when the system asks for them... */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0a0a0a;
    --surface: #1f1f21;
    --surface-hover: #2e2e31;
    --surface-active: #3a3a3e;

    --text: #ededed;
    --text-dim: #7a7a7a;
    --icon: #d6d6d6;
    --icon-strong: #ffffff;

    --border: #2c2c2f;
    --divider: #3a3a3e;
    --dropzone: #2e2e2e;
    --dropzone-hover: #4a4a4a;
    --dropzone-tint: #101010;

    --ok: #3ad07f;
    --link-hover: #b4b4bb;

    --toast-bg: #2a2a2d;
    --toast-text: #ededed;
    --toast-border: #3a3a3e;

    --focus-ring: rgba(255, 255, 255, .35);
    --swatch-edge: rgba(0, 0, 0, .25);
    --canvas-edge: transparent;

    --shadow-canvas: 0 24px 70px rgba(0, 0, 0, .65);
    --shadow-toolbar: 0 12px 40px rgba(0, 0, 0, .55);
  }
}

/* ...and when the toggle asks for them, which wins either way */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0a0a0a;
  --surface: #1f1f21;
  --surface-hover: #2e2e31;
  --surface-active: #3a3a3e;

  --text: #ededed;
  --text-dim: #7a7a7a;
  --icon: #d6d6d6;
  --icon-strong: #ffffff;

  --border: #2c2c2f;
  --divider: #3a3a3e;
  --dropzone: #2e2e2e;
  --dropzone-hover: #4a4a4a;
  --dropzone-tint: #101010;

  --ok: #3ad07f;
  --link-hover: #b4b4bb;

  --toast-bg: #2a2a2d;
  --toast-text: #ededed;
  --toast-border: #3a3a3e;

  --focus-ring: rgba(255, 255, 255, .35);
  --swatch-edge: rgba(0, 0, 0, .25);
  --canvas-edge: transparent;

  --shadow-canvas: 0 24px 70px rgba(0, 0, 0, .65);
  --shadow-toolbar: 0 12px 40px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }