@lifecorner/angular-ui-kit 3.26.0 → 3.27.1

package/src/styles/_theme-dark.scss

@@ -14,16 +14,12 @@
 @use './tokens/animation' as *;
 @use './tokens/size' as *;
 
-// Design System 2.0: dark is the DEFAULT look. `:root:not(.light)` makes dark
-// apply before any theme class is set (no first-paint white flash); `.light` is
-// the explicit opt-in escape hatch defined in _theme-light.scss.
-//
-// 3.3 (G-6): `:root.system` follows the OS without a script. A root with the
-// `system` class gets the light tokens from _theme-light.scss (`:root`) and
-// these dark tokens only under `prefers-color-scheme: dark`, so the page
-// switches with the OS setting, also before (or without) any JavaScript.
-// The declarations live in one mixin and are emitted twice (identical values).
-@mixin dark-theme-tokens {
+// Every colour token of the dark theme: --color-*, --gradient-*, --shadow-*,
+// --elevation-*, --accent-line and --app-background-image (request 043, F-25).
+// `dark-theme-tokens` below includes them for the root, and `.lc-header--dark`
+// emits them a second time, so a dark header inside a light page gives its
+// slot content the dark values (see `.lc-header--light` in _theme-light.scss).
+@mixin -dark-theme-colors {
   // ============================================================================
   // Colors - Primary (Inverted for dark mode)
   // ============================================================================
@@ -98,65 +94,6 @@
   --color-accent-rust: #{$color-accent-rust};
   --color-accent-violet: #{$color-accent-violet};
 
-  // ============================================================================
-  // Spacing (Same as light theme)
-  // ============================================================================
-  --spacing-0: #{$spacing-0};
-  --spacing-0-5: #{$spacing-0-5};
-  --spacing-1: #{$spacing-1};
-  --spacing-1-5: #{$spacing-1-5};
-  --spacing-2: #{$spacing-2};
-  --spacing-2-5: #{$spacing-2-5};
-  --spacing-3: #{$spacing-3};
-  --spacing-3-5: #{$spacing-3-5};
-  --spacing-4: #{$spacing-4};
-  --spacing-5: #{$spacing-5};
-  --spacing-6: #{$spacing-6};
-  --spacing-7: #{$spacing-7};
-  --spacing-8: #{$spacing-8};
-  --spacing-9: #{$spacing-9};
-  --spacing-10: #{$spacing-10};
-  --spacing-11: #{$spacing-11};
-  --spacing-12: #{$spacing-12};
-  --spacing-14: #{$spacing-14};
-  --spacing-16: #{$spacing-16};
-
-  // ============================================================================
-  // Typography - Font Families (Same as light theme)
-  // ============================================================================
-  --typography-font-family-base: #{$typography-font-family-base};
-  --typography-font-family-mono: #{$typography-font-family-mono};
-
-  // ============================================================================
-  // Typography - Font Sizes (Same as light theme)
-  // ============================================================================
-  --typography-font-size-xs: #{$typography-font-size-xs};
-  --typography-font-size-sm: #{$typography-font-size-sm};
-  --typography-font-size-base: #{$typography-font-size-base};
-  --typography-font-size-lg: #{$typography-font-size-lg};
-  --typography-font-size-xl: #{$typography-font-size-xl};
-  --typography-font-size-2xl: #{$typography-font-size-2xl};
-  --typography-font-size-3xl: #{$typography-font-size-3xl};
-  --typography-font-size-4xl: #{$typography-font-size-4xl};
-  --typography-font-size-5xl: #{$typography-font-size-5xl};
-  --typography-font-size-6xl: #{$typography-font-size-6xl};
-  --typography-font-size-7xl: #{$typography-font-size-7xl};
-
-  // ============================================================================
-  // Typography - Font Weights (Same as light theme)
-  // ============================================================================
-  --typography-font-weight-normal: #{$typography-font-weight-normal};
-  --typography-font-weight-medium: #{$typography-font-weight-medium};
-  --typography-font-weight-semibold: #{$typography-font-weight-semibold};
-  --typography-font-weight-bold: #{$typography-font-weight-bold};
-
-  // ============================================================================
-  // Typography - Line Heights (Same as light theme)
-  // ============================================================================
-  --typography-line-height-tight: #{$typography-line-height-tight};
-  --typography-line-height-normal: #{$typography-line-height-normal};
-  --typography-line-height-relaxed: #{$typography-line-height-relaxed};
-
   // ============================================================================
   // Elevation (DS2.0 deep layered shadows — from generated tokens)
   // ============================================================================
@@ -165,55 +102,6 @@
   --elevation-3: #{$elevation-3};
   --elevation-4: #{$elevation-4};
 
-  // ============================================================================
-  // Border Radius (Same as light theme)
-  // ============================================================================
-  --border-radius-none: #{$border-radius-none};
-  --border-radius-sm: #{$border-radius-sm};
-  --border-radius-md: #{$border-radius-md};
-  --border-radius-lg: #{$border-radius-lg};
-  --border-radius-xl: #{$border-radius-xl};
-  --border-radius-2xl: #{$border-radius-2xl};
-  --border-radius-full: #{$border-radius-full};
-
-  // ============================================================================
-  // Animation (Same as light theme)
-  // ============================================================================
-  --animation-duration-base: #{$animation-duration-fast};
-  --animation-easing-ease-in: #{$animation-easing-ease-in};
-  --animation-easing-ease-out: #{$animation-easing-ease-out};
-  --animation-easing-ease-in-out: #{$animation-easing-ease-in-out};
-
-  // ============================================================================
-  // Size - Interactive Elements (Same as light theme)
-  // ============================================================================
-  --size-interactive-xs-height: #{$size-interactive-xs-height};
-  --size-interactive-xs-padding: #{$size-interactive-xs-padding};
-  --size-interactive-xs-font-size: #{$size-interactive-xs-font-size};
-  
-  --size-interactive-sm-height: #{$size-interactive-sm-height};
-  --size-interactive-sm-padding: #{$size-interactive-sm-padding};
-  --size-interactive-sm-font-size: #{$size-interactive-sm-font-size};
-  
-  --size-interactive-md-height: #{$size-interactive-md-height};
-  --size-interactive-md-padding: #{$size-interactive-md-padding};
-  --size-interactive-md-font-size: #{$size-interactive-md-font-size};
-  
-  --size-interactive-lg-height: #{$size-interactive-lg-height};
-  --size-interactive-lg-padding: #{$size-interactive-lg-padding};
-  --size-interactive-lg-font-size: #{$size-interactive-lg-font-size};
-
-  // ============================================================================
-  // Size - Minimum Touch Target (Same as light theme)
-  // ============================================================================
-  --size-min-touch-width: #{$size-min-touch-width};
-  --size-min-touch-height: #{$size-min-touch-height};
-
-  // ============================================================================
-  // Layout - Content Width (Same as light theme)
-  // ============================================================================
-  --lc-content-max-width: #{$size-content-max-width};
-
   // ============================================================================
   // Semantic Color Mappings for Dark Theme (DS2.0 — teal-tinted surfaces)
   // ============================================================================
@@ -397,25 +285,6 @@
   --color-skeleton: rgba(132, 199, 212, 0.07);
   --color-skeleton-highlight: rgba(132, 199, 212, 0.13);
 
-  // ============================================================================
-  // Short Aliases for Common Usage (Component Convenience)
-  // ============================================================================
-  --font-family-sans: var(--typography-font-family-base);
-  --font-family-mono: var(--typography-font-family-mono);
-  --font-size-xs: var(--typography-font-size-xs);
-  --font-size-sm: var(--typography-font-size-sm);
-  --font-size-base: var(--typography-font-size-base);
-  --font-size-lg: var(--typography-font-size-lg);
-  --font-size-xl: var(--typography-font-size-xl);
-  --font-weight-normal: var(--typography-font-weight-normal);
-  --font-weight-medium: var(--typography-font-weight-medium);
-  --font-weight-semibold: var(--typography-font-weight-semibold);
-  --font-weight-bold: var(--typography-font-weight-bold);
-  --line-height-tight: var(--typography-line-height-tight);
-  --line-height-normal: var(--typography-line-height-normal);
-  --line-height-relaxed: var(--typography-line-height-relaxed);
-  --animation-timing-ease: var(--animation-easing-ease-in-out);
-  
   // Semantic color scale aliases — resolve the numeric scale some components
   // use onto the canonical semantic shades (already dark-tuned above).
   --color-error-50: rgba(157, 14, 14, 0.18);
@@ -441,6 +310,146 @@
   --color-info-700: var(--color-info-dark);
 }
 
+// Design System 2.0: dark is the DEFAULT look. `:root:not(.light)` makes dark
+// apply before any theme class is set (no first-paint white flash); `.light` is
+// the explicit opt-in escape hatch defined in _theme-light.scss.
+//
+// 3.3 (G-6): `:root.system` follows the OS without a script. A root with the
+// `system` class gets the light tokens from _theme-light.scss (`:root`) and
+// these dark tokens only under `prefers-color-scheme: dark`, so the page
+// switches with the OS setting, also before (or without) any JavaScript.
+// The declarations live in one mixin and are emitted twice (identical values).
+@mixin dark-theme-tokens {
+  @include -dark-theme-colors;
+
+  // ============================================================================
+  // Spacing (Same as light theme)
+  // ============================================================================
+  --spacing-0: #{$spacing-0};
+  --spacing-0-5: #{$spacing-0-5};
+  --spacing-1: #{$spacing-1};
+  --spacing-1-5: #{$spacing-1-5};
+  --spacing-2: #{$spacing-2};
+  --spacing-2-5: #{$spacing-2-5};
+  --spacing-3: #{$spacing-3};
+  --spacing-3-5: #{$spacing-3-5};
+  --spacing-4: #{$spacing-4};
+  --spacing-5: #{$spacing-5};
+  --spacing-6: #{$spacing-6};
+  --spacing-7: #{$spacing-7};
+  --spacing-8: #{$spacing-8};
+  --spacing-9: #{$spacing-9};
+  --spacing-10: #{$spacing-10};
+  --spacing-11: #{$spacing-11};
+  --spacing-12: #{$spacing-12};
+  --spacing-14: #{$spacing-14};
+  --spacing-16: #{$spacing-16};
+
+  // ============================================================================
+  // Typography - Font Families (Same as light theme)
+  // ============================================================================
+  --typography-font-family-base: #{$typography-font-family-base};
+  --typography-font-family-mono: #{$typography-font-family-mono};
+
+  // ============================================================================
+  // Typography - Font Sizes (Same as light theme)
+  // ============================================================================
+  --typography-font-size-xs: #{$typography-font-size-xs};
+  --typography-font-size-sm: #{$typography-font-size-sm};
+  --typography-font-size-base: #{$typography-font-size-base};
+  --typography-font-size-lg: #{$typography-font-size-lg};
+  --typography-font-size-xl: #{$typography-font-size-xl};
+  --typography-font-size-2xl: #{$typography-font-size-2xl};
+  --typography-font-size-3xl: #{$typography-font-size-3xl};
+  --typography-font-size-4xl: #{$typography-font-size-4xl};
+  --typography-font-size-5xl: #{$typography-font-size-5xl};
+  --typography-font-size-6xl: #{$typography-font-size-6xl};
+  --typography-font-size-7xl: #{$typography-font-size-7xl};
+
+  // ============================================================================
+  // Typography - Font Weights (Same as light theme)
+  // ============================================================================
+  --typography-font-weight-normal: #{$typography-font-weight-normal};
+  --typography-font-weight-medium: #{$typography-font-weight-medium};
+  --typography-font-weight-semibold: #{$typography-font-weight-semibold};
+  --typography-font-weight-bold: #{$typography-font-weight-bold};
+
+  // ============================================================================
+  // Typography - Line Heights (Same as light theme)
+  // ============================================================================
+  --typography-line-height-tight: #{$typography-line-height-tight};
+  --typography-line-height-normal: #{$typography-line-height-normal};
+  --typography-line-height-relaxed: #{$typography-line-height-relaxed};
+
+  // ============================================================================
+  // Border Radius (Same as light theme)
+  // ============================================================================
+  --border-radius-none: #{$border-radius-none};
+  --border-radius-sm: #{$border-radius-sm};
+  --border-radius-md: #{$border-radius-md};
+  --border-radius-lg: #{$border-radius-lg};
+  --border-radius-xl: #{$border-radius-xl};
+  --border-radius-2xl: #{$border-radius-2xl};
+  --border-radius-full: #{$border-radius-full};
+
+  // ============================================================================
+  // Animation (Same as light theme)
+  // ============================================================================
+  --animation-duration-base: #{$animation-duration-fast};
+  --animation-easing-ease-in: #{$animation-easing-ease-in};
+  --animation-easing-ease-out: #{$animation-easing-ease-out};
+  --animation-easing-ease-in-out: #{$animation-easing-ease-in-out};
+
+  // ============================================================================
+  // Size - Interactive Elements (Same as light theme)
+  // ============================================================================
+  --size-interactive-xs-height: #{$size-interactive-xs-height};
+  --size-interactive-xs-padding: #{$size-interactive-xs-padding};
+  --size-interactive-xs-font-size: #{$size-interactive-xs-font-size};
+  
+  --size-interactive-sm-height: #{$size-interactive-sm-height};
+  --size-interactive-sm-padding: #{$size-interactive-sm-padding};
+  --size-interactive-sm-font-size: #{$size-interactive-sm-font-size};
+  
+  --size-interactive-md-height: #{$size-interactive-md-height};
+  --size-interactive-md-padding: #{$size-interactive-md-padding};
+  --size-interactive-md-font-size: #{$size-interactive-md-font-size};
+  
+  --size-interactive-lg-height: #{$size-interactive-lg-height};
+  --size-interactive-lg-padding: #{$size-interactive-lg-padding};
+  --size-interactive-lg-font-size: #{$size-interactive-lg-font-size};
+
+  // ============================================================================
+  // Size - Minimum Touch Target (Same as light theme)
+  // ============================================================================
+  --size-min-touch-width: #{$size-min-touch-width};
+  --size-min-touch-height: #{$size-min-touch-height};
+
+  // ============================================================================
+  // Layout - Content Width (Same as light theme)
+  // ============================================================================
+  --lc-content-max-width: #{$size-content-max-width};
+
+  // ============================================================================
+  // Short Aliases for Common Usage (Component Convenience)
+  // ============================================================================
+  --font-family-sans: var(--typography-font-family-base);
+  --font-family-mono: var(--typography-font-family-mono);
+  --font-size-xs: var(--typography-font-size-xs);
+  --font-size-sm: var(--typography-font-size-sm);
+  --font-size-base: var(--typography-font-size-base);
+  --font-size-lg: var(--typography-font-size-lg);
+  --font-size-xl: var(--typography-font-size-xl);
+  --font-weight-normal: var(--typography-font-weight-normal);
+  --font-weight-medium: var(--typography-font-weight-medium);
+  --font-weight-semibold: var(--typography-font-weight-semibold);
+  --font-weight-bold: var(--typography-font-weight-bold);
+  --line-height-tight: var(--typography-line-height-tight);
+  --line-height-normal: var(--typography-line-height-normal);
+  --line-height-relaxed: var(--typography-line-height-relaxed);
+  --animation-timing-ease: var(--animation-easing-ease-in-out);
+}
+
 :root.dark,
 :root:not(.light):not(.system) {
   @include dark-theme-tokens;
@@ -457,3 +466,11 @@
 :root.system {
   color-scheme: light dark;
 }
+
+// `<lc-header theme="dark">` keeps the dark palette inside a light page
+// (request 043, F-25): its slot buttons measured 1.00:1 (outline) and 3.12:1
+// (link) there; with the tokens re-declared they match a dark page (16.32:1,
+// 12.13:1). A root-level token override does not reach inside a themed header.
+.lc-header--dark {
+  @include -dark-theme-colors;
+}

package/src/styles/_theme-light.scss

@@ -14,9 +14,14 @@
 @use './tokens/animation' as *;
 @use './tokens/size' as *;
 
-// Default theme (light) on :root
-:root,
-:root.light {
+// Every colour token of the light theme: --color-*, --gradient-*, --shadow-*,
+// --elevation-*, --accent-line and --app-background-image (request 043, F-25).
+// The root rule below emits them, and `.lc-header--light` emits them a second
+// time: derived tokens (`--color-primary: var(--color-primary-500)`) resolve
+// where they are declared, so only the full set on the header gives its slot
+// content (buttons, links, the theme toggle, the account menu) the light
+// values inside a dark page.
+@mixin -light-theme-colors {
   // ============================================================================
   // Colors - Primary
   // ============================================================================
@@ -91,65 +96,6 @@
   --color-accent-rust: #{$color-accent-rust};
   --color-accent-violet: #{$color-accent-violet};
 
-  // ============================================================================
-  // Spacing
-  // ============================================================================
-  --spacing-0: #{$spacing-0};
-  --spacing-0-5: #{$spacing-0-5};
-  --spacing-1: #{$spacing-1};
-  --spacing-1-5: #{$spacing-1-5};
-  --spacing-2: #{$spacing-2};
-  --spacing-2-5: #{$spacing-2-5};
-  --spacing-3: #{$spacing-3};
-  --spacing-3-5: #{$spacing-3-5};
-  --spacing-4: #{$spacing-4};
-  --spacing-5: #{$spacing-5};
-  --spacing-6: #{$spacing-6};
-  --spacing-7: #{$spacing-7};
-  --spacing-8: #{$spacing-8};
-  --spacing-9: #{$spacing-9};
-  --spacing-10: #{$spacing-10};
-  --spacing-11: #{$spacing-11};
-  --spacing-12: #{$spacing-12};
-  --spacing-14: #{$spacing-14};
-  --spacing-16: #{$spacing-16};
-
-  // ============================================================================
-  // Typography - Font Families
-  // ============================================================================
-  --typography-font-family-base: #{$typography-font-family-base};
-  --typography-font-family-mono: #{$typography-font-family-mono};
-
-  // ============================================================================
-  // Typography - Font Sizes
-  // ============================================================================
-  --typography-font-size-xs: #{$typography-font-size-xs};
-  --typography-font-size-sm: #{$typography-font-size-sm};
-  --typography-font-size-base: #{$typography-font-size-base};
-  --typography-font-size-lg: #{$typography-font-size-lg};
-  --typography-font-size-xl: #{$typography-font-size-xl};
-  --typography-font-size-2xl: #{$typography-font-size-2xl};
-  --typography-font-size-3xl: #{$typography-font-size-3xl};
-  --typography-font-size-4xl: #{$typography-font-size-4xl};
-  --typography-font-size-5xl: #{$typography-font-size-5xl};
-  --typography-font-size-6xl: #{$typography-font-size-6xl};
-  --typography-font-size-7xl: #{$typography-font-size-7xl};
-
-  // ============================================================================
-  // Typography - Font Weights
-  // ============================================================================
-  --typography-font-weight-normal: #{$typography-font-weight-normal};
-  --typography-font-weight-medium: #{$typography-font-weight-medium};
-  --typography-font-weight-semibold: #{$typography-font-weight-semibold};
-  --typography-font-weight-bold: #{$typography-font-weight-bold};
-
-  // ============================================================================
-  // Typography - Line Heights
-  // ============================================================================
-  --typography-line-height-tight: #{$typography-line-height-tight};
-  --typography-line-height-normal: #{$typography-line-height-normal};
-  --typography-line-height-relaxed: #{$typography-line-height-relaxed};
-
   // ============================================================================
   // Elevation (Box Shadows) — light-tuned
   // ============================================================================
@@ -162,58 +108,6 @@
   --elevation-3: 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.10);
   --elevation-4: 0 8px 8px -4px rgba(16, 24, 40, 0.04), 0 20px 24px -4px rgba(16, 24, 40, 0.10);
 
-  // ============================================================================
-  // Border Radius
-  // ============================================================================
-  --border-radius-none: #{$border-radius-none};
-  --border-radius-sm: #{$border-radius-sm};
-  --border-radius-md: #{$border-radius-md};
-  --border-radius-lg: #{$border-radius-lg};
-  --border-radius-xl: #{$border-radius-xl};
-  --border-radius-2xl: #{$border-radius-2xl};
-  --border-radius-full: #{$border-radius-full};
-
-  // ============================================================================
-  // Animation
-  // ============================================================================
-  --animation-duration-base: #{$animation-duration-fast};
-  --animation-easing-ease-in: #{$animation-easing-ease-in};
-  --animation-easing-ease-out: #{$animation-easing-ease-out};
-  --animation-easing-ease-in-out: #{$animation-easing-ease-in-out};
-
-  // ============================================================================
-  // Size - Interactive Elements
-  // ============================================================================
-  --size-interactive-xs-height: #{$size-interactive-xs-height};
-  --size-interactive-xs-padding: #{$size-interactive-xs-padding};
-  --size-interactive-xs-font-size: #{$size-interactive-xs-font-size};
-  
-  --size-interactive-sm-height: #{$size-interactive-sm-height};
-  --size-interactive-sm-padding: #{$size-interactive-sm-padding};
-  --size-interactive-sm-font-size: #{$size-interactive-sm-font-size};
-  
-  --size-interactive-md-height: #{$size-interactive-md-height};
-  --size-interactive-md-padding: #{$size-interactive-md-padding};
-  --size-interactive-md-font-size: #{$size-interactive-md-font-size};
-  
-  --size-interactive-lg-height: #{$size-interactive-lg-height};
-  --size-interactive-lg-padding: #{$size-interactive-lg-padding};
-  --size-interactive-lg-font-size: #{$size-interactive-lg-font-size};
-
-  // ============================================================================
-  // Size - Minimum Touch Target
-  // ============================================================================
-  --size-min-touch-width: #{$size-min-touch-width};
-  --size-min-touch-height: #{$size-min-touch-height};
-
-  // ============================================================================
-  // Layout - Content Width
-  // ============================================================================
-  // Canonical cap for page content. `lc-container size="xxl"` reads this, so an
-  // app shell that centres its own content against the same custom property
-  // stays in lockstep with the container instead of hard-coding a width.
-  --lc-content-max-width: #{$size-content-max-width};
-
   // ============================================================================
   // Semantic Color Mappings for Light Theme (DS2.0 — mirrors dark token names)
   // ============================================================================
@@ -415,6 +309,147 @@
   --color-skeleton: #e6eff1;
   --color-skeleton-highlight: #f2f7f8;
 
+  // Semantic color scale aliases — map the numeric scale some components use
+  // onto the three canonical semantic shades so they always resolve.
+  --color-error-50: #{$color-error-light};
+  --color-error-100: #{$color-error-light};
+  --color-error-500: var(--color-error-default);
+  --color-error-600: var(--color-error-default);
+  --color-error-700: var(--color-error-dark);
+  --color-error-800: #5a0707; // Darker shade for active state
+  --color-success-50: #{$color-success-light};
+  --color-success-100: #{$color-success-light};
+  --color-success-500: var(--color-success-default);
+  --color-success-600: var(--color-success-default);
+  --color-success-700: var(--color-success-dark);
+  --color-warning-50: #{$color-warning-light};
+  --color-warning-100: #{$color-warning-light};
+  --color-warning-500: var(--color-warning-default);
+  --color-warning-600: var(--color-warning-default);
+  --color-warning-700: var(--color-warning-dark);
+  --color-info-50: #{$color-info-light};
+  --color-info-100: #{$color-info-light};
+  --color-info-500: var(--color-info-default);
+  --color-info-600: var(--color-info-default);
+  --color-info-700: var(--color-info-dark);
+}
+
+// Default theme (light) on :root
+:root,
+:root.light {
+  @include -light-theme-colors;
+
+  // ============================================================================
+  // Spacing
+  // ============================================================================
+  --spacing-0: #{$spacing-0};
+  --spacing-0-5: #{$spacing-0-5};
+  --spacing-1: #{$spacing-1};
+  --spacing-1-5: #{$spacing-1-5};
+  --spacing-2: #{$spacing-2};
+  --spacing-2-5: #{$spacing-2-5};
+  --spacing-3: #{$spacing-3};
+  --spacing-3-5: #{$spacing-3-5};
+  --spacing-4: #{$spacing-4};
+  --spacing-5: #{$spacing-5};
+  --spacing-6: #{$spacing-6};
+  --spacing-7: #{$spacing-7};
+  --spacing-8: #{$spacing-8};
+  --spacing-9: #{$spacing-9};
+  --spacing-10: #{$spacing-10};
+  --spacing-11: #{$spacing-11};
+  --spacing-12: #{$spacing-12};
+  --spacing-14: #{$spacing-14};
+  --spacing-16: #{$spacing-16};
+
+  // ============================================================================
+  // Typography - Font Families
+  // ============================================================================
+  --typography-font-family-base: #{$typography-font-family-base};
+  --typography-font-family-mono: #{$typography-font-family-mono};
+
+  // ============================================================================
+  // Typography - Font Sizes
+  // ============================================================================
+  --typography-font-size-xs: #{$typography-font-size-xs};
+  --typography-font-size-sm: #{$typography-font-size-sm};
+  --typography-font-size-base: #{$typography-font-size-base};
+  --typography-font-size-lg: #{$typography-font-size-lg};
+  --typography-font-size-xl: #{$typography-font-size-xl};
+  --typography-font-size-2xl: #{$typography-font-size-2xl};
+  --typography-font-size-3xl: #{$typography-font-size-3xl};
+  --typography-font-size-4xl: #{$typography-font-size-4xl};
+  --typography-font-size-5xl: #{$typography-font-size-5xl};
+  --typography-font-size-6xl: #{$typography-font-size-6xl};
+  --typography-font-size-7xl: #{$typography-font-size-7xl};
+
+  // ============================================================================
+  // Typography - Font Weights
+  // ============================================================================
+  --typography-font-weight-normal: #{$typography-font-weight-normal};
+  --typography-font-weight-medium: #{$typography-font-weight-medium};
+  --typography-font-weight-semibold: #{$typography-font-weight-semibold};
+  --typography-font-weight-bold: #{$typography-font-weight-bold};
+
+  // ============================================================================
+  // Typography - Line Heights
+  // ============================================================================
+  --typography-line-height-tight: #{$typography-line-height-tight};
+  --typography-line-height-normal: #{$typography-line-height-normal};
+  --typography-line-height-relaxed: #{$typography-line-height-relaxed};
+
+  // ============================================================================
+  // Border Radius
+  // ============================================================================
+  --border-radius-none: #{$border-radius-none};
+  --border-radius-sm: #{$border-radius-sm};
+  --border-radius-md: #{$border-radius-md};
+  --border-radius-lg: #{$border-radius-lg};
+  --border-radius-xl: #{$border-radius-xl};
+  --border-radius-2xl: #{$border-radius-2xl};
+  --border-radius-full: #{$border-radius-full};
+
+  // ============================================================================
+  // Animation
+  // ============================================================================
+  --animation-duration-base: #{$animation-duration-fast};
+  --animation-easing-ease-in: #{$animation-easing-ease-in};
+  --animation-easing-ease-out: #{$animation-easing-ease-out};
+  --animation-easing-ease-in-out: #{$animation-easing-ease-in-out};
+
+  // ============================================================================
+  // Size - Interactive Elements
+  // ============================================================================
+  --size-interactive-xs-height: #{$size-interactive-xs-height};
+  --size-interactive-xs-padding: #{$size-interactive-xs-padding};
+  --size-interactive-xs-font-size: #{$size-interactive-xs-font-size};
+  
+  --size-interactive-sm-height: #{$size-interactive-sm-height};
+  --size-interactive-sm-padding: #{$size-interactive-sm-padding};
+  --size-interactive-sm-font-size: #{$size-interactive-sm-font-size};
+  
+  --size-interactive-md-height: #{$size-interactive-md-height};
+  --size-interactive-md-padding: #{$size-interactive-md-padding};
+  --size-interactive-md-font-size: #{$size-interactive-md-font-size};
+  
+  --size-interactive-lg-height: #{$size-interactive-lg-height};
+  --size-interactive-lg-padding: #{$size-interactive-lg-padding};
+  --size-interactive-lg-font-size: #{$size-interactive-lg-font-size};
+
+  // ============================================================================
+  // Size - Minimum Touch Target
+  // ============================================================================
+  --size-min-touch-width: #{$size-min-touch-width};
+  --size-min-touch-height: #{$size-min-touch-height};
+
+  // ============================================================================
+  // Layout - Content Width
+  // ============================================================================
+  // Canonical cap for page content. `lc-container size="xxl"` reads this, so an
+  // app shell that centres its own content against the same custom property
+  // stays in lockstep with the container instead of hard-coding a width.
+  --lc-content-max-width: #{$size-content-max-width};
+
   // ============================================================================
   // Short Aliases for Common Usage (Component Convenience)
   // ============================================================================
@@ -441,28 +476,13 @@
   --line-height-normal: var(--typography-line-height-normal);
   --line-height-relaxed: var(--typography-line-height-relaxed);
   --animation-timing-ease: var(--animation-easing-ease-in-out);
-  
-  // Semantic color scale aliases — map the numeric scale some components use
-  // onto the three canonical semantic shades so they always resolve.
-  --color-error-50: #{$color-error-light};
-  --color-error-100: #{$color-error-light};
-  --color-error-500: var(--color-error-default);
-  --color-error-600: var(--color-error-default);
-  --color-error-700: var(--color-error-dark);
-  --color-error-800: #5a0707; // Darker shade for active state
-  --color-success-50: #{$color-success-light};
-  --color-success-100: #{$color-success-light};
-  --color-success-500: var(--color-success-default);
-  --color-success-600: var(--color-success-default);
-  --color-success-700: var(--color-success-dark);
-  --color-warning-50: #{$color-warning-light};
-  --color-warning-100: #{$color-warning-light};
-  --color-warning-500: var(--color-warning-default);
-  --color-warning-600: var(--color-warning-default);
-  --color-warning-700: var(--color-warning-dark);
-  --color-info-50: #{$color-info-light};
-  --color-info-100: #{$color-info-light};
-  --color-info-500: var(--color-info-default);
-  --color-info-600: var(--color-info-default);
-  --color-info-700: var(--color-info-dark);
+}
+
+// `<lc-header theme="light">` keeps the light palette inside a dark page
+// (request 043, F-25): its slot buttons and primary inks measured 1.05:1
+// (outline) and 1.59:1 (link) there; with the tokens re-declared they match a
+// light page (17.12:1, 6.21:1). A root-level token override does not reach
+// inside a themed header.
+.lc-header--light {
+  @include -light-theme-colors;
 }