diff --git a/frontend/src/css/_theme-dark.scss b/frontend/src/css/_theme-dark.scss
new file mode 100644
index 0000000..374aaac
--- /dev/null
+++ b/frontend/src/css/_theme-dark.scss
@@ -0,0 +1,30 @@
+$theme-dark: (
+  background: #0e0e0f,
+  primary: #47f3f3,
+  primary-dim: #2ee5e5,
+  tertiary: #64baff,
+  tertiary-dim: #2ea5f3,
+  error: #ff716c,
+  error-dim: #d7383b,
+  outline: #767576,
+  outline-variant: #484849,
+
+  surface: #0e0e0f,
+  surface-bright: #2c2c2d,
+
+  surface-container: #19191b,
+  surface-container-low: #131314,
+  surface-container-lowest: #000000,
+  surface-container-high: #1f1f21,
+  surface-container-highest: #262627,
+  primary-container: #27e2e2,
+  error-container: #9f0519,
+
+  on-primary: #005858,
+  on-primary-fixed: #004343,
+  on-background: #ffffff,
+  on-surface: #ffffff,
+  on-surface-variant: #acaaab,
+  on-error: #490006,
+  on-error-container: #ffa8a3,
+);
diff --git a/frontend/src/css/_theme-light.scss b/frontend/src/css/_theme-light.scss
new file mode 100644
index 0000000..17dcc5d
--- /dev/null
+++ b/frontend/src/css/_theme-light.scss
@@ -0,0 +1,30 @@
+$theme-light: (
+  background: #f8f9fa,
+  primary: #006a6a,
+  primary-dim: #17dcdc,
+  tertiary: #4e8fcb,
+  tertiary-dim: #3f79af,
+  error: #ba1a1a,
+  error-dim: #93000a,
+  outline: #6f7978,
+  outline-variant: #bacac9,
+
+  surface: #f8f9fa,
+  surface-bright: #ffffff,
+
+  surface-container: #edeeef,
+  surface-container-low: #f3f4f5,
+  surface-container-lowest: #ffffff,
+  surface-container-high: #e4e6e7,
+  surface-container-highest: #ffffff,
+  primary-container: #2ee5e5,
+  error-container: #ffdad6,
+
+  on-primary: #ffffff,
+  on-primary-fixed: #002020,
+  on-background: #191c1d,
+  on-surface: #191c1d,
+  on-surface-variant: #475251,
+  on-error: #ffffff,
+  on-error-container: #410002,
+);
diff --git a/frontend/src/css/_tokens.scss b/frontend/src/css/_tokens.scss
new file mode 100644
index 0000000..bc1ab1e
--- /dev/null
+++ b/frontend/src/css/_tokens.scss
@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use './theme-dark' as dark;
+@use './theme-light' as light;
+
+$theme-dark: dark.$theme-dark;
+$theme-light: light.$theme-light;
+
+$radius-sm: 0.25rem;
+$radius-md: 0.375rem;
+$radius-lg: 0.5rem;
+$radius-xl: 0.75rem;
+
+$spacing-1: 0.25rem;
+$spacing-2: 0.5rem;
+$spacing-3: 0.75rem;
+$spacing-4: 1rem;
+$spacing-6: 1.5rem;
+$spacing-8: 2rem;
+
+$transition-fast: 150ms ease;
+$transition-base: 180ms ease;
+
+@mixin emit-theme($theme) {
+  @each $name, $value in $theme {
+    --my-#{$name}: #{$value};
+  }
+}
+
+@mixin emit-semantic-theme() {
+  // App surfaces
+  --my-color-bg-app: var(--my-background);
+  --my-color-bg-surface: var(--my-surface);
+  --my-color-bg-panel: var(--my-surface-container);
+  --my-color-bg-panel-muted: var(--my-surface-container-low);
+  --my-color-bg-elevated: var(--my-surface-container-high);
+  --my-color-bg-interactive: var(--my-surface-container-highest);
+
+  // Text
+  --my-color-text-primary: var(--my-on-surface);
+  --my-color-text-secondary: var(--my-on-surface-variant);
+  --my-color-text-accent: var(--my-primary);
+  --my-color-text-on-accent: var(--my-on-primary);
+  --my-color-text-danger: var(--my-on-error-container);
+
+  // Actions and emphasis
+  --my-color-accent: var(--my-primary);
+  --my-color-accent-strong: var(--my-primary-dim);
+  --my-color-accent-soft: var(--my-primary-container);
+  --my-color-info: var(--my-tertiary);
+  --my-color-info-strong: var(--my-tertiary-dim);
+  --my-color-danger: var(--my-error);
+  --my-color-danger-bg: var(--my-error-container);
+
+  // Inputs and controls
+  --my-color-field-bg: var(--my-surface-container-highest);
+  --my-color-field-border: var(--my-outline-variant);
+  --my-color-field-border-focus: var(--my-primary);
+  --my-color-field-text: var(--my-on-surface);
+  --my-color-field-placeholder: var(--my-on-surface-variant);
+
+  // Borders and states
+  --my-color-border-subtle: var(--my-outline-variant);
+  --my-color-border-strong: var(--my-outline);
+  --my-color-focus: var(--my-primary);
+}
+
+@function theme-dark($token) {
+  @return map.get(dark.$theme-dark, $token);
+}
+
+@function theme-light($token) {
+  @return map.get(light.$theme-light, $token);
+}