diff --git a/src/app/globals.css b/src/app/globals.css
index 2d17631..8b92f74 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,6 +2,7 @@
 @import "tailwindcss";
 
 :root {
+  /* Dark theme variables */
   --bg-primary: #0c0e16;
   --bg-secondary: #0c0e16;
   --bg-card: #0c0e16;
@@ -22,6 +23,36 @@
   --accent-red: #ef4444;
   --accent-purple: #8b5cf6;
   --accent-cyan: #06b6d4;
+
+  /* Toast tones */
+  --toast-success-border: 1px solid rgba(16, 185, 129, 0.28);
+  --toast-success-bg: #0f2f28;
+  --toast-success-title: #d1fae5;
+  --toast-success-message: rgba(209, 250, 229, 0.82);
+  --toast-success-close: rgba(209, 250, 229, 0.65);
+  --toast-success-icon: #34d399;
+
+  --toast-error-border: 1px solid rgba(239, 68, 68, 0.28);
+  --toast-error-bg: #321717;
+  --toast-error-title: #fee2e2;
+  --toast-error-message: rgba(254, 226, 226, 0.82);
+  --toast-error-close: rgba(254, 226, 226, 0.65);
+  --toast-error-icon: #f87171;
+
+  --toast-warning-border: 1px solid rgba(245, 158, 11, 0.28);
+  --toast-warning-bg: #342714;
+  --toast-warning-title: #fef3c7;
+  --toast-warning-message: rgba(254, 243, 199, 0.82);
+  --toast-warning-close: rgba(254, 243, 199, 0.65);
+  --toast-warning-icon: #fbbf24;
+
+  --toast-info-border: 1px solid rgba(59, 130, 246, 0.28);
+  --toast-info-bg: #172c40;
+  --toast-info-title: #dbeafe;
+  --toast-info-message: rgba(219, 234, 254, 0.82);
+  --toast-info-close: rgba(219, 234, 254, 0.65);
+  --toast-info-icon: #60a5fa;
+
   --terminal-surface: #070b12;
   --terminal-header: #0d1224;
   --terminal-row-hover: rgba(59, 130, 246, 0.04);
@@ -66,6 +97,7 @@
 }
 
 html[data-theme="light"] {
+  /* Light theme variables */
   --bg-primary: #f4f7fb;
   --bg-secondary: #ffffff;
   --bg-card: #ffffff;
@@ -107,6 +139,35 @@ html[data-theme="light"] {
   --metrics-error-bg: rgba(254, 242, 242, 0.96);
   --scrollbar-track: #e2e8f0;
   --scrollbar-thumb: #cbd5e1;
+
+  /* Toast tones — light */
+  --toast-success-border: 1px solid rgba(16, 185, 129, 0.22);
+  --toast-success-bg: #ecfdf5;
+  --toast-success-title: #14532d;
+  --toast-success-message: rgba(20, 83, 45, 0.82);
+  --toast-success-close: rgba(20, 83, 45, 0.6);
+  --toast-success-icon: #10b981;
+
+  --toast-error-border: 1px solid rgba(239, 68, 68, 0.22);
+  --toast-error-bg: #fef2f2;
+  --toast-error-title: #7f1d1d;
+  --toast-error-message: rgba(127, 29, 29, 0.82);
+  --toast-error-close: rgba(127, 29, 29, 0.6);
+  --toast-error-icon: #ef4444;
+
+  --toast-warning-border: 1px solid rgba(245, 158, 11, 0.22);
+  --toast-warning-bg: #fffbeb;
+  --toast-warning-title: #78350f;
+  --toast-warning-message: rgba(120, 53, 15, 0.82);
+  --toast-warning-close: rgba(120, 53, 15, 0.6);
+  --toast-warning-icon: #f59e0b;
+
+  --toast-info-border: 1px solid rgba(59, 130, 246, 0.22);
+  --toast-info-bg: #eff6ff;
+  --toast-info-title: #1e3a8a;
+  --toast-info-message: rgba(30, 58, 138, 0.82);
+  --toast-info-close: rgba(30, 58, 138, 0.6);
+  --toast-info-icon: #3b82f6;
 }
 
 * {
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
index 49f1e78..fa53917 100644
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -18,60 +18,18 @@ const toneConfig: Record<
   {
     title: string;
     icon: typeof CheckCircle;
-    border: string;
-    background: string;
-    titleColor: string;
-    messageColor: string;
-    closeColor: string;
-    iconColor: string;
   }
 > = {
-  success: {
-    title: "Success",
-    icon: CheckCircle,
-    border: "1px solid rgba(16,185,129,0.35)",
-    background:
-      "linear-gradient(135deg, rgba(16,185,129,0.16), rgba(15,23,42,0.94))",
-    titleColor: "#d1fae5",
-    messageColor: "rgba(209,250,229,0.9)",
-    closeColor: "rgba(209,250,229,0.75)",
-    iconColor: "#10b981",
-  },
-  error: {
-    title: "Error",
-    icon: XCircle,
-    border: "1px solid rgba(239,68,68,0.35)",
-    background:
-      "linear-gradient(135deg, rgba(239,68,68,0.18), rgba(15,23,42,0.94))",
-    titleColor: "#fee2e2",
-    messageColor: "rgba(254,226,226,0.9)",
-    closeColor: "rgba(254,226,226,0.75)",
-    iconColor: "#ef4444",
-  },
-  warning: {
-    title: "Warning",
-    icon: AlertTriangle,
-    border: "1px solid rgba(245,158,11,0.35)",
-    background:
-      "linear-gradient(135deg, rgba(245,158,11,0.18), rgba(15,23,42,0.94))",
-    titleColor: "#fef3c7",
-    messageColor: "rgba(254,243,199,0.9)",
-    closeColor: "rgba(254,243,199,0.75)",
-    iconColor: "#f59e0b",
-  },
-  info: {
-    title: "Info",
-    icon: Info,
-    border: "1px solid rgba(59,130,246,0.35)",
-    background:
-      "linear-gradient(135deg, rgba(59,130,246,0.18), rgba(15,23,42,0.94))",
-    titleColor: "#dbeafe",
-    messageColor: "rgba(219,234,254,0.9)",
-    closeColor: "rgba(219,234,254,0.75)",
-    iconColor: "#3b82f6",
-  },
+  success: { title: "Success", icon: CheckCircle },
+  error: { title: "Error", icon: XCircle },
+  warning: { title: "Warning", icon: AlertTriangle },
+  info: { title: "Info", icon: Info },
 };
 
+function toneVar(tone: ToastTone, key: string) {
+  return `var(--toast-${tone}-${key})`;
+}
+
 export default function Toast({
   tone,
   title,
@@ -92,18 +50,21 @@ export default function Toast({
           display: "flex",
           alignItems: "flex-start",
           gap: 10,
-          border: config.border,
-          background: config.background,
+          border: toneVar(tone, "border"),
+          background: toneVar(tone, "bg"),
           boxShadow: "0 18px 40px rgba(2,6,23,0.35)",
           overflow: "hidden",
           position: "relative",
         }}
       >
-        <Icon size={18} style={{ color: config.iconColor, flexShrink: 0 }} />
+        <Icon
+          size={18}
+          style={{ color: toneVar(tone, "icon"), flexShrink: 0 }}
+        />
         <div style={{ flex: 1, minWidth: 0 }}>
           <p
             style={{
-              color: config.titleColor,
+              color: toneVar(tone, "title"),
               fontSize: 13,
               fontWeight: 700,
               marginBottom: 2,
@@ -113,7 +74,7 @@ export default function Toast({
           </p>
           <p
             style={{
-              color: config.messageColor,
+              color: toneVar(tone, "message"),
               fontSize: 12,
               lineHeight: 1.45,
             }}
@@ -129,7 +90,7 @@ export default function Toast({
               background: "none",
               border: "none",
               cursor: "pointer",
-              color: config.closeColor,
+              color: toneVar(tone, "close"),
               padding: 0,
               flexShrink: 0,
             }}
@@ -153,7 +114,7 @@ export default function Toast({
               style={{
                 height: "100%",
                 width: "100%",
-                background: config.iconColor,
+                background: toneVar(tone, "icon"),
                 transformOrigin: "left center",
                 animation: `toast-progress-shrink ${duration}ms linear forwards`,
               }}