1 files changed, 42 insertions, 0 deletions
diff --git a/sass/_tokens.scss b/sass/_tokens.scss
new file mode 100644
index 0000000..a0ed8f3
--- /dev/null
+++ b/sass/_tokens.scss
@@ -0,0 +1,42 @@
+:root {
+  color-scheme: light;
+  --color-bg: #f6f5f1;
+  --color-surface: #fbfaf7;
+  --color-text: #202124;
+  --color-muted: #666b70;
+  --color-border: #d6d8da;
+  --color-link: #315f82;
+  --color-link-hover: #244a67;
+  --color-focus: #1e668f;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
+  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  --content-max: 72ch;
+  --site-max: 72rem;
+  --rule: 1px solid var(--color-border);
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --color-bg: #17191b;
+  --color-surface: #1d2022;
+  --color-text: #e9e9e6;
+  --color-muted: #a0a3a6;
+  --color-border: #363a3e;
+  --color-link: #86b6d8;
+  --color-link-hover: #add3ed;
+  --color-focus: #86b6d8;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --color-bg: #17191b;
+    --color-surface: #1d2022;
+    --color-text: #e9e9e6;
+    --color-muted: #a0a3a6;
+    --color-border: #363a3e;
+    --color-link: #86b6d8;
+    --color-link-hover: #add3ed;
+    --color-focus: #86b6d8;
+  }
+}