diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx
index 204f866..bc67d2b 100644
--- a/src/components/MobileNav.tsx
+++ b/src/components/MobileNav.tsx
@@ -10,9 +10,10 @@ export function MobileNav({ activeView, onChange }: { activeView: AppView; onCha
           type="button"
           className={`mobile-nav-item ${activeView === item.id ? "mobile-nav-item-active" : ""}`}
           onClick={() => onChange(item.id)}
+          aria-current={activeView === item.id ? "page" : undefined}
         >
-          <item.icon size={16} aria-hidden="true" />
-          {item.label}
+          <item.icon size={20} aria-hidden="true" />
+          <span>{item.label}</span>
         </button>
       ))}
     </nav>
diff --git a/src/components/StatusRail.tsx b/src/components/StatusRail.tsx
index 9bb58fd..458c1f1 100644
--- a/src/components/StatusRail.tsx
+++ b/src/components/StatusRail.tsx
@@ -18,13 +18,13 @@ export function StatusRail({ busyAction, syncError, setupStatus }: StatusRailPro
         </div>
       )}
       {syncError && (
-        <div className="status-card" style={{ borderColor: "#ffc9c2", background: "#fff3f1", color: "#9f1c16" }}>
+        <div className="status-card status-card--error">
           <AlertTriangle size={17} aria-hidden="true" />
           {syncError}
         </div>
       )}
       {setupStatus.state === "error" && (
-        <div className="status-card" style={{ borderColor: "#f9e3b0", background: "#fff8e8", color: "#7a4e00" }}>
+        <div className="status-card status-card--warning">
           <AlertTriangle size={17} aria-hidden="true" />
           {setupStatus.message}
         </div>
diff --git a/src/index.css b/src/index.css
index f1b0cb3..91ef1d2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,12 @@
   background: #eef3fb;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    background: #101418;
+  }
+}
+
 * {
   box-sizing: border-box;
 }
@@ -24,8 +30,8 @@ body,
 
 body {
   overflow-x: hidden;
-  background: #eef3fb;
-  color: #202124;
+  background: transparent;
+  color: var(--text, #202124);
   font-family: "Google Sans", "SF Pro Display", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
@@ -67,12 +73,12 @@ textarea:focus-visible {
 }
 
 ::-webkit-scrollbar-track {
-  background: #eef3fb;
+  background: var(--bg, #eef3fb);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #c5d0df;
-  border: 3px solid #eef3fb;
+  background: var(--outline-variant, #c5d0df);
+  border: 3px solid var(--bg, #eef3fb);
   border-radius: 999px;
 }
 
@@ -151,7 +157,7 @@ textarea:focus-visible {
   flex: 0 0 auto;
   place-items: center;
   color: var(--primary, #2563c7);
-  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, #ffffff);
+  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, var(--surface-container-lowest, #ffffff));
   border-radius: 18px;
 }
 
@@ -204,9 +210,9 @@ textarea:focus-visible {
 .icon-button,
 .suggestion-chip,
 .account-pill {
-  color: #202124;
-  background: #ffffff;
-  border-color: #cfd8e6;
+  color: var(--text, #202124);
+  background: var(--surface-container-lowest, #ffffff);
+  border-color: var(--outline-variant, #cfd8e6);
   box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
 }
 
@@ -216,14 +222,14 @@ textarea:focus-visible {
 .icon-button:hover,
 .suggestion-chip:hover,
 .account-pill:hover {
-  background: #f7faff;
+  background: var(--surface-container-low, #f7faff);
   box-shadow: 0 2px 6px rgba(60, 64, 67, 0.12);
 }
 
 .danger-button {
-  color: #9f1c16;
-  background: #fff3f1;
-  border-color: #ffc9c2;
+  color: var(--on-error-container, #410002);
+  background: var(--error-container, #fff3f1);
+  border-color: color-mix(in srgb, var(--error, #ba1a1a) 32%, transparent);
 }
 
 .drawer-nav,
@@ -243,7 +249,7 @@ textarea:focus-visible {
   align-items: center;
   gap: 12px;
   padding: 6px 12px 6px 6px;
-  color: #3c4043;
+  color: var(--text, #3c4043);
   background: transparent;
   border: 0;
   border-radius: 999px;
@@ -253,12 +259,12 @@ textarea:focus-visible {
 }
 
 .nav-item:hover {
-  background: rgba(32, 33, 36, 0.04);
+  background: color-mix(in srgb, var(--text, #202124) 5%, transparent);
 }
 
 .nav-item-active {
-  color: #174ea6;
-  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 92%, #ffffff);
+  color: var(--on-primary-container, #174ea6);
+  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 92%, var(--surface-container-lowest, #ffffff));
 }
 
 .nav-icon-dot {
@@ -267,13 +273,13 @@ textarea:focus-visible {
   height: 44px;
   flex: 0 0 auto;
   place-items: center;
-  color: #174ea6;
-  background: #d2e3fc;
+  color: var(--on-primary-container, #174ea6);
+  background: var(--primary-container, #d2e3fc);
   border-radius: 999px;
 }
 
 .nav-icon-dot-1 {
-  color: #0d652d;
+  color: var(--success, #0d652d);
   background: #ceead6;
 }
 
@@ -288,7 +294,7 @@ textarea:focus-visible {
 }
 
 .nav-item-active .nav-icon-dot {
-  color: #ffffff;
+  color: var(--on-primary, #ffffff);
   background: var(--primary, #2563c7);
 }
 
@@ -297,10 +303,10 @@ textarea:focus-visible {
 .auth-panel,
 .app-card,
 .modal-panel {
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid #d8e1ee;
+  background: var(--surface-container-lowest, #ffffff);
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 22px;
-  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 10px 30px rgba(60, 64, 67, 0.06);
+  box-shadow: var(--elevation-1, 0 1px 2px rgba(60, 64, 67, 0.08), 0 10px 30px rgba(60, 64, 67, 0.06));
 }
 
 .drawer-info-card {
@@ -324,10 +330,11 @@ textarea:focus-visible {
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 5px;
   padding: 6px;
-  background: rgba(255, 255, 255, 0.96);
-  border: 1px solid #d8e1ee;
+  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
+  background: color-mix(in srgb, var(--surface-container-lowest, #ffffff) 92%, transparent);
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 24px;
-  box-shadow: 0 12px 34px rgba(60, 64, 67, 0.16);
+  box-shadow: var(--elevation-2, 0 12px 34px rgba(60, 64, 67, 0.16));
   backdrop-filter: blur(12px);
 }
 
@@ -340,7 +347,7 @@ textarea:focus-visible {
   gap: 4px;
   border: 0;
   border-radius: 16px;
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   background: transparent;
   box-shadow: none;
   font-size: 11px;
@@ -349,12 +356,13 @@ textarea:focus-visible {
 }
 
 .mobile-nav-item:hover {
-  background: #f1f5fb;
+  background: var(--surface-container-low, #f1f5fb);
 }
 
 .mobile-nav-item-active {
   color: var(--primary, #2563c7);
   background: var(--primary-container, #dbe9ff);
+  font-weight: 600;
 }
 
 .top-app-bar {
@@ -393,13 +401,13 @@ textarea:focus-visible {
 }
 
 .top-kicker {
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 13px;
 }
 
 .top-title {
   margin-top: 2px;
-  color: #202124;
+  color: var(--text, #202124);
   font-size: clamp(22px, 3vw, 31px);
   font-weight: 500;
   line-height: 1.12;
@@ -473,7 +481,7 @@ textarea:focus-visible {
 .hero-avatar {
   width: 96px;
   height: 96px;
-  border: 4px solid #ffffff;
+  border: 4px solid var(--surface-container-lowest, #ffffff);
   font-size: 42px;
   font-weight: 500;
   box-shadow: 0 12px 32px rgba(60, 64, 67, 0.16);
@@ -494,7 +502,7 @@ textarea:focus-visible {
 }
 
 .hero-name {
-  color: #202124;
+  color: var(--text, #202124);
   font-size: clamp(36px, 5vw, 56px);
   font-weight: 500;
   line-height: 1.04;
@@ -503,7 +511,7 @@ textarea:focus-visible {
 
 .hero-copy {
   max-width: 620px;
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 16px;
   line-height: 1.55;
 }
@@ -516,8 +524,8 @@ textarea:focus-visible {
   justify-content: flex-start;
   gap: 14px;
   padding: 0 24px;
-  color: #3c4043;
-  background: #ffffff;
+  color: var(--text, #3c4043);
+  background: var(--surface-container-lowest, #ffffff);
   border: 0;
   border-radius: 999px;
   box-shadow: 0 3px 10px rgba(60, 64, 67, 0.12), 0 1px 2px rgba(60, 64, 67, 0.08);
@@ -526,7 +534,7 @@ textarea:focus-visible {
 }
 
 .hero-search-button svg {
-  color: #202124;
+  color: var(--text, #202124);
 }
 
 .hero-stat-row {
@@ -577,21 +585,33 @@ textarea:focus-visible {
   gap: 9px;
   min-height: 42px;
   padding: 10px 14px;
-  border: 1px solid #d8e1ee;
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 18px;
-  background: #ffffff;
-  color: #202124;
+  background: var(--surface-container-lowest, #ffffff);
+  color: var(--text, #202124);
+}
+
+.status-card--error {
+  color: var(--on-error-container, #410002);
+  background: var(--error-container, #ffdad6);
+  border-color: color-mix(in srgb, var(--error, #ba1a1a) 32%, transparent);
+}
+
+.status-card--warning {
+  color: var(--on-warning-container, #291800);
+  background: var(--warning-container, #ffddb0);
+  border-color: color-mix(in srgb, var(--warning, #8d5700) 30%, transparent);
 }
 
 .summary-panel,
 .can-panel {
-  background: #ffffff;
+  background: var(--surface-container-lowest, #ffffff);
 }
 
 .today-panel {
-  border: 1px solid #d8e1ee;
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 26px;
-  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 12px 28px rgba(60, 64, 67, 0.07);
+  box-shadow: var(--elevation-1, 0 1px 2px rgba(60, 64, 67, 0.08), 0 12px 28px rgba(60, 64, 67, 0.07));
 }
 
 .section-kicker {
@@ -604,12 +624,12 @@ textarea:focus-visible {
 
 .section-meta,
 .today-limit-summary {
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 14px;
 }
 
 .today-stat-value {
-  color: #202124;
+  color: var(--text, #202124);
   font-size: clamp(3.5rem, 8vw, 5rem);
   font-weight: 500;
   line-height: 1;
@@ -617,7 +637,7 @@ textarea:focus-visible {
 }
 
 .today-stat-label {
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 18px;
 }
 
@@ -628,7 +648,7 @@ textarea:focus-visible {
 .metric-tile-label,
 .app-card-subtitle,
 .insight-card-label {
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 14px;
   font-weight: 500;
 }
@@ -637,7 +657,7 @@ textarea:focus-visible {
 .app-card-title,
 .insight-card-value,
 .empty-state-title {
-  color: #202124;
+  color: var(--text, #202124);
   font-weight: 500;
 }
 
@@ -650,7 +670,7 @@ textarea:focus-visible {
 .metric-tile-detail,
 .insight-card-detail,
 .empty-state-copy {
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 14px;
   line-height: 1.5;
 }
@@ -662,8 +682,8 @@ textarea:focus-visible {
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, #ffffff);
-  border: 1px solid #d8e1ee;
+  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, var(--surface-container-lowest, #ffffff));
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 14px;
 }
 
@@ -672,14 +692,14 @@ textarea:focus-visible {
 }
 
 .mini-metric-label {
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 12px;
   font-weight: 500;
 }
 
 .mini-metric-value {
   margin-top: 6px;
-  color: #202124;
+  color: var(--text, #202124);
   font-size: 1.25rem;
   font-weight: 500;
 }
@@ -691,17 +711,17 @@ textarea:focus-visible {
   gap: 12px;
   width: 100%;
   padding: 12px 14px;
-  color: #202124;
+  color: var(--text, #202124);
   text-align: left;
-  background: #ffffff;
-  border: 1px solid #d8e1ee;
+  background: var(--surface-container-lowest, #ffffff);
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 18px;
   transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
 }
 
 .quick-add-button:hover {
-  background: #f7faff;
-  border-color: color-mix(in srgb, var(--primary, #2563c7) 24%, #d8e1ee);
+  background: var(--surface-container-low, #f7faff);
+  border-color: color-mix(in srgb, var(--primary, #2563c7) 24%, var(--outline-variant, #d8e1ee));
   box-shadow: 0 2px 8px rgba(60, 64, 67, 0.08);
 }
 
@@ -712,12 +732,12 @@ textarea:focus-visible {
   align-items: center;
   justify-content: center;
   color: var(--primary, #2563c7);
-  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, #ffffff);
+  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, var(--surface-container-lowest, #ffffff));
   border-radius: 14px;
 }
 
 .quick-add-meta {
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 14px;
 }
 
@@ -729,8 +749,8 @@ textarea:focus-visible {
   justify-content: center;
   padding: 24px;
   text-align: center;
-  background: #ffffff;
-  border: 1px dashed #cfd8e6;
+  background: var(--surface-container-lowest, #ffffff);
+  border: 1px dashed var(--outline-variant, #cfd8e6);
   border-radius: 18px;
 }
 
@@ -742,7 +762,7 @@ textarea:focus-visible {
   justify-content: center;
   margin-bottom: 12px;
   color: var(--primary, #2563c7);
-  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, #ffffff);
+  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, var(--surface-container-lowest, #ffffff));
   border-radius: 14px;
 }
 
@@ -752,18 +772,18 @@ textarea:focus-visible {
 
 .limit-alert {
   padding: 16px 20px;
-  background: #fff8e8;
-  border: 1px solid #f9e3b0;
+  background: var(--warning-container, #fff8e8);
+  border: 1px solid color-mix(in srgb, var(--warning, #8d5700) 30%, transparent);
   border-radius: 22px;
 }
 
 .limit-alert-title {
-  color: #7a4e00;
+  color: var(--on-warning-container, #7a4e00);
   font-weight: 500;
 }
 
 .limit-alert-copy {
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 14px;
   line-height: 1.55;
 }
@@ -772,10 +792,10 @@ textarea:focus-visible {
   display: inline-flex;
   align-items: center;
   padding: 4px 8px;
-  color: #174ea6;
+  color: var(--on-primary-container, #174ea6);
   font-size: 12px;
   font-weight: 500;
-  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 92%, #ffffff);
+  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 92%, var(--surface-container-lowest, #ffffff));
   border-radius: 999px;
 }
 
@@ -783,28 +803,28 @@ textarea:focus-visible {
   display: inline-flex;
   align-items: center;
   padding: 4px 8px;
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 12px;
   font-weight: 500;
-  background: #edf2fa;
+  background: var(--surface-container-low, #edf2fa);
   border-radius: 999px;
 }
 
 .entry-title,
 .mini-entry-title {
-  color: #202124;
+  color: var(--text, #202124);
   font-size: 1.125rem;
   font-weight: 500;
 }
 
 .entry-meta,
 .mini-entry-meta {
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 14px;
 }
 
 .entry-summary {
-  color: #3c4043;
+  color: var(--text, #3c4043);
   font-size: 14px;
 }
 
@@ -814,13 +834,13 @@ textarea:focus-visible {
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
-  background: #ffffff;
-  border: 1px solid #d8e1ee;
+  background: var(--surface-container-lowest, #ffffff);
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 18px;
 }
 
 .mini-entry-price {
-  color: #202124;
+  color: var(--text, #202124);
   font-size: 14px;
   font-weight: 500;
 }
@@ -832,10 +852,10 @@ textarea:focus-visible {
 
 .auth-panel-card {
   padding: 24px;
-  background: #ffffff;
-  border: 1px solid #d8e1ee;
+  background: var(--surface-container-lowest, #ffffff);
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 22px;
-  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 12px 28px rgba(60, 64, 67, 0.08);
+  box-shadow: var(--elevation-1, 0 1px 2px rgba(60, 64, 67, 0.08), 0 12px 28px rgba(60, 64, 67, 0.08));
 }
 
 .auth-mode-toggle {
@@ -843,8 +863,8 @@ textarea:focus-visible {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 4px;
   padding: 4px;
-  background: #edf2fa;
-  border: 1px solid #d8e1ee;
+  background: var(--surface-container-low, #edf2fa);
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 999px;
 }
 
@@ -852,28 +872,28 @@ textarea:focus-visible {
   min-height: 36px;
   border: 0;
   border-radius: 999px;
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   background: transparent;
   font-size: 14px;
   font-weight: 500;
 }
 
 .auth-mode-toggle button.auth-mode-active {
-  color: #202124;
-  background: #ffffff;
+  color: var(--text, #202124);
+  background: var(--surface-container-lowest, #ffffff);
   box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
 }
 
 .forecast-stat {
   padding: 16px;
-  background: #ffffff;
-  border: 1px solid #d8e1ee;
+  background: var(--surface-container-lowest, #ffffff);
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 18px;
 }
 
 .forecast-stat-label {
   display: block;
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 10px;
   font-weight: 500;
   letter-spacing: 0.08em;
@@ -882,7 +902,7 @@ textarea:focus-visible {
 
 .forecast-stat-value {
   margin-top: 4px;
-  color: #202124;
+  color: var(--text, #202124);
   font-size: 1.5rem;
   font-weight: 500;
 }
@@ -890,24 +910,24 @@ textarea:focus-visible {
 .forecast-stat-note {
   display: block;
   margin-top: 4px;
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 10px;
   font-weight: 500;
 }
 
 .forecast-stat--positive .forecast-stat-value {
-  color: #0d652d;
+  color: var(--success, #0d652d);
 }
 
 .forecast-stat--positive .forecast-stat-label,
 .forecast-stat--positive .forecast-stat-note {
-  color: #0d652d;
+  color: var(--success, #0d652d);
 }
 
 .forecast-chart-wrap {
   padding: 8px;
-  background: #ffffff;
-  border: 1px solid #d8e1ee;
+  background: var(--surface-container-lowest, #ffffff);
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 18px;
 }
 
@@ -917,8 +937,8 @@ textarea:focus-visible {
 .entry-row,
 .metric-soft,
 .quick-add-item {
-  background: #ffffff;
-  border: 1px solid #d8e1ee;
+  background: var(--surface-container-lowest, #ffffff);
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 18px;
 }
 
@@ -929,7 +949,7 @@ textarea:focus-visible {
 
 .wellness-pill span,
 .limit-row-head span {
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 12px;
 }
 
@@ -937,7 +957,7 @@ textarea:focus-visible {
 .limit-row-head strong {
   display: block;
   margin-top: 5px;
-  color: #202124;
+  color: var(--text, #202124);
   font-size: 17px;
   font-weight: 500;
 }
@@ -956,7 +976,7 @@ textarea:focus-visible {
   height: 9px;
   margin-top: 12px;
   overflow: hidden;
-  background: #e8edf5;
+  background: var(--surface-container-high, #e8edf5);
   border-radius: 999px;
 }
 
@@ -966,23 +986,23 @@ textarea:focus-visible {
 }
 
 .limit-row--warn .limit-progress-fill {
-  background: #b06000;
+  background: var(--warning, #b06000);
 }
 
 .limit-row--over .limit-progress-fill {
-  background: #b3261e;
+  background: var(--error, #b3261e);
 }
 
 .limit-row-value {
   margin-top: 8px;
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 13px;
 }
 
 .field-label {
   display: grid;
   gap: 8px;
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 13px;
   font-weight: 500;
 }
@@ -992,15 +1012,15 @@ textarea:focus-visible {
   width: 100%;
   min-height: 46px;
   padding: 10px 13px;
-  color: #202124;
-  background: #ffffff;
-  border: 1px solid #cfd8e6;
+  color: var(--text, #202124);
+  background: var(--surface-container-lowest, #ffffff);
+  border: 1px solid var(--outline-variant, #cfd8e6);
   border-radius: 14px;
 }
 
 .field-control::placeholder,
 .field-input::placeholder {
-  color: #80868b;
+  color: var(--subtle, #80868b);
 }
 
 .field-help-text,
@@ -1074,9 +1094,9 @@ textarea:focus-visible {
   align-items: center;
   gap: 11px;
   padding: 11px 13px;
-  color: #202124;
-  background: #ffffff;
-  border: 1px solid #d8e1ee;
+  color: var(--text, #202124);
+  background: var(--surface-container-lowest, #ffffff);
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 18px;
 }
 
@@ -1091,7 +1111,7 @@ textarea:focus-visible {
   width: 20px;
   height: 20px;
   flex: 0 0 auto;
-  border: 1px solid rgba(60, 64, 67, 0.2);
+  border: 1px solid var(--outline-variant, rgba(60, 64, 67, 0.2));
   border-radius: 50%;
 }
 
@@ -1101,9 +1121,9 @@ textarea:focus-visible {
   align-items: center;
   gap: 8px;
   padding: 0 12px;
-  color: #202124;
-  background: #ffffff;
-  border: 1px solid #d8e1ee;
+  color: var(--text, #202124);
+  background: var(--surface-container-lowest, #ffffff);
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 999px;
 }
 
@@ -1151,8 +1171,8 @@ textarea:focus-visible {
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 4px;
   padding: 4px;
-  background: #edf2fa;
-  border: 1px solid #d8e1ee;
+  background: var(--surface-container-low, #edf2fa);
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 999px;
 }
 
@@ -1160,23 +1180,23 @@ textarea:focus-visible {
   min-height: 34px;
   border: 0;
   border-radius: 999px;
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   background: transparent;
   font-size: 12px;
   font-weight: 500;
 }
 
 .segmented-control .segmented-control-active {
-  color: #ffffff;
+  color: var(--on-primary, #ffffff);
   background: var(--primary, #2563c7);
 }
 
 .chart-tooltip {
   padding: 10px 12px;
-  background: #ffffff;
-  border: 1px solid #d8e1ee;
+  background: var(--surface-container-lowest, #ffffff);
+  border: 1px solid var(--outline-variant, #d8e1ee);
   border-radius: 16px;
-  box-shadow: 0 12px 28px rgba(60, 64, 67, 0.14);
+  box-shadow: var(--elevation-2, 0 12px 28px rgba(60, 64, 67, 0.14));
 }
 
 .backdrop-wash,
@@ -1190,7 +1210,7 @@ textarea:focus-visible {
   justify-content: center;
   gap: 12px;
   padding: 20px;
-  color: #5f6670;
+  color: var(--muted, #5f6670);
   font-size: 13px;
 }
 
@@ -1221,19 +1241,19 @@ textarea:focus-visible {
 .app-shell .text-teal-300,
 .app-shell [class*="text-cyan-"],
 .app-shell [class*="text-teal-"] {
-  color: #202124 !important;
+  color: var(--text, #202124) !important;
 }
 
 .app-shell .text-slate-100,
 .app-shell .text-slate-200,
 .app-shell .text-slate-300 {
-  color: #3c4043 !important;
+  color: var(--text, #3c4043) !important;
 }
 
 .app-shell .text-slate-400,
 .app-shell .text-slate-500,
 .app-shell .text-slate-600 {
-  color: #5f6670 !important;
+  color: var(--muted, #5f6670) !important;
 }
 
 .app-shell .bg-white\/\[0\.01\],
@@ -1245,7 +1265,7 @@ textarea:focus-visible {
 .app-shell .bg-black\/20,
 .app-shell .bg-emerald-500\/5,
 .app-shell .bg-gradient-to-tr {
-  background: #ffffff !important;
+  background: var(--surface-container-lowest, #ffffff) !important;
 }
 
 .app-shell .border-white\/5,
@@ -1255,7 +1275,7 @@ textarea:focus-visible {
 .app-shell .border-pink-200\/30,
 .app-shell .border-emerald-500\/10,
 .app-shell .border-emerald-500\/20 {
-  border-color: #d8e1ee !important;
+  border-color: var(--outline-variant, #d8e1ee) !important;
 }
 
 @media (min-width: 480px) {
@@ -1546,7 +1566,7 @@ textarea:focus-visible {
 
 .legal-tooltip-trigger:hover,
 .legal-tooltip-trigger:focus-visible {
-  color: var(--primary-strong, #174ea6);
+  color: color-mix(in srgb, var(--primary, #2563c7) 82%, var(--text, #202124));
 }
 
 .legal-tooltip {
@@ -1558,13 +1578,13 @@ textarea:focus-visible {
   transform: translateX(-50%);
   padding: 0.65rem 0.75rem;
   border-radius: 10px;
-  border: 1px solid rgba(148, 163, 184, 0.35);
-  background: rgba(15, 23, 42, 0.96);
-  color: #e2e8f0;
+  border: 1px solid var(--outline-variant, rgba(148, 163, 184, 0.35));
+  background: color-mix(in srgb, var(--text, #0f172a) 94%, transparent);
+  color: var(--bg, #e2e8f0);
   font-size: 11px;
   line-height: 1.45;
   text-align: left;
-  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.35);
+  box-shadow: var(--elevation-2, 0 12px 28px rgba(2, 6, 23, 0.35));
   pointer-events: none;
   opacity: 0;
   visibility: hidden;