collavre 0.3.2 → 0.5.0

data/app/assets/stylesheets/collavre/dark_mode.css

@@ -1,100 +1,97 @@
-/* 다크모드 변수 및 스타일 */
+/*
+ * Theme Application
+ *
+ * Maps semantic tokens from design_tokens.css to legacy variable names
+ * (for backward compatibility) and applies base element styles.
+ *
+ * NEW CODE should use semantic tokens directly (e.g. var(--surface-bg)).
+ * Legacy aliases below will be removed once all CSS files are migrated.
+ */
+
+/* ============================================================================
+ * LEGACY ALIASES → Semantic Tokens
+ * These keep existing CSS working while we migrate file-by-file.
+ *
+ * NOTE: Legacy aliases use var() to reference semantic tokens. Because CSS
+ * custom properties resolve var() at computed-value time on the element where
+ * they are defined, aliases on :root resolve against :root's own token values
+ * (light). To make them pick up dark-mode overrides, we must ALSO redefine
+ * them inside body.dark-mode and the prefers-color-scheme media query.
+ * ============================================================================ */
 :root {
-  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
-    sans-serif;
-  --color-bg: #f7f7f8;
-  --color-text: #202123;
-  --color-link: #185ABC;
-  --color-nav-bg: #ffffff;
-  --color-section-bg: #ffffff;
-  --color-btn-bg: #f1f2f4;
-  --color-btn-text: #202123;
-  --color-border: #e0e0e0;
-  --color-muted: #666;
-  --color-complete: oklch(60% 0.4 145);
-  --color-chip-bg: var(--color-complete);
-  --color-drag-over: #e0e0e0;
-  --color-drag-over-edge: #bbb;
-  --hover-brightness: 90%;
-  --color-badge-bg: red;
-  --color-badge-bg: red;
-  --color-badge-text: white;
-  --color-secondary-active: #007bff;
-  --color-secondary-background: #ffffff;
-  --color-nav-btn-text: #202123;
-  --color-chat-btn-text: #666;
-  --color-input-bg: #f7f7f8;
-  --color-input-bg: #f7f7f8;
-  --color-input-text: #202123;
-  --color-nav-text: #202123;
-  --max-width: 960px;
-  --paragraph-space-1: 0.75rem;
+  /* Surface aliases */
+  --color-bg: var(--surface-bg);
+  --color-nav-bg: var(--surface-nav);
+  --color-section-bg: var(--surface-section);
+  --color-input-bg: var(--surface-input);
+  --color-btn-bg: var(--surface-btn);
+  --color-secondary-background: var(--surface-secondary);
+
+  /* Text aliases */
+  --color-text: var(--text-primary);
+  --color-muted: var(--text-muted);
+  --color-btn-text: var(--text-on-btn);
+  --color-nav-text: var(--text-nav);
+  --color-nav-btn-text: var(--text-nav-btn);
+  --color-chat-btn-text: var(--text-chat-btn);
+  --color-badge-text: var(--text-on-badge);
+  --color-input-text: var(--text-input);
+
+  /* Interactive aliases */
+  --color-complete: var(--color-brand);
+  --color-chip-bg: var(--color-brand);
+  --color-secondary-active: var(--color-active);
+
+  /* Border aliases */
+  --color-border: var(--border-color);
+  --color-drag-over: var(--border-drag-over);
+  --color-drag-over-edge: var(--border-drag-edge);
+
+  /* Layout aliases */
+  --paragraph-space-1: var(--paragraph-space);
 }
 
+/* Dark-mode legacy aliases — must mirror :root aliases so var() resolves
+   against body.dark-mode's semantic token values, not :root's. */
 body.dark-mode {
-  --color-bg: #212121;
-  --color-text: #eaeaea;
-  --color-link: #185ABC;
-  --color-nav-bg: #181818;
-  --color-section-bg: #181818;
-  --color-btn-bg: #333543;
-  --color-btn-text: #eaeaea;
-  --color-border: #333333;
-  --color-muted: #aaaaaa;
-  --color-complete: oklch(50% 0.4 145);
-  --color-chip-bg: var(--color-complete);
-  --color-drag-over: #383a40;
-  --color-drag-over-edge: #777;
-  --hover-brightness: 110%;
-  --color-badge-bg: red;
-  --color-badge-text: white;
-  --color-secondary-active: #6a9eff;
-  --color-secondary-background: #181818;
-  --color-nav-btn-text: #eaeaea;
-  --color-chat-btn-text: #aaaaaa;
-  --color-input-bg: #212121;
-  --color-input-bg: #212121;
-  --color-input-text: #eaeaea;
-  --color-nav-text: #eaeaea;
-}
-
-@media (prefers-color-scheme: dark) {
-  body:not(.light-mode):not(.dark-mode) {
-    --color-bg: #212121;
-    --color-text: #eaeaea;
-    --color-link: #185ABC;
-    --color-nav-bg: #181818;
-    --color-section-bg: #181818;
-    --color-btn-bg: #333543;
-    --color-btn-text: #eaeaea;
-    --color-border: #333333;
-    --color-muted: #aaaaaa;
-    --color-complete: oklch(50% 0.4 145);
-    --color-chip-bg: var(--color-complete);
-    --color-drag-over: #383a40;
-    --color-drag-over-edge: #777;
-    --hover-brightness: 110%;
-    --color-badge-bg: red;
-    --color-badge-text: white;
-    --color-secondary-active: #6a9eff;
-    --color-secondary-background: #181818;
-    --color-nav-btn-text: #eaeaea;
-    --color-chat-btn-text: #aaaaaa;
-    --color-input-bg: #212121;
-    --color-input-bg: #212121;
-    --color-input-text: #eaeaea;
-    --color-nav-text: #eaeaea;
-  }
+  --color-bg: var(--surface-bg);
+  --color-nav-bg: var(--surface-nav);
+  --color-section-bg: var(--surface-section);
+  --color-input-bg: var(--surface-input);
+  --color-btn-bg: var(--surface-btn);
+  --color-secondary-background: var(--surface-secondary);
+  --color-text: var(--text-primary);
+  --color-muted: var(--text-muted);
+  --color-btn-text: var(--text-on-btn);
+  --color-nav-text: var(--text-nav);
+  --color-nav-btn-text: var(--text-nav-btn);
+  --color-chat-btn-text: var(--text-chat-btn);
+  --color-badge-text: var(--text-on-badge);
+  --color-input-text: var(--text-input);
+  --color-complete: var(--color-brand);
+  --color-chip-bg: var(--color-brand);
+  --color-secondary-active: var(--color-active);
+  --color-border: var(--border-color);
+  --color-drag-over: var(--border-drag-over);
+  --color-drag-over-edge: var(--border-drag-edge);
 }
 
+/* ============================================================================
+ * BASE ELEMENT STYLES
+ * ============================================================================ */
 body {
-  background: var(--color-bg);
-  color: var(--color-text);
+  background: var(--surface-bg);
+  color: var(--text-primary);
+  color-scheme: var(--color-scheme, light);
   transition: background 0.3s, color 0.3s;
 }
 
+body.dark-mode {
+  color-scheme: var(--color-scheme, dark);
+}
+
 nav {
-  background: var(--color-nav-bg);
+  background: var(--surface-nav);
 }
 
 a {
@@ -103,7 +100,7 @@ a {
 
 main,
 section.creative {
-  background: var(--color-section-bg);
+  background: var(--surface-section);
 }
 
 button,
@@ -115,4 +112,140 @@ input[type="submit"] {
   transition: background 0.3s, color 0.3s;
 }
 
-/* 기타 요소도 필요에 따라 추가 가능 */
+/* ============================================================================
+ * UI COMPONENT CLASSES
+ * Reusable button, badge, and chip styles built on design tokens.
+ * ============================================================================ */
+
+/* --- Buttons --- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35em;
+  padding: 0.45em 0.9em;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.4;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-2, 4px);
+  background: var(--surface-btn);
+  color: var(--text-on-btn);
+  cursor: pointer;
+  text-decoration: none;
+  transition: filter 0.15s, background 0.15s;
+}
+
+.btn:hover {
+  filter: brightness(var(--hover-brightness, 0.95));
+}
+
+.btn-primary {
+  background: var(--color-brand);
+  color: var(--text-on-badge);
+  border-color: var(--color-brand);
+}
+
+.btn-secondary {
+  background: var(--surface-secondary);
+  color: var(--text-primary);
+  border-color: var(--border-color);
+}
+
+.btn-success {
+  background: color-mix(in srgb, var(--color-success) 12%, transparent);
+  color: var(--color-success);
+  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
+}
+
+.btn-success:hover {
+  background: var(--color-success);
+  color: var(--text-on-badge);
+}
+
+.btn-danger {
+  background: transparent;
+  color: var(--color-danger);
+  border-color: var(--color-danger);
+}
+
+.btn-danger:hover {
+  background: var(--color-danger);
+  color: var(--text-on-badge);
+}
+
+/* --- Date/time input placeholder text --- */
+
+input[type="date"]::-webkit-datetime-edit-text,
+input[type="date"]::-webkit-datetime-edit-month-field,
+input[type="date"]::-webkit-datetime-edit-day-field,
+input[type="date"]::-webkit-datetime-edit-year-field,
+input[type="datetime-local"]::-webkit-datetime-edit-text,
+input[type="datetime-local"]::-webkit-datetime-edit-month-field,
+input[type="datetime-local"]::-webkit-datetime-edit-day-field,
+input[type="datetime-local"]::-webkit-datetime-edit-year-field,
+input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
+input[type="datetime-local"]::-webkit-datetime-edit-minute-field {
+  color: var(--text-muted);
+}
+
+.btn-sm {
+  padding: 0.25em 0.55em;
+  font-size: 0.8rem;
+}
+
+.btn-xs {
+  padding: 0.15em 0.4em;
+  font-size: 0.75rem;
+}
+
+/* --- Badges --- */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.2em;
+  padding: 0.05em 0.35em;
+  font-size: 0.65rem;
+  font-weight: 600;
+  line-height: 1;
+  border-radius: var(--radius-round, 9999px);
+  background: var(--color-badge-bg);
+  color: var(--text-on-badge);
+}
+
+.badge-success {
+  background: var(--color-success);
+}
+
+.badge-danger {
+  background: var(--color-danger);
+}
+
+.badge-warning {
+  background: var(--color-warning);
+}
+
+/* --- Chips (contact tags, etc.) --- */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3em;
+  padding: 0.2em 0.6em;
+  font-size: 0.8rem;
+  line-height: 1.3;
+  border-radius: var(--radius-round, 9999px);
+  background: var(--surface-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+
+.chip-active {
+  background: var(--color-brand);
+  color: var(--text-on-badge);
+  border-color: var(--color-brand);
+}
+
+/* --- Inline utility --- */
+.inline-block {
+  display: inline-block;
+}

data/app/assets/stylesheets/collavre/design_tokens.css

@@ -0,0 +1,334 @@
+/*
+ * Collavre Design Tokens
+ *
+ * Based on Open Props (https://open-props.style) scale system.
+ * This file defines all design tokens used across Collavre.
+ * DO NOT hardcode raw values in component CSS — use these tokens instead.
+ *
+ * Enforced by Stylelint (stylelint.config.mjs)
+ */
+
+/* ============================================================================
+ * SPACING (from Open Props --size-*)
+ * Usage: padding, margin, gap
+ * ============================================================================ */
+:root {
+  /* -- Color scheme -- */
+  --color-scheme: light;             /* light | dark — used by native controls */
+
+  --space-000: -0.5rem;   /* -8px */
+  --space-00: -0.25rem;   /* -4px */
+  --space-1: 0.25rem;     /* 4px */
+  --space-2: 0.5rem;      /* 8px */
+  --space-3: 1rem;        /* 16px */
+  --space-4: 1.25rem;     /* 20px */
+  --space-5: 1.5rem;      /* 24px */
+  --space-6: 1.75rem;     /* 28px */
+  --space-7: 2rem;        /* 32px */
+  --space-8: 3rem;        /* 48px */
+  --space-9: 4rem;        /* 64px */
+  --space-10: 5rem;       /* 80px */
+  --space-11: 7.5rem;     /* 120px */
+  --space-12: 10rem;      /* 160px */
+
+  /* Pixel variants (for when rem isn't appropriate) */
+  --space-px-1: 4px;
+  --space-px-2: 8px;
+  --space-px-3: 16px;
+  --space-px-4: 20px;
+  --space-px-5: 24px;
+  --space-px-6: 28px;
+  --space-px-7: 32px;
+  --space-px-8: 48px;
+
+  /* ============================================================================
+   * TYPOGRAPHY (from Open Props --font-size-*, --font-weight-*, --font-lineheight-*)
+   * ============================================================================ */
+
+  /* Font families */
+  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono: "Dank Mono", "Operator Mono", "Inconsolata", "Fira Mono",
+    ui-monospace, "SF Mono", Monaco, "Droid Sans Mono", "Source Code Pro",
+    "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+
+  /* Font sizes */
+  --text-00: 0.5rem;      /* 8px — tiny labels */
+  --text-0: 0.75rem;      /* 12px — small/caption */
+  --text-1: 1rem;         /* 16px — body (base) */
+  --text-2: 1.1rem;       /* 17.6px — slightly larger body */
+  --text-3: 1.25rem;      /* 20px — subheading */
+  --text-4: 1.5rem;       /* 24px — heading */
+  --text-5: 2rem;         /* 32px — large heading */
+  --text-6: 2.5rem;       /* 40px — display */
+  --text-7: 3rem;         /* 48px — hero */
+  --text-8: 3.5rem;       /* 56px — jumbo */
+
+  /* Font weights */
+  --weight-1: 100;        /* thin */
+  --weight-2: 200;        /* extra-light */
+  --weight-3: 300;        /* light */
+  --weight-4: 400;        /* regular */
+  --weight-5: 500;        /* medium */
+  --weight-6: 600;        /* semi-bold */
+  --weight-7: 700;        /* bold */
+  --weight-8: 800;        /* extra-bold */
+  --weight-9: 900;        /* black */
+
+  /* Line heights */
+  --leading-00: 0.95;     /* tight — headings */
+  --leading-0: 1.1;       /* compact */
+  --leading-1: 1.25;      /* snug */
+  --leading-2: 1.375;     /* normal */
+  --leading-3: 1.5;       /* relaxed (default body) */
+  --leading-4: 1.75;      /* loose */
+  --leading-5: 2;         /* extra loose */
+
+  /* ============================================================================
+   * BORDERS & RADIUS (from Open Props)
+   * ============================================================================ */
+  --border-1: 1px;
+  --border-2: 2px;
+  --border-3: 5px;
+  --border-4: 10px;
+
+  --radius-1: 2px;        /* subtle */
+  --radius-2: 5px;        /* default */
+  --radius-3: 1rem;       /* medium */
+  --radius-4: 2rem;       /* large */
+  --radius-5: 4rem;       /* pill-like */
+  --radius-round: 1e5px;  /* circle */
+
+  /* ============================================================================
+   * SHADOWS (from Open Props)
+   * ============================================================================ */
+  --shadow-color: 220 3% 15%;
+  --shadow-strength: 1%;
+
+  --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
+  --shadow-2:
+    0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
+  --shadow-3:
+    0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
+  --shadow-4:
+    0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+    0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+    0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+    0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
+
+  /* ============================================================================
+   * EASING & ANIMATION (from Open Props)
+   * ============================================================================ */
+  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
+  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
+  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
+  --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
+  --ease-in-2: cubic-bezier(0.50, 0, 1, 1);
+  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
+  --ease-out-2: cubic-bezier(0, 0, 0.50, 1);
+  --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
+
+  /* ============================================================================
+   * Z-INDEX LAYERS
+   * ============================================================================ */
+  --layer-1: 1;
+  --layer-2: 2;
+  --layer-3: 3;
+  --layer-4: 4;
+  --layer-5: 5;
+  --layer-popup: 100;
+  --layer-modal: 1000;
+  --layer-toast: 2000;
+  --layer-important: 2147483647;
+
+  /* ============================================================================
+   * BREAKPOINTS (reference only — use in @media queries)
+   * ============================================================================ */
+  /* --bp-xs: 360px;  */
+  /* --bp-sm: 480px;  */
+  /* --bp-md: 768px;  */
+  /* --bp-lg: 1024px; */
+  /* --bp-xl: 1440px; */
+
+  /* ============================================================================
+   * SEMANTIC COLOR TOKENS
+   * These map Open Props primitives → meaningful roles.
+   * Every token here MUST also be defined in body.dark-mode below.
+   * ============================================================================ */
+
+  /* -- Surfaces (backgrounds) -- */
+  --surface-bg: #f7f7f8;              /* page background */
+  --surface-nav: #ffffff;             /* navigation bar */
+  --surface-section: #ffffff;         /* cards, panels */
+  --surface-input: #f7f7f8;          /* form inputs */
+  --surface-btn: #f1f2f4;            /* default button */
+  --surface-secondary: #ffffff;       /* secondary panels */
+
+  /* -- Text -- */
+  --text-primary: #202123;           /* main body text */
+  --text-muted: #666666;             /* secondary / helper text */
+  --text-on-btn: #202123;            /* text on default buttons */
+  --text-nav: #202123;               /* navigation text */
+  --text-nav-btn: #202123;           /* navigation button text */
+  --text-chat-btn: #666666;          /* chat action buttons */
+  --text-on-badge: white;            /* text on badges */
+  --text-input: #202123;             /* input field text */
+
+  /* -- Interactive -- */
+  --color-link: #185ABC;             /* hyperlinks */
+  --color-brand: oklch(60% 0.4 145); /* brand / accent / complete */
+  --color-active: #007bff;           /* active / selected state */
+  --color-danger: #dc3545;           /* errors, destructive */
+  --color-success: oklch(60% 0.4 145); /* success (= brand for now) */
+  --color-warning: #f59e0b;          /* warnings */
+  --color-highlight: #ffff99;         /* highlight flash */
+  --color-badge-bg: red;             /* notification badge */
+  --color-accent-border: #7bc4e4;    /* active element border */
+  --color-accent-text: #03425f;      /* active element text */
+  --color-code-bg: #f6f8fa;          /* code block background */
+  --color-code-text: #1f2328;        /* code block text */
+
+  /* -- Borders & Dividers -- */
+  --border-color: #e0e0e0;           /* default borders */
+  --border-drag-over: #e0e0e0;       /* drag target highlight */
+  --border-drag-edge: #bbbbbb;       /* drag edge indicator */
+
+  /* -- Effects -- */
+  --hover-brightness: 90%;           /* filter: brightness() on hover */
+
+  /* -- Layout -- */
+  --max-width: 960px;                /* content max width */
+  --paragraph-space: 0.75rem;        /* gap between paragraphs */
+}
+
+/* ============================================================================
+ * DATE INPUT — Native controls follow the theme's color-scheme token.
+ * Each theme sets --color-scheme: light | dark, and the browser renders
+ * native icons (calendar picker, dropdown arrows) accordingly.
+ * ============================================================================ */
+input[type="date"],
+input[type="datetime-local"] {
+  color-scheme: var(--color-scheme, light);
+}
+
+/* ============================================================================
+ * DARK MODE OVERRIDES
+ * Every semantic token that changes in dark mode MUST be listed here.
+ * ============================================================================ */
+body.dark-mode {
+  --color-scheme: dark;
+  --shadow-color: 220 40% 2%;
+  --shadow-strength: 25%;
+
+  /* -- Surfaces -- */
+  --surface-bg: #212121;
+  --surface-nav: #181818;
+  --surface-section: #181818;
+  --surface-input: #212121;
+  --surface-btn: #333543;
+  --surface-secondary: #181818;
+
+  /* -- Text -- */
+  --text-primary: #eaeaea;
+  --text-muted: #aaaaaa;
+  --text-on-btn: #eaeaea;
+  --text-nav: #eaeaea;
+  --text-nav-btn: #eaeaea;
+  --text-chat-btn: #aaaaaa;
+  --text-on-badge: white;
+  --text-input: #eaeaea;
+
+  /* -- Interactive -- */
+  --color-link: #185ABC;
+  --color-brand: oklch(50% 0.4 145);
+  --color-active: #6a9eff;
+  --color-badge-bg: red;
+  --color-highlight: #665500;
+  --color-accent-border: #4a8aaa;
+  --color-accent-text: #8ecfef;
+  --color-code-bg: #2d2d2d;
+  --color-code-text: #e0e0e0;
+
+  /* -- Borders & Dividers -- */
+  --border-color: #333333;
+  --border-drag-over: #383a40;
+  --border-drag-edge: #777777;
+
+  /* -- Effects -- */
+  --hover-brightness: 110%;
+
+}
+
+/* ============================================================================
+ * SYSTEM DARK MODE (prefers-color-scheme)
+ * Mirror of body.dark-mode for users without explicit toggle.
+ * ============================================================================ */
+@media (prefers-color-scheme: dark) {
+  body:not(.light-mode):not(.dark-mode) {
+    color-scheme: dark;
+    --color-scheme: dark;
+    --shadow-color: 220 40% 2%;
+    --shadow-strength: 25%;
+
+    --surface-bg: #212121;
+    --surface-nav: #181818;
+    --surface-section: #181818;
+    --surface-input: #212121;
+    --surface-btn: #333543;
+    --surface-secondary: #181818;
+
+    --text-primary: #eaeaea;
+    --text-muted: #aaaaaa;
+    --text-on-btn: #eaeaea;
+    --text-nav: #eaeaea;
+    --text-nav-btn: #eaeaea;
+    --text-chat-btn: #aaaaaa;
+    --text-on-badge: white;
+    --text-input: #eaeaea;
+
+    --color-link: #185ABC;
+    --color-brand: oklch(50% 0.4 145);
+    --color-active: #6a9eff;
+    --color-badge-bg: red;
+    --color-highlight: #665500;
+    --color-accent-border: #4a8aaa;
+    --color-accent-text: #8ecfef;
+    --color-code-bg: #2d2d2d;
+    --color-code-text: #e0e0e0;
+
+    --border-color: #333333;
+    --border-drag-over: #383a40;
+    --border-drag-edge: #777777;
+
+    --hover-brightness: 110%;
+
+    /* Legacy aliases — must be redefined here so var() resolves against
+       the dark semantic tokens above, not :root's light values. */
+    --color-bg: var(--surface-bg);
+    --color-nav-bg: var(--surface-nav);
+    --color-section-bg: var(--surface-section);
+    --color-input-bg: var(--surface-input);
+    --color-btn-bg: var(--surface-btn);
+    --color-secondary-background: var(--surface-secondary);
+    --color-text: var(--text-primary);
+    --color-muted: var(--text-muted);
+    --color-btn-text: var(--text-on-btn);
+    --color-nav-text: var(--text-nav);
+    --color-nav-btn-text: var(--text-nav-btn);
+    --color-chat-btn-text: var(--text-chat-btn);
+    --color-badge-text: var(--text-on-badge);
+    --color-input-text: var(--text-input);
+    --color-complete: var(--color-brand);
+    --color-chip-bg: var(--color-brand);
+    --color-secondary-active: var(--color-active);
+    --color-border: var(--border-color);
+    --color-drag-over: var(--border-drag-over);
+    --color-drag-over-edge: var(--border-drag-edge);
+  }
+}