/* Visual tokens for ImageLab theme. */
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:wght@300;400;500;600;700&display=swap");

:root {
  --bg: #f6f8fa;
  --panel: #ffffff;
  --panel2: #f6f8fa;
  --line: #d1d9e0;
  --ink: #1f2328;
  --muted: #59636e;
  --faint: #818b98;
  --accent: #0969da;
  --accent2: #1f883d;
  --good: #1a7f37;
  --warn: #9a6700;
  --bad: #cf222e;
  --accent-muted: #ddf4ff;
  --good-muted: #dafbe1;
  --warn-muted: #fff8c5;
  --bad-muted: #ffebe9;
  --code: #f6f8fa;
  --radius: 6px;
  --font-sans: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --shadow-card: 0 0 0 1px #d1d9e040, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f;

  --color-accent-border: #54aeff66;
  --color-accent-emphasis: var(--accent);
  --color-accent-fg: var(--accent);
  --color-accent-muted: var(--accent-muted);
  --color-attention-border: #d4a72c66;
  --color-attention-emphasis: var(--warn);
  --color-attention-fg: var(--warn);
  --color-attention-muted: var(--warn-muted);
  --color-bg-default: var(--panel);
  --color-bg-disabled: #eff2f5;
  --color-bg-emphasis: #25292e;
  --color-bg-inset: var(--code);
  --color-bg-muted: var(--bg);
  --color-border-default: var(--line);
  --color-border-emphasis: var(--faint);
  --color-danger-border: #ff818266;
  --color-danger-emphasis: var(--bad);
  --color-danger-fg: var(--bad);
  --color-danger-muted: var(--bad-muted);
  --color-done-fg: #8250df;
  --color-done-muted: #fbefff;
  --color-fg-default: var(--ink);
  --color-fg-disabled: var(--faint);
  --color-fg-muted: var(--muted);
  --color-fg-on-emphasis: #ffffff;
  --color-primary: var(--accent2);
  --color-primary-emphasis: var(--accent2);
  --color-primary-fg: var(--good);
  --color-primary-muted: var(--good-muted);
  --color-success-emphasis: var(--accent2);
  --color-success-fg: var(--good);
  --color-success-muted: var(--good-muted);
  --radius-full: 9999px;
  --radius-large: 6px;
  --radius-medium: 6px;
  --radius-small: 4px;
  --shadow-floating-small: var(--shadow-card);
  --shadow-resting-medium: var(--shadow-card);
  --shadow-resting-small: var(--shadow-card);
  --shadow-resting-xsmall: 0 0 0 1px #d1d9e040;
  --space-2: 4px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-8: 22px;
  --space-10: 22px;
  --space-12: 34px;
  --space-14: 34px;
  --space-15: 80px;
}

html[data-color-mode="dark"] {
  --bg: #0d1117;
  --panel: #161b22;
  --panel2: #0d1117;
  --line: #3d444d;
  --ink: #e6edf3;
  --muted: #9198a1;
  --faint: #6e7681;
  --accent: #58a6ff;
  --accent2: #3fb950;
  --good: #3fb950;
  --warn: #d29922;
  --bad: #f85149;
  --accent-muted: #121d2f;
  --good-muted: #122117;
  --warn-muted: #2b2111;
  --bad-muted: #2d1117;
  --code: #0d1117;
  --shadow-card: 0 0 0 1px #3d444d, 0 6px 12px -3px #01040980;
  --color-bg-disabled: #21262d;
  --color-bg-emphasis: #161b22;
  --color-done-muted: #23182d;
}