From 46bce51f443a6cdabdb34314e4ae98e633f752d7 Mon Sep 17 00:00:00 2001
From: Kjell Tore Guttormsen <hello@fromaitochitta.com>
Date: Mon, 4 May 2026 03:02:23 +0200
Subject: [PATCH] feat(shared): add [data-theme=light] tokens (Aksel-aligned,
 WCAG AA)

---
 shared/playground-design-system/tokens.css | 46 ++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/shared/playground-design-system/tokens.css b/shared/playground-design-system/tokens.css
index 0a20b20..d6e3280 100644
--- a/shared/playground-design-system/tokens.css
+++ b/shared/playground-design-system/tokens.css
@@ -141,6 +141,8 @@
   --sidebar-width: 280px;
 }
 
+:root { color-scheme: light; }
+
 [data-theme="dark"] {
   --color-bg:             #0F1419;
   --color-bg-soft:        #161B22;
@@ -175,6 +177,50 @@
   --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
   --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.4);
   --shadow-focus: 0 0 0 3px rgba(111, 165, 221, 0.45);
+
+  color-scheme: dark;
+}
+
+/* Light theme overrides — Aksel-aligned, WCAG AA-validated.
+   Full mirror of the dark block (26 vars) so renderers reading any
+   theme-overridable token in dark mode also resolve in light mode.
+   See research/04-wcag-dual-theme-tokens.md for hex sources + AA validation. */
+[data-theme="light"] {
+  --color-bg:             #ffffff;
+  --color-bg-soft:        #ecedef;
+  --color-surface:        #ffffff;
+  --color-surface-raised: #f5f6f7;
+  --color-surface-sunken: #ecedef;
+
+  --color-border-subtle:   #cfd3d8;
+  --color-border-moderate: #6f7785;
+  --color-border-strong:   #5d6573;
+
+  --color-text-primary:    #202733;
+  --color-text-secondary:  #49515e;
+  --color-text-tertiary:   #6f7785;       /* borderline 4.5:1 — reserve for non-body (eyebrows, labels) */
+  --color-text-link:       #1a5f99;
+  --color-text-link-hover: #002459;
+
+  /* Severity soft fills + on-colors tuned for light surfaces (Aksel). */
+  --color-severity-low-soft:      #e2fde8;
+  --color-severity-medium-soft:   #fff5e4;
+  --color-severity-high-soft:     #fff2f0;
+  --color-severity-critical-soft: #fff2f7;
+  --color-severity-extreme-soft:  #fff0f3;
+
+  --color-severity-low-on:      #002e00;
+  --color-severity-medium-on:   #481700;
+  --color-severity-high-on:     #560000;
+  --color-severity-critical-on: #560000;
+  --color-severity-extreme-on:  #ffffff;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.06);
+  --shadow-focus: 0 0 0 3px rgba(26, 95, 153, 0.4);
+
+  color-scheme: light;
 }
 
 /* Auto dark when no override */