From dc749d6079ff052621111e6f46d0969f46062d9a Mon Sep 17 00:00:00 2001
From: Essential Randomness <essentialrandomn3ss@gmail.com>
Date: Fri, 8 May 2026 00:45:32 -0700
Subject: [PATCH] update css vars after layout update

---
 src/components/auth/AuthMenu.astro        | 68 +++++++++++------------
 src/components/auth/Combobox.astro        | 51 ++++++++---------
 src/components/events/EventCard.astro     | 50 ++++++++---------
 src/components/events/EventLocation.astro | 12 ++--
 src/components/events/RsvpNotice.astro    |  8 +--
 src/components/layout/GetInvolved.astro   |  4 +-
 src/components/layout/Header.astro        | 62 ++++++++++++++++++++-
 src/components/layout/Hero.astro          |  2 +-
 src/pages/communities.astro               |  2 +-
 src/pages/events.astro                    | 12 ++--
 src/styles/global.css                     | 10 +++-
 src/styles/tokens.semantic.css            |  9 +++
 12 files changed, 182 insertions(+), 108 deletions(-)

diff --git a/src/components/auth/AuthMenu.astro b/src/components/auth/AuthMenu.astro
index a5683df..f0e798e 100644
--- a/src/components/auth/AuthMenu.astro
+++ b/src/components/auth/AuthMenu.astro
@@ -276,10 +276,10 @@ const avatarInitial = (displayName || "@").charAt(0).toUpperCase();
     align-items: center;
     gap: var(--space-sm);
     min-height: 36px;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--border);
     border-radius: var(--radius-pill);
     padding: 2px var(--space-md) 2px 2px;
-    color: var(--color-text);
+    color: var(--foreground);
     font-size: var(--text-sm);
     font-weight: 600;
     line-height: 1;
@@ -297,30 +297,30 @@ const avatarInitial = (displayName || "@").charAt(0).toUpperCase();
 
   .auth-summary:hover,
   .auth-menu[open] .auth-summary {
-    background: var(--blue-50);
-    border-color: var(--blue-200);
-    color: var(--color-primary);
+    background: var(--primary-muted);
+    border-color: var(--primary-muted);
+    color: var(--primary);
   }
 
   .auth-summary:focus-visible,
   .auth-button:focus-visible,
   :global(.auth-input:focus-visible) {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--primary);
     outline-offset: 2px;
   }
 
   .auth-summary--login {
     padding: var(--space-sm) var(--space-base);
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-    color: var(--color-text-on-primary);
+    background: var(--primary);
+    border-color: var(--primary);
+    color: var(--primary-foreground);
   }
 
   .auth-summary--login:hover,
   .auth-menu[open] .auth-summary--login {
-    background: var(--color-primary-hover);
-    border-color: var(--color-primary-hover);
-    color: var(--color-text-on-primary);
+    background: var(--primary-hover);
+    border-color: var(--primary-hover);
+    color: var(--primary-foreground);
   }
 
   .auth-avatar {
@@ -328,14 +328,14 @@ const avatarInitial = (displayName || "@").charAt(0).toUpperCase();
     height: 32px;
     border-radius: 50%;
     object-fit: cover;
-    background: var(--blue-100);
+    background: var(--primary-muted);
   }
 
   .auth-avatar--fallback {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--color-primary);
+    color: var(--primary);
     font-weight: 700;
   }
 
@@ -350,13 +350,13 @@ const avatarInitial = (displayName || "@").charAt(0).toUpperCase();
     position: absolute;
     top: calc(100% + var(--space-sm));
     right: 0;
-    z-index: 20;
+    z-index: var(--z-popover);
     width: min(280px, calc(100vw - 2 * var(--space-lg)));
     padding: var(--space-base);
-    background: var(--color-surface-card);
-    border: 1px solid var(--color-border);
+    background: var(--card);
+    border: 1px solid var(--border);
     border-radius: var(--radius-md);
-    box-shadow: 0 18px 48px oklch(22% 0.01 250 / 0.14);
+    box-shadow: var(--elevation-high);
   }
 
   .auth-form {
@@ -371,7 +371,7 @@ const avatarInitial = (displayName || "@").charAt(0).toUpperCase();
 
   .auth-form-title {
     margin: 0;
-    color: var(--color-text);
+    color: var(--foreground);
     font-size: var(--text-sm);
     font-weight: 700;
     line-height: var(--leading-tight);
@@ -385,13 +385,13 @@ const avatarInitial = (displayName || "@").charAt(0).toUpperCase();
 
   .auth-form-hint {
     margin: 0;
-    color: var(--color-text-muted);
+    color: var(--foreground-muted);
     font-size: var(--text-xs);
     line-height: var(--leading-normal);
   }
 
   .auth-form-link {
-    color: var(--color-primary);
+    color: var(--primary);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
@@ -404,10 +404,10 @@ const avatarInitial = (displayName || "@").charAt(0).toUpperCase();
   :global(.auth-input) {
     width: 100%;
     min-height: 40px;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: var(--space-sm) var(--space-md);
-    color: var(--color-text);
+    color: var(--foreground);
     font: inherit;
     font-size: var(--text-sm);
   }
@@ -420,8 +420,8 @@ const avatarInitial = (displayName || "@").charAt(0).toUpperCase();
     min-height: 40px;
     border: 0;
     border-radius: var(--radius-sm);
-    background: var(--color-primary);
-    color: var(--color-text-on-primary);
+    background: var(--primary);
+    color: var(--primary-foreground);
     font: inherit;
     font-size: var(--text-sm);
     font-weight: 700;
@@ -454,38 +454,38 @@ const avatarInitial = (displayName || "@").charAt(0).toUpperCase();
   }
 
   .auth-button:hover {
-    background: var(--color-primary-hover);
+    background: var(--primary-hover);
   }
 
   .auth-button:disabled {
-    background: var(--color-border);
-    color: var(--color-text-muted);
+    background: var(--border);
+    color: var(--foreground-muted);
     cursor: not-allowed;
   }
   .auth-button:disabled:hover {
-    background: var(--color-border);
+    background: var(--border);
   }
 
   .auth-button--secondary {
     width: 100%;
     background: transparent;
-    border: 1px solid var(--color-border);
-    color: var(--color-primary);
+    border: 1px solid var(--border);
+    color: var(--primary);
   }
 
   .auth-button--secondary:hover {
-    background: var(--blue-50);
+    background: var(--primary-muted);
   }
 
   .auth-status {
     margin-bottom: var(--space-sm);
-    color: var(--color-text-secondary);
+    color: var(--foreground-secondary);
     font-size: var(--text-sm);
     line-height: var(--leading-normal);
   }
 
   .auth-error {
-    color: var(--coral-600);
+    color: var(--error);
     font-size: var(--text-sm);
     line-height: var(--leading-normal);
   }
diff --git a/src/components/auth/Combobox.astro b/src/components/auth/Combobox.astro
index a3f22b4..b169f41 100644
--- a/src/components/auth/Combobox.astro
+++ b/src/components/auth/Combobox.astro
@@ -425,7 +425,7 @@ const hintId = `${id}-hint`;
     transform: translateY(-50%);
     display: inline-flex;
     align-items: center;
-    color: var(--color-text-muted);
+    color: var(--foreground-muted);
     pointer-events: none;
   }
   .cmb-leading:empty {
@@ -441,15 +441,12 @@ const hintId = `${id}-hint`;
     top: calc(100% + 6px);
     left: 0;
     right: 0;
-    z-index: 30;
+    z-index: var(--z-popover-raised);
     padding: 4px;
-    background: var(--color-surface-card);
-    border: 1px solid var(--color-border);
+    background: var(--card);
+    border: 1px solid var(--border);
     border-radius: var(--radius-md);
-    box-shadow:
-      0 1px 2px oklch(22% 0.01 250 / 0.05),
-      0 8px 16px oklch(22% 0.01 250 / 0.08),
-      0 24px 48px oklch(22% 0.01 250 / 0.16);
+    box-shadow: var(--elevation-high);
     overflow: hidden;
     transform-origin: top center;
     animation: cmb-pop 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -471,7 +468,7 @@ const hintId = `${id}-hint`;
     background: linear-gradient(
       90deg,
       transparent 0%,
-      var(--color-primary) 50%,
+      var(--primary) 50%,
       transparent 100%
     );
     background-size: 40% 100%;
@@ -501,7 +498,7 @@ const hintId = `${id}-hint`;
     overflow-y: auto;
     overscroll-behavior: contain;
     scrollbar-width: thin;
-    scrollbar-color: var(--color-border) transparent;
+    scrollbar-color: var(--border) transparent;
   }
 
   .cmb-listbox::-webkit-scrollbar {
@@ -511,12 +508,12 @@ const hintId = `${id}-hint`;
     background: transparent;
   }
   .cmb-listbox::-webkit-scrollbar-thumb {
-    background: var(--color-border);
+    background: var(--border);
     border-radius: 999px;
-    border: 3px solid var(--color-surface-card);
+    border: 3px solid var(--card);
   }
   .cmb-listbox::-webkit-scrollbar-thumb:hover {
-    background: var(--color-text-muted);
+    background: var(--foreground-muted);
   }
 
   /* Option */
@@ -528,7 +525,7 @@ const hintId = `${id}-hint`;
     gap: var(--space-md);
     padding: var(--space-base) var(--space-md);
     border-radius: var(--radius-sm);
-    color: var(--color-text);
+    color: var(--foreground);
     font-size: var(--text-sm);
     line-height: var(--leading-tight);
     cursor: pointer;
@@ -542,8 +539,8 @@ const hintId = `${id}-hint`;
 
   /* Active descendant — also functions as hover state on desktop */
   .cmb-option[aria-selected='true'] {
-    background: var(--blue-200);
-    color: var(--color-primary);
+    background: var(--primary-muted);
+    color: var(--primary);
   }
 
   /* Leading accent stripe on the active option */
@@ -555,14 +552,14 @@ const hintId = `${id}-hint`;
     left: 0;
     width: 3px;
     border-radius: 0 2px 2px 0;
-    background: var(--color-primary);
+    background: var(--primary);
   }
 
   /* Disabled "No matches" state */
   .cmb-option--disabled {
     display: block;
     padding: var(--space-base) var(--space-md);
-    color: var(--color-text-muted);
+    color: var(--foreground-muted);
     font-style: italic;
     text-align: center;
     cursor: default;
@@ -577,8 +574,8 @@ const hintId = `${id}-hint`;
     height: 40px;
     border-radius: 50%;
     object-fit: cover;
-    background: var(--blue-100);
-    box-shadow: 0 0 0 1px oklch(22% 0.01 250 / 0.08);
+    background: var(--primary-muted);
+    box-shadow: var(--elevation-low);
   }
 
   /* Text column */
@@ -610,7 +607,7 @@ const hintId = `${id}-hint`;
   }
 
   .cmb-option-sub {
-    color: var(--color-text-muted);
+    color: var(--foreground-muted);
     font-size: var(--text-xs);
     font-variant-numeric: tabular-nums;
     overflow: hidden;
@@ -619,7 +616,7 @@ const hintId = `${id}-hint`;
   }
 
   [aria-selected='true'] .cmb-option-sub {
-    color: var(--color-primary);
+    color: var(--primary);
     opacity: 0.85;
   }
 
@@ -627,7 +624,7 @@ const hintId = `${id}-hint`;
   .cmb-message {
     margin: 0;
     padding: var(--space-sm) var(--space-md);
-    color: var(--color-text-muted);
+    color: var(--foreground-muted);
     font-size: var(--text-sm);
     line-height: var(--leading-normal);
   }
@@ -636,7 +633,7 @@ const hintId = `${id}-hint`;
     display: flex;
     align-items: flex-start;
     gap: var(--space-sm);
-    color: var(--coral-600);
+    color: var(--error);
   }
 
   /* `display: flex` above would otherwise win over the [hidden] UA rule. */
@@ -654,8 +651,8 @@ const hintId = `${id}-hint`;
     height: 18px;
     margin-top: 1px;
     border-radius: 50%;
-    background: var(--coral-600);
-    color: var(--color-surface-card);
+    background: var(--error);
+    color: var(--error-foreground);
     font-size: var(--text-xs);
     font-weight: 700;
     line-height: 1;
@@ -667,7 +664,7 @@ const hintId = `${id}-hint`;
     }
     .cmb:has(.cmb-input[aria-busy='true']) .cmb-popover::before {
       animation: none;
-      background: var(--color-primary);
+      background: var(--primary);
       background-size: 100% 100%;
       opacity: 0.6;
     }
diff --git a/src/components/events/EventCard.astro b/src/components/events/EventCard.astro
index a757027..5d798bf 100644
--- a/src/components/events/EventCard.astro
+++ b/src/components/events/EventCard.astro
@@ -236,7 +236,7 @@ const canRsvp = showRsvp && isLoggedIn && Boolean(cid);
     text-decoration: none;
   }
   .event-card__name a:hover {
-    color: var(--color-primary);
+    color: var(--primary);
   }
 
   .event-card__desc {
@@ -251,7 +251,7 @@ const canRsvp = showRsvp && isLoggedIn && Boolean(cid);
     min-height: 2lh;
   }
   .event-card__desc--empty {
-    color: var(--neutral-400);
+    color: var(--foreground-subtle);
     font-style: italic;
   }
 
@@ -275,16 +275,16 @@ const canRsvp = showRsvp && isLoggedIn && Boolean(cid);
   }
   .event-card__byline-label {
     font-size: var(--text-xs);
-    color: var(--color-text-secondary);
+    color: var(--foreground-secondary);
     line-height: 1;
   }
   .event-card__source-handle {
     font-weight: 600;
-    color: var(--color-text-secondary);
+    color: var(--foreground-secondary);
     text-decoration: none;
   }
   a.event-card__source-handle:hover {
-    color: var(--color-primary);
+    color: var(--primary);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
@@ -294,7 +294,7 @@ const canRsvp = showRsvp && isLoggedIn && Boolean(cid);
     height: 14px;
     border-radius: 50%;
     object-fit: cover;
-    background: var(--neutral-100);
+    background: var(--muted);
     opacity: 0.85;
   }
   .event-card__source-avatar--placeholder {
@@ -307,8 +307,8 @@ const canRsvp = showRsvp && isLoggedIn && Boolean(cid);
     gap: 6px;
     padding: var(--space-sm) var(--space-md);
     border-radius: var(--radius-pill);
-    background: var(--teal-100);
-    color: var(--teal-600);
+    background: var(--success-muted);
+    color: var(--success-muted-foreground);
     font-size: var(--text-sm);
     font-weight: 600;
     line-height: 1;
@@ -317,7 +317,7 @@ const canRsvp = showRsvp && isLoggedIn && Boolean(cid);
   .event-card__actions {
     margin-top: var(--space-md);
     padding-top: var(--space-md);
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -340,7 +340,7 @@ const canRsvp = showRsvp && isLoggedIn && Boolean(cid);
   }
 
   .event-card__details {
-    color: var(--color-primary);
+    color: var(--primary);
     gap: 4px;
   }
   .event-card__details-icon {
@@ -363,13 +363,13 @@ const canRsvp = showRsvp && isLoggedIn && Boolean(cid);
     min-width: 80px;
     border: 0;
     padding: var(--space-sm) var(--space-base);
-    background: var(--color-primary);
-    color: var(--color-text-on-primary);
+    background: var(--primary);
+    color: var(--primary-foreground);
     cursor: pointer;
     transition: background 0.15s ease;
   }
   .event-card__rsvp:hover {
-    background: var(--color-primary-hover);
+    background: var(--primary-hover);
   }
 
   .event-card__rsvp--cancel {
@@ -377,21 +377,21 @@ const canRsvp = showRsvp && isLoggedIn && Boolean(cid);
     min-height: 0;
     padding: 0;
     background: transparent;
-    color: var(--coral-600);
+    color: var(--error);
     font-size: var(--text-xs);
     font-weight: 600;
     text-decoration: underline;
-    text-decoration-color: oklch(from var(--coral-600) l c h / 0.4);
+    text-decoration-color: oklch(from var(--error) l c h / 0.4);
     text-underline-offset: 3px;
   }
   .event-card__rsvp--cancel:hover {
     background: transparent;
-    color: var(--coral-600);
+    color: var(--error);
     text-decoration-color: currentColor;
   }
 
   .event-card__login-hint {
-    color: var(--color-text-muted);
+    color: var(--foreground-muted);
     font-weight: 600;
   }
 
@@ -406,10 +406,10 @@ const canRsvp = showRsvp && isLoggedIn && Boolean(cid);
     font-size: var(--text-xs);
     font-weight: 600;
     line-height: var(--leading-normal);
-    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.15);
+    box-shadow: var(--elevation-regular);
     max-width: calc(100% - 2 * var(--space-sm));
     white-space: nowrap;
-    z-index: 5;
+    z-index: var(--z-feedback);
     animation: event-card-toast-in 0.18s ease-out;
   }
   @keyframes event-card-toast-in {
@@ -428,16 +428,16 @@ const canRsvp = showRsvp && isLoggedIn && Boolean(cid);
     }
   }
   .event-card__rsvp-message[data-tone="success"] {
-    background: var(--teal-100);
-    color: var(--teal-600);
+    background: var(--success-muted);
+    color: var(--success-muted-foreground);
   }
   .event-card__rsvp-message[data-tone="neutral"] {
-    background: var(--blue-100);
-    color: var(--blue-700, var(--color-primary));
+    background: var(--info-muted);
+    color: var(--info-muted-foreground);
   }
   .event-card__rsvp-message[data-tone="error"] {
-    background: var(--coral-100);
-    color: var(--coral-600);
+    background: var(--error-muted);
+    color: var(--error-muted-foreground);
   }
 
   .event-card__rsvp[disabled] {
diff --git a/src/components/events/EventLocation.astro b/src/components/events/EventLocation.astro
index 85639c1..7f56da9 100644
--- a/src/components/events/EventLocation.astro
+++ b/src/components/events/EventLocation.astro
@@ -41,7 +41,7 @@ const locationLine = location ?? 'In person';
     align-items: center;
     gap: 6px;
     font-size: var(--text-xs);
-    color: var(--color-text-secondary);
+    color: var(--foreground-secondary);
     line-height: 1;
   }
   .event-card__hybrid,
@@ -49,17 +49,17 @@ const locationLine = location ?? 'In person';
     margin-left: 0;
     padding: 6px 9px;
     border-radius: var(--radius-sm);
-    background: oklch(50% 0.005 250 / 0.025);
+    background: color-mix(in oklch, var(--foreground) 3%, var(--card));
   }
   :global(.event-card__location-icon) {
     flex-shrink: 0;
-    color: var(--color-text-muted);
+    color: var(--foreground-muted);
   }
   :global(.event-card__location-icon--globe) {
-    color: var(--blue-500, #2563eb);
+    color: var(--info);
   }
   :global(.event-card__location-icon--pin) {
-    color: var(--coral-600, #dc2626);
+    color: var(--error);
   }
 
   .event-card__hybrid {
@@ -76,7 +76,7 @@ const locationLine = location ?? 'In person';
     transform: translateY(-50%);
     height: 22px;
     width: 9px;
-    border: 1.5px solid var(--neutral-300);
+    border: 1.5px solid var(--border);
     border-right: none;
     border-radius: 2px 0 0 2px;
   }
diff --git a/src/components/events/RsvpNotice.astro b/src/components/events/RsvpNotice.astro
index a78e360..1adbba2 100644
--- a/src/components/events/RsvpNotice.astro
+++ b/src/components/events/RsvpNotice.astro
@@ -37,12 +37,12 @@ const { message, eventName } = Astro.props;
   }
 
   .events-notice--success {
-    background: var(--teal-100);
-    color: var(--teal-600);
+    background: var(--success-muted);
+    color: var(--success-muted-foreground);
   }
 
   .events-notice--error {
-    background: var(--coral-100);
-    color: var(--coral-600);
+    background: var(--error-muted);
+    color: var(--error-muted-foreground);
   }
 </style>
diff --git a/src/components/layout/GetInvolved.astro b/src/components/layout/GetInvolved.astro
index 76f9ba4..59c5ada 100644
--- a/src/components/layout/GetInvolved.astro
+++ b/src/components/layout/GetInvolved.astro
@@ -51,7 +51,7 @@ const highlights = [
 
 <style>
   .section--alt {
-    background: var(--neutral-100);
+    background: var(--muted);
   }
 
   .highlight-card {
@@ -66,7 +66,7 @@ const highlights = [
   }
   .highlight-card p {
     font-size: var(--text-xs);
-    color: var(--color-text-muted);
+    color: var(--foreground-muted);
     line-height: var(--leading-normal);
   }
   .highlight-card a {
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index 38a95c7..878eb6d 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -10,6 +10,9 @@ const navLinks = [
 ];
 
 const currentPath = Astro.url.pathname;
+const authErrorCode = Astro.locals.authproto?.errorCode;
+const authErrorDescription = Astro.locals.authproto?.errorDescription;
+const authError = authErrorDescription ?? authErrorCode;
 
 const isActive = (href: string) =>
   currentPath === href || (href !== '/' && currentPath.startsWith(href));
@@ -43,17 +46,68 @@ const isActive = (href: string) =>
 
     <AuthMenu />
   </nav>
+  {
+    authError && (
+      <div class="auth-alert-wrap">
+        <div class="auth-alert container" role="alert">
+          <strong>Sign-in failed</strong>
+          <span>{authError}</span>
+          {authErrorCode && authErrorCode !== authError && (
+            <code>{authErrorCode}</code>
+          )}
+        </div>
+      </div>
+    )
+  }
 </header>
 
 <style>
   .site-header {
     position: sticky;
     top: 0;
-    z-index: 10;
+    z-index: var(--z-header);
     background: var(--header-bg);
     border-bottom: 1px solid var(--header-border);
   }
 
+  .auth-alert-wrap {
+    border-top: 1px solid var(--error);
+    background: color-mix(in oklch, var(--error) 10%, var(--background));
+  }
+
+  .site-header:has(.auth-menu[open]) .auth-alert-wrap {
+    display: none;
+  }
+
+  .auth-alert {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding-block: var(--space-sm);
+    color: var(--foreground);
+    font-size: var(--text-sm);
+    line-height: var(--leading-normal);
+  }
+
+  .auth-alert strong {
+    flex: 0 0 auto;
+    color: var(--error);
+  }
+
+  .auth-alert span {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .auth-alert code {
+    flex: 0 0 auto;
+    border: 1px solid color-mix(in oklch, var(--error) 35%, transparent);
+    border-radius: var(--radius-sm);
+    padding: 1px var(--space-xs);
+    color: var(--error);
+    font-size: var(--text-xs);
+  }
+
   .site-nav {
     display: flex;
     align-items: center;
@@ -160,6 +214,12 @@ const isActive = (href: string) =>
       gap: var(--space-sm);
     }
 
+    .auth-alert {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 2px;
+    }
+
     .nav-toggle-label {
       display: block;
       order: 2;
diff --git a/src/components/layout/Hero.astro b/src/components/layout/Hero.astro
index aa3c612..0492a2c 100644
--- a/src/components/layout/Hero.astro
+++ b/src/components/layout/Hero.astro
@@ -137,7 +137,7 @@ const { subscriberCount = 1000, groupCount = 10 } = Astro.props;
   /* --- Content --- */
   .hero-content {
     position: relative;
-    z-index: 1;
+    z-index: var(--z-content);
   }
 
   .hero h1 {
diff --git a/src/pages/communities.astro b/src/pages/communities.astro
index ecb91c4..1ddbe92 100644
--- a/src/pages/communities.astro
+++ b/src/pages/communities.astro
@@ -73,7 +73,7 @@ const regions = [...grouped.keys()].sort(
   .region-heading {
     font-size: var(--text-base);
     font-weight: 600;
-    color: var(--color-text-secondary);
+    color: var(--foreground-secondary);
     text-transform: uppercase;
     letter-spacing: 0.06em;
     margin: 0 0 var(--space-base);
diff --git a/src/pages/events.astro b/src/pages/events.astro
index 41604b4..35ef2a1 100644
--- a/src/pages/events.astro
+++ b/src/pages/events.astro
@@ -125,13 +125,13 @@ const rsvpMessage = Astro.url.searchParams.get('rsvp');
   }
 
   .events-notice--success {
-    background: var(--teal-100);
-    color: var(--teal-600);
+    background: var(--success-muted);
+    color: var(--success-muted-foreground);
   }
 
   .events-notice--error {
-    background: var(--coral-100);
-    color: var(--coral-600);
+    background: var(--error-muted);
+    color: var(--error-muted-foreground);
   }
 
   .events-grid {
@@ -152,11 +152,11 @@ const rsvpMessage = Astro.url.searchParams.get('rsvp');
   }
   .events-past__heading {
     font-size: var(--text-lg);
-    color: var(--color-text-secondary);
+    color: var(--foreground-secondary);
     margin-bottom: var(--space-base);
   }
   .events-past :global(.event-card) {
     filter: grayscale(0.5);
-    background: var(--neutral-50);
+    background: var(--background);
   }
 </style>
diff --git a/src/styles/global.css b/src/styles/global.css
index 5505e67..5a7b0eb 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -47,6 +47,14 @@
   --radius-md: 10px;
   --radius-lg: 16px;
   --radius-pill: 999px;
+
+  /* --- Stacking --- */
+  --z-content: 1;
+  --z-feedback: 5;
+  --z-header: 10;
+  --z-popover: 20;
+  --z-popover-raised: 30;
+  --z-top: 100;
 }
 
 /* --- Reset & Base --- */
@@ -302,7 +310,7 @@ p + p {
   color: var(--primary-foreground);
   border-radius: var(--radius-sm);
   font-weight: 600;
-  z-index: 100;
+  z-index: var(--z-top);
 }
 .skip-link:focus {
   top: var(--space-sm);
diff --git a/src/styles/tokens.semantic.css b/src/styles/tokens.semantic.css
index 582095d..d2581a7 100644
--- a/src/styles/tokens.semantic.css
+++ b/src/styles/tokens.semantic.css
@@ -48,6 +48,15 @@
   --input: var(--color-base-300);
   --ring: var(--color-primary);
 
+  /* Elevation */
+  --elevation-color: var(--foreground);
+  --elevation-low: 0 1px 2px color-mix(in oklch, var(--elevation-color) 6%, transparent);
+  --elevation-regular: 0 4px 12px color-mix(in oklch, var(--elevation-color) 12%, transparent);
+  --elevation-high:
+    0 1px 2px color-mix(in oklch, var(--elevation-color) 5%, transparent),
+    0 8px 16px color-mix(in oklch, var(--elevation-color) 8%, transparent),
+    0 24px 48px color-mix(in oklch, var(--elevation-color) 16%, transparent);
+
   /* Brand */
   --primary: var(--color-primary);
   --primary-foreground: var(--color-primary-content);
-- 
2.51.2