@foliokit/cms-ui 0.4.2 → 1.0.1

package/src/lib/theme.service.ts

@@ -0,0 +1,44 @@
+import { computed, inject, Injectable, PLATFORM_ID, signal } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+export type ColorScheme = 'light' | 'dark';
+
+const STORAGE_KEY = 'folio-theme';
+
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
+  private readonly platformId = inject(PLATFORM_ID);
+
+  readonly scheme = signal<ColorScheme>(this.resolveInitialScheme());
+  readonly isDark = computed(() => this.scheme() === 'dark');
+
+  toggle(): void {
+    this.scheme.update((s) => (s === 'light' ? 'dark' : 'light'));
+    this.apply();
+  }
+
+  apply(): void {
+    if (!isPlatformBrowser(this.platformId)) return;
+    const current = this.scheme();
+    document.documentElement.setAttribute('data-theme', current);
+    try {
+      localStorage.setItem(STORAGE_KEY, current);
+    } catch {
+      // localStorage may be unavailable (private browsing, etc.)
+    }
+  }
+
+  private resolveInitialScheme(): ColorScheme {
+    if (!isPlatformBrowser(this.platformId)) return 'light';
+
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY) as ColorScheme | null;
+      if (stored === 'light' || stored === 'dark') return stored;
+    } catch {
+      // ignore
+    }
+
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return prefersDark ? 'dark' : 'light';
+  }
+}

package/src/styles/_focus.scss

@@ -0,0 +1,17 @@
+// FolioKit Global Focus Styles
+// Replaces browser default outlines and Material's mat-focus-indicator
+// with a single, brand-token-driven focus ring across all apps.
+
+*:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--focus-ring), 0 0 0 1px var(--focus-border);
+}
+
+// Disable Material's built-in focus indicator — it double-renders with ours.
+.mat-focus-indicator::before {
+  display: none !important;
+}
+
+.mat-mdc-focus-indicator::before {
+  display: none !important;
+}

package/src/styles/_reset.scss

@@ -0,0 +1,65 @@
+// FolioKit Base Reset
+// Single shared reset for all FolioKit apps.
+// Depends on semantic tokens from _tokens.scss — no Tailwind, no Material.
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  height: 100%;
+  background: var(--bg);
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 16px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  transition: background 0.25s ease, color 0.25s ease;
+  min-height: 100vh;
+}
+
+img,
+video {
+  max-width: 100%;
+  display: block;
+}
+
+a {
+  color: inherit;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: var(--r-sm);
+}
+
+// ── Reduced motion ────────────────────────────────────────────────────────────
+// WCAG 2.1 — disable non-essential animation for users who prefer reduced motion.
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/styles/_theme.scss

@@ -0,0 +1,76 @@
+// FolioKit Angular Material M3 Theme
+// Single shared theme config for all FolioKit apps.
+// Standardized on mat.theme() — replaces per-app M3 configs.
+
+@use '@angular/material' as mat;
+
+// ─── Light Theme ─────────────────────────────────────────────────────────────
+
+html,
+html[data-theme='light'] {
+  @include mat.theme((
+    color: (
+      theme-type: light,
+      primary: mat.$cyan-palette,
+      tertiary: mat.$cyan-palette,
+    ),
+    typography: 'Plus Jakarta Sans',
+    density: 0,
+  ));
+
+  // FolioKit → M3 system token bridge
+  --mat-sys-primary: var(--teal-500);
+  --mat-sys-on-primary: #FFFFFF;
+  --mat-sys-surface: var(--surface-1);
+  --mat-sys-on-surface: var(--text-primary);
+  --mat-sys-surface-variant: var(--surface-2);
+  --mat-sys-outline: var(--border-strong);
+  --mat-sys-background: var(--bg);
+
+  // ── Brand motion timing (nudges Material animations) ─────────────────────
+  --mat-sys-motion-duration-short1: 120ms;
+  --mat-sys-motion-duration-medium1: 180ms;
+
+  // ── Form field overrides (OPTION A) ──────────────────────────────────────
+  --mat-form-field-container-shape: var(--r-md);
+  --mat-form-field-outlined-idle-outline-color: var(--border-strong);
+  --mat-form-field-outlined-hover-outline-color: var(--border-accent);
+  --mdc-outlined-text-field-focus-outline-color: var(--focus-border);
+  --mdc-outlined-text-field-label-text-size: 12px;
+  --mdc-outlined-text-field-label-text-weight: 500;
+}
+
+// ─── Dark Theme ──────────────────────────────────────────────────────────────
+
+html[data-theme='dark'] {
+  @include mat.theme((
+    color: (
+      theme-type: dark,
+      primary: mat.$cyan-palette,
+      tertiary: mat.$cyan-palette,
+    ),
+    typography: 'Plus Jakarta Sans',
+    density: 0,
+  ));
+
+  // FolioKit → M3 system token bridge
+  --mat-sys-primary: var(--teal-400);
+  --mat-sys-on-primary: var(--slate-950);
+  --mat-sys-surface: var(--surface-1);
+  --mat-sys-on-surface: var(--text-primary);
+  --mat-sys-surface-variant: var(--surface-2);
+  --mat-sys-outline: var(--border-strong);
+  --mat-sys-background: var(--bg);
+
+  // ── Brand motion timing ───────────────────────────────────────────────────
+  --mat-sys-motion-duration-short1: 120ms;
+  --mat-sys-motion-duration-medium1: 180ms;
+
+  // ── Form field overrides (OPTION A) ──────────────────────────────────────
+  --mat-form-field-container-shape: var(--r-md);
+  --mat-form-field-outlined-idle-outline-color: var(--border-strong);
+  --mat-form-field-outlined-hover-outline-color: var(--border-accent);
+  --mdc-outlined-text-field-focus-outline-color: var(--focus-border);
+  --mdc-outlined-text-field-label-text-size: 12px;
+  --mdc-outlined-text-field-label-text-weight: 500;
+}

package/src/styles/_tokens.scss

@@ -0,0 +1,216 @@
+:root {
+  /* Slate — primary neutral (cool blue-grey) */
+  --slate-950: #0C0F14;
+  --slate-900: #151A23;
+  --slate-800: #1E2533;
+  --slate-700: #2D3748;
+  --slate-600: #4A5568;
+  --slate-500: #718096;
+  --slate-400: #A0AEC0;
+  --slate-300: #CBD5E0;
+  --slate-200: #E2E8F0;
+  --slate-100: #EDF2F7;
+  --slate-50:  #F7FAFC;
+  /* Cloud — page surfaces */
+  --cloud-0:   #FFFFFF;
+  --cloud-100: #F8FAFD;
+  --cloud-200: #F0F4F9;
+  --cloud-300: #E4ECF4;
+  /* Teal — brand accent */
+  --teal-900: #0D2B2B;
+  --teal-800: #134040;
+  --teal-700: #1A5C5C;
+  --teal-600: #217A7A;
+  --teal-500: #2A9797;
+  --teal-400: #38B2AC;
+  --teal-300: #6DD5CE;
+  --teal-200: #B2E8E5;
+  --teal-100: #E0F5F4;
+  --teal-50:  #F0FAFA;
+  /* Violet — Angular flare, used sparingly */
+  --violet-600: #553C9A;
+  --violet-500: #6B46C1;
+  --violet-400: #805AD5;
+  --violet-100: #EDE9FE;
+  --violet-50:  #F5F3FF;
+  /* Functional */
+  --green-700: #1A5C38;
+  --green-600: #22794A;
+  --green-400: #4ADE80;
+  --green-100: #D4EDDA;
+  --blue-700:  #1A3F7A;
+  --blue-600:  #2252A4;
+  --blue-400:  #60A5FA;
+  --blue-100:  #D6E4F7;
+  --red-700:   #7D1F1A;
+  --red-600:   #A12B24;
+  --red-100:   #F9DEDD;
+  --amber-600: #C27820;
+  --amber-500: #D4892A;
+  --amber-400: #E09A40;
+  --amber-100: #FBF0DC;
+  /* Typography */
+  --font-display: 'Fraunces', Georgia, serif;
+  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
+  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
+  /* Radii */
+  --r-xs:  2px;
+  --r-sm:  4px;
+  --r-md:  6px;
+  --r-lg:  10px;
+  --r-xl:  14px;
+  --r-2xl: 20px;
+  /* Code block (always dark regardless of theme) */
+  --code-block-bg:   #141920;
+  --code-block-text: #CDD9E8;
+}
+[data-theme="light"] {
+  --bg:             var(--cloud-100);
+  --bg-subtle:      var(--cloud-200);
+  --surface-0:      var(--cloud-0);
+  --surface-1:      var(--cloud-100);
+  --surface-2:      var(--cloud-200);
+  --surface-3:      var(--cloud-300);
+  --border:         var(--slate-200);
+  --border-strong:  var(--slate-300);
+  --border-accent:  var(--teal-300);
+  --text-primary:   var(--slate-900);
+  --text-secondary: var(--slate-600);
+  --text-muted:     var(--slate-400);
+  --text-disabled:  var(--slate-300);
+  --text-accent:    var(--teal-600);
+  --text-on-accent: #FFFFFF;
+  --text-on-dark:   #E8EDF5;
+  --btn-primary-bg:    var(--teal-500);
+  --btn-primary-text:  #FFFFFF;
+  --btn-primary-hover: var(--teal-600);
+  --logo-bg:   var(--slate-900);
+  --logo-text: var(--cloud-0);
+  --logo-dot:  var(--teal-400);
+  --focus-ring:   rgba(42, 151, 151, 0.22);
+  --focus-border: var(--teal-500);
+  --shadow-sm: 0 1px 3px rgba(12,15,20,0.07), 0 1px 2px rgba(12,15,20,0.04);
+  --shadow-md: 0 3px 10px rgba(12,15,20,0.08), 0 1px 4px rgba(12,15,20,0.05);
+  --shadow-lg: 0 8px 28px rgba(12,15,20,0.10), 0 2px 8px rgba(12,15,20,0.06);
+  --shadow-xl: 0 20px 56px rgba(12,15,20,0.12), 0 4px 16px rgba(12,15,20,0.07);
+  --nav-active-bg:    var(--teal-50);
+  --nav-active-color: var(--teal-800);
+  --warning:          var(--amber-600);
+  --warning-subtle:   var(--amber-100);
+  color-scheme: light;
+}
+// ─── Badge classes ────────────────────────────────────────────────────────────
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 2px 7px;
+  border-radius: var(--r-sm);
+  white-space: nowrap;
+}
+
+[data-theme="light"] {
+  .badge-pub {
+    background: var(--green-100);
+    color: var(--green-700);
+  }
+  .badge-draft {
+    background: var(--slate-100);
+    color: var(--slate-600);
+  }
+  .badge-sched {
+    background: var(--blue-100);
+    color: var(--blue-700);
+  }
+}
+
+[data-theme="dark"] .badge-pub {
+  background: color-mix(in srgb, var(--green-600) 20%, transparent);
+  color: var(--green-100);
+}
+[data-theme="dark"] .badge-draft {
+  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
+  color: var(--text-muted);
+}
+[data-theme="dark"] .badge-sched {
+  background: color-mix(in srgb, var(--blue-600) 20%, transparent);
+  color: var(--blue-100);
+}
+
+// ─── Avatar classes ───────────────────────────────────────────────────────────
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: var(--logo-bg);
+  color: var(--logo-text);
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: 10px;
+  flex-shrink: 0;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.avatar--lg {
+  width: 64px;
+  height: 64px;
+  font-size: 22px;
+}
+
+.avatar--xl {
+  width: 96px;
+  height: 96px;
+  font-size: 32px;
+}
+
+[data-theme="dark"] {
+  --bg:             #1A1F2E;
+  --bg-subtle:      #1E2535;
+  --surface-0:      #242B3D;
+  --surface-1:      #2A3347;
+  --surface-2:      #303B52;
+  --surface-3:      #3A4660;
+  --border:         rgba(255, 255, 255, 0.09);
+  --border-strong:  rgba(255, 255, 255, 0.16);
+  --border-accent:  rgba(56, 178, 172, 0.40);
+  --text-primary:   #E8EDF5;
+  --text-secondary: #9AACBF;
+  --text-muted:     #5F7490;
+  --text-disabled:  #3D4F63;
+  --text-accent:    var(--teal-300);
+  --text-on-accent: var(--slate-950);
+  --text-on-dark:   #E8EDF5;
+  --btn-primary-bg:    var(--teal-400);
+  --btn-primary-text:  var(--slate-950);
+  --btn-primary-hover: var(--teal-300);
+  --logo-bg:   var(--teal-500);
+  --logo-text: #FFFFFF;
+  --logo-dot:  var(--teal-200);
+  --focus-ring:   rgba(56, 178, 172, 0.28);
+  --focus-border: var(--teal-400);
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
+  --shadow-md: 0 3px 10px rgba(0,0,0,0.35);
+  --shadow-lg: 0 8px 28px rgba(0,0,0,0.40);
+  --shadow-xl: 0 20px 56px rgba(0,0,0,0.50);
+  --nav-active-bg:    rgba(56, 178, 172, 0.14);
+  --nav-active-color: var(--text-primary);
+  --warning:          var(--amber-400);
+  --warning-subtle:   rgba(122, 74, 0, 0.18);
+  color-scheme: dark;
+}

package/src/styles/_typography.scss

@@ -0,0 +1,146 @@
+// ── Web fonts ─────────────────────────────────────────────────────────────────
+// Google Fonts CDN removed for privacy and CSP compliance.
+// The font CSS custom properties (--font-display, --font-mono, --font-sans) in
+// _tokens.scss include system font fallbacks that activate automatically when
+// the named web fonts are not loaded.
+//
+// To re-enable Google Fonts, uncomment the line below:
+// @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,600&family=JetBrains+Mono:wght@300;400;500&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
+//
+// Or use self-hosted font packages from Fontsource (no CDN, full control):
+//   npm install @fontsource-variable/fraunces @fontsource-variable/jetbrains-mono @fontsource-variable/plus-jakarta-sans
+// Then import in your app's styles.scss:
+//   @import '@fontsource-variable/fraunces/index.css';
+//   @import '@fontsource-variable/jetbrains-mono/index.css';
+//   @import '@fontsource-variable/plus-jakarta-sans/index.css';
+// ─────────────────────────────────────────────────────────────────────────────
+
+// ── Article body content ──────────────────────────────────────────────────────
+
+.folio-prose {
+
+  p {
+    font-size: 16px;
+    line-height: 1.85;
+    color: var(--text-primary);
+    margin-bottom: 1.3em;
+  }
+
+  h2 {
+    font-family: var(--font-display);
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: -0.015em;
+    margin: 2em 0 0.6em;
+    color: var(--text-primary);
+    line-height: 1.2;
+  }
+
+  h3 {
+    font-family: var(--font-display);
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin: 1.75em 0 0.5em;
+    color: var(--text-primary);
+  }
+
+  blockquote {
+    border-left: 2px solid var(--text-accent);
+    padding: 4px 20px;
+    margin: 1.8em 0;
+    font-family: var(--font-display);
+    font-style: italic;
+    font-size: 1.25rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+  }
+
+  a {
+    color: var(--text-accent);
+    text-underline-offset: 3px;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  code {
+    font-family: var(--font-mono);
+    font-size: 0.87em;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: var(--r-xs);
+    padding: 1px 5px;
+    color: var(--text-accent);
+  }
+
+  pre {
+    background: var(--code-block-bg);
+    border-radius: var(--r-lg);
+    padding: 20px;
+    overflow-x: auto;
+    margin: 1.5em 0;
+
+    code {
+      background: none;
+      border: none;
+      padding: 0;
+      color: var(--code-block-text);
+      font-size: 13px;
+      line-height: 1.75;
+    }
+  }
+
+  ul,
+  ol {
+    padding-left: 1.5em;
+    margin-bottom: 1.25em;
+  }
+
+  li {
+    margin-bottom: 0.4em;
+    line-height: 1.7;
+  }
+
+  img {
+    border-radius: var(--r-md);
+    border: 1px solid var(--border);
+    margin: 2em 0;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 2.5em 0;
+  }
+
+  strong {
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9em;
+    margin: 1.5em 0;
+  }
+
+  th {
+    font-family: var(--font-mono);
+    font-size: 0.7em;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    font-weight: 400;
+    color: var(--text-muted);
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border);
+    text-align: left;
+  }
+
+  td {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border);
+    color: var(--text-primary);
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,5 @@
+@forward 'tokens';
+@forward 'reset';
+@forward 'theme';
+@forward 'typography';
+@forward 'focus';

package/src/styles/tokens.css

@@ -0,0 +1,135 @@
+/*
+ * FolioKit Design Tokens
+ *
+ * CSS custom-property contract for the FolioKit design system.
+ * Import this file in your angular.json "styles" array:
+ *
+ *   "styles": ["@foliokit/cms-ui/src/styles/tokens.css"]
+ *
+ * All semantic tokens (--bg, --surface-*, --text-*, --btn-*, --logo-*)
+ * resolve against the active [data-theme] attribute on a parent element.
+ */
+
+:root {
+  /* Slate — primary neutral (cool blue-grey) */
+  --slate-950: #0C0F14;
+  --slate-900: #151A23;
+  --slate-800: #1E2533;
+  --slate-700: #2D3748;
+  --slate-600: #4A5568;
+  --slate-500: #718096;
+  --slate-400: #A0AEC0;
+  --slate-300: #CBD5E0;
+  --slate-200: #E2E8F0;
+  --slate-100: #EDF2F7;
+  --slate-50:  #F7FAFC;
+  /* Cloud — page surfaces */
+  --cloud-0:   #FFFFFF;
+  --cloud-100: #F8FAFD;
+  --cloud-200: #F0F4F9;
+  --cloud-300: #E4ECF4;
+  /* Teal — brand accent */
+  --teal-900: #0D2B2B;
+  --teal-800: #134040;
+  --teal-700: #1A5C5C;
+  --teal-600: #217A7A;
+  --teal-500: #2A9797;
+  --teal-400: #38B2AC;
+  --teal-300: #6DD5CE;
+  --teal-200: #B2E8E5;
+  --teal-100: #E0F5F4;
+  --teal-50:  #F0FAFA;
+  /* Violet — Angular flare, used sparingly */
+  --violet-600: #553C9A;
+  --violet-500: #6B46C1;
+  --violet-400: #805AD5;
+  --violet-100: #EDE9FE;
+  --violet-50:  #F5F3FF;
+  /* Functional */
+  --green-700: #1A5C38;
+  --green-600: #22794A;
+  --green-100: #D4EDDA;
+  --blue-700:  #1A3F7A;
+  --blue-600:  #2252A4;
+  --blue-100:  #D6E4F7;
+  --red-700:   #7D1F1A;
+  --red-600:   #A12B24;
+  --red-100:   #F9DEDD;
+  /* Typography */
+  --font-display: 'Fraunces', Georgia, serif;
+  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
+  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
+  /* Radii */
+  --r-xs:  2px;
+  --r-sm:  4px;
+  --r-md:  6px;
+  --r-lg:  10px;
+  --r-xl:  14px;
+  --r-2xl: 20px;
+}
+[data-theme="light"] {
+  --bg:             var(--cloud-100);
+  --bg-subtle:      var(--cloud-200);
+  --surface-0:      var(--cloud-0);
+  --surface-1:      var(--cloud-100);
+  --surface-2:      var(--cloud-200);
+  --surface-3:      var(--cloud-300);
+  --border:         var(--slate-200);
+  --border-strong:  var(--slate-300);
+  --border-accent:  var(--teal-300);
+  --text-primary:   var(--slate-900);
+  --text-secondary: var(--slate-600);
+  --text-muted:     var(--slate-400);
+  --text-disabled:  var(--slate-300);
+  --text-accent:    var(--teal-600);
+  --text-on-accent: #FFFFFF;
+  --text-on-dark:   #E8EDF5;
+  --btn-primary-bg:    var(--teal-500);
+  --btn-primary-text:  #FFFFFF;
+  --btn-primary-hover: var(--teal-600);
+  --logo-bg:   var(--slate-900);
+  --logo-text: var(--cloud-0);
+  --logo-dot:  var(--teal-400);
+  --focus-ring:   rgba(42, 151, 151, 0.22);
+  --focus-border: var(--teal-500);
+  --shadow-sm: 0 1px 3px rgba(12,15,20,0.07), 0 1px 2px rgba(12,15,20,0.04);
+  --shadow-md: 0 3px 10px rgba(12,15,20,0.08), 0 1px 4px rgba(12,15,20,0.05);
+  --shadow-lg: 0 8px 28px rgba(12,15,20,0.10), 0 2px 8px rgba(12,15,20,0.06);
+  --shadow-xl: 0 20px 56px rgba(12,15,20,0.12), 0 4px 16px rgba(12,15,20,0.07);
+  --nav-active-bg:    var(--teal-50);
+  --nav-active-color: var(--teal-800);
+  color-scheme: light;
+}
+[data-theme="dark"] {
+  --bg:             #1A1F2E;
+  --bg-subtle:      #1E2535;
+  --surface-0:      #242B3D;
+  --surface-1:      #2A3347;
+  --surface-2:      #303B52;
+  --surface-3:      #3A4660;
+  --border:         rgba(255, 255, 255, 0.09);
+  --border-strong:  rgba(255, 255, 255, 0.16);
+  --border-accent:  rgba(56, 178, 172, 0.40);
+  --text-primary:   #E8EDF5;
+  --text-secondary: #9AACBF;
+  --text-muted:     #5F7490;
+  --text-disabled:  #3D4F63;
+  --text-accent:    var(--teal-300);
+  --text-on-accent: var(--slate-950);
+  --text-on-dark:   #E8EDF5;
+  --btn-primary-bg:    var(--teal-400);
+  --btn-primary-text:  var(--slate-950);
+  --btn-primary-hover: var(--teal-300);
+  --logo-bg:   var(--teal-500);
+  --logo-text: #FFFFFF;
+  --logo-dot:  var(--teal-200);
+  --focus-ring:   rgba(56, 178, 172, 0.28);
+  --focus-border: var(--teal-400);
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
+  --shadow-md: 0 3px 10px rgba(0,0,0,0.35);
+  --shadow-lg: 0 8px 28px rgba(0,0,0,0.40);
+  --shadow-xl: 0 20px 56px rgba(0,0,0,0.50);
+  --nav-active-bg:    rgba(56, 178, 172, 0.14);
+  --nav-active-color: var(--text-primary);
+  color-scheme: dark;
+}