/* Design tokens: colors, type, sizes. Every other stylesheet uses these
   variables only, so a theme is one block here. Dark is the default;
   [data-theme="light"] on #app switches. Contrast: text ≥ 4.5:1 on its
   ground, including white text on --fill. */

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --font: "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "D2Coding", monospace;

  --canvas: #15181c;
  --panel: #22262c;
  --panel2: #2a2f36;
  --line: #373d46;
  --text: #e7eaee;
  --muted: #a0a8b3;
  --hover: #30363e;
  --accent: #4c9aff;
  --ink: var(--accent);
  --fill: #376fb8;
  --on-fill: #fff;
  --tint: color-mix(in srgb, var(--accent) 18%, transparent);
  --warn: #e8b93b;
  --ok: #56c271;
  --danger: #ff7b72;
  --snap: #f59e0b;
  --shadow: 0 10px 28px rgb(0 0 0 / 38%), 0 0 0 1px rgb(255 255 255 / 5%);
  --scrim: rgb(0 0 0 / 35%);

  /* Drawing colors handed to the engine (see app/theme.js). */
  --draw-bg: 21 24 28;
  --draw-fg: 231 234 238;

  --r-panel: 12px;
  --r-tool: 10px;
  --r-input: 8px;
  --gap: 12px;
  --touch: 44px;
  --tool: 48px;
  --left-w: 256px;
  --right-w: 280px;
  --top-h: 52px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

[data-theme="light"] {
  color-scheme: light;
  --canvas: #f3f4f6;
  --panel: #fff;
  --panel2: #f3f4f6;
  --line: #e2e5e9;
  --text: #1b1f24;
  --muted: #56606b;
  --hover: #eef0f3;
  --ink: color-mix(in srgb, var(--accent) 70%, #000);
  --warn: #8a5f00;
  --ok: #1e8e3e;
  --danger: #c9372c;
  --shadow: 0 10px 28px rgb(16 24 40 / 10%), 0 0 0 1px rgb(16 24 40 / 7%);
  --scrim: rgb(16 24 40 / 20%);
  --draw-bg: 243 244 246;
  --draw-fg: 27 31 36;
}