fix(a11y): improve landing preview contrast

apps/web/src/styles.css

@@ -29,6 +29,7 @@
   --color-danger: var(--c-danger);
   --color-danger-soft: var(--c-danger-soft);
   --color-success: var(--c-success);
+  --color-success-ink: var(--c-success-ink);
 
   --radius-card: 14px;
   --radius-xl2: 20px;
@@ -103,6 +104,8 @@
   --c-danger: #e5484d;
   --c-danger-soft: color-mix(in srgb, var(--c-danger) 12%, transparent);
   --c-success: #30a46c;
+  /* Small success labels need a darker ink than the status fill itself. */
+  --c-success-ink: #18794e;
 
   --bg-grad: radial-gradient(
       80% 55% at 50% -8%,
@@ -143,6 +146,7 @@
     --c-danger: #ff6166;
     --c-danger-soft: color-mix(in srgb, var(--c-danger) 16%, transparent);
     --c-success: #3dd68c;
+    --c-success-ink: #69e0a5;
 
     --bg-grad: radial-gradient(
         75% 50% at 50% -10%,

apps/web/src/ui/Landing.tsx

@@ -288,7 +288,7 @@ function ChatPreview(): JSX.Element {
             3 devices
           </span>
         </span>
-        <span class="inline-flex items-center gap-1.5 rounded-full bg-[color-mix(in_srgb,var(--c-success)_14%,transparent)] px-2.5 py-1 font-mono text-meta font-medium uppercase tracking-[0.12em] text-success [&_svg]:size-3">
+        <span class="inline-flex items-center gap-1.5 rounded-full bg-[color-mix(in_srgb,var(--c-success)_14%,transparent)] px-2.5 py-1 font-mono text-meta font-medium uppercase tracking-[0.12em] text-success-ink [&_svg]:size-3">
           <Lock />
           Encrypted
         </span>
@@ -312,7 +312,7 @@ function ChatPreview(): JSX.Element {
 
         <div class="max-w-[85%] self-end rounded-xl2 rounded-br-[6px] bg-accent px-3.5 py-2.5 text-note leading-relaxed text-on-accent">
           Marta · +1 (202) 555-0147
-          <span class="mt-1 flex items-center justify-end gap-1 font-mono text-meta opacity-80">
+          <span class="mt-1 flex items-center justify-end gap-1 font-mono text-meta text-on-accent-muted">
             09:42
             <CheckCheck class="size-3" />
           </span>