@tailwind base;
@tailwind components;
@tailwind utilities;

/* Themes: html[data-theme]; RGB triplets for Tailwind alpha (e.g. bg-panel/95). */
:root,
html[data-theme="blue"] {
  --color-paper: 238 241 248;
  --color-panel: 216 228 242;
  --color-line: 168 184 208;
  --color-mist: 71 85 105;
  --color-ink: 15 23 42;
  --color-clay: 99 102 241;
}

html[data-theme="cream"] {
  --color-paper: 252 250 245;
  --color-panel: 241 236 226;
  --color-line: 214 204 188;
  --color-mist: 87 83 78;
  --color-ink: 15 23 42;
  --color-clay: 120 113 108;
}

html[data-theme="gray"] {
  --color-paper: 244 244 246;
  --color-panel: 232 232 235;
  --color-line: 186 190 198;
  --color-mist: 82 82 91;
  --color-ink: 15 23 42;
  --color-clay: 82 82 91;
}

html[data-theme="lavender"] {
  --color-paper: 247 246 252;
  --color-panel: 234 231 245;
  --color-line: 196 191 220;
  --color-mist: 78 74 98;
  --color-ink: 15 23 42;
  --color-clay: 109 40 217;
}

/* Rem scale: html[data-font-size] from UiSettingsContext / index.html */
html {
  font-size: 100%;
}

html[data-font-size="compact"] {
  font-size: 75%;
}

html[data-font-size="small"] {
  font-size: 90%;
}

html[data-font-size="standard"] {
  font-size: 105%;
}

html[data-font-size="large"] {
  font-size: 120%;
}

html[data-font-size="xlarge"] {
  font-size: 135%;
}

body {
  @apply bg-paper text-ink antialiased min-h-screen;
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.55;
}

::selection {
  background-color: rgb(var(--color-clay) / 0.22);
}

h1,
h2,
h3,
.font-display {
  font-family: "Source Serif 4", Georgia, serif;
}