redesign the homepage

apps/homepage/src/styles/component-tokens.css

@@ -0,0 +1,127 @@
+/*
+ * Phase 11 component-facing token layer.
+ * Raw palette values remain in the immutable Phase 9 token source. Components consume only
+ * the semantic aliases below. Added roles are documented in docs/TOKEN_IMPLEMENTATION_v1.0.md.
+ */
+:root {
+  --surface-page: var(--color-canvas);
+  --surface-primary: var(--color-surface);
+  --surface-elevated: var(--color-surface-raised);
+  --surface-muted: var(--color-surface-muted);
+  --surface-strong: var(--color-surface-strong);
+  --text-primary: var(--color-text);
+  --text-secondary: var(--color-text-muted);
+  --text-subdued: var(--color-gray-500);
+  --text-inverse: var(--color-on-inverse);
+  --border-standard: var(--color-border);
+  --border-strong: var(--color-border-strong);
+  --interactive-primary: var(--color-action-primary);
+  --interactive-primary-hover: var(--color-action-primary-hover);
+  --interactive-conversion: var(--color-action-conversion);
+  --interactive-conversion-hover: var(--color-action-conversion-hover);
+  --interactive-danger: var(--color-red-700);
+  --link-default: var(--color-action-primary);
+  --link-hover: var(--color-action-primary-hover);
+  --focus-ring: var(--color-focus);
+  --status-success-surface: var(--color-green-100);
+  --status-success-text: var(--color-green-700);
+  --status-warning-surface: var(--color-amber-100);
+  --status-warning-text: var(--color-amber-800);
+  --status-error-surface: var(--color-red-100);
+  --status-error-text: var(--color-red-700);
+  --status-info-surface: var(--color-soft-blue);
+  --status-info-text: var(--color-blue-800);
+  --overlay-scrim: color-mix(in srgb, var(--color-navy-950) 72%, transparent);
+  --control-disabled-surface: var(--color-gray-100);
+  --control-disabled-text: var(--color-gray-600);
+  --selection-surface: var(--color-blue-200);
+  --selection-text: var(--color-gray-900);
+  --skeleton-base: var(--color-surface-strong);
+  --skeleton-highlight: var(--color-surface-raised);
+  --shadow-subtle: 0 1px 2px var(--shadow-color);
+  --shadow-card: 0 20px 60px var(--shadow-color);
+  --shadow-overlay: 0 28px 80px var(--shadow-color);
+  --container-wide: var(--size-container-max);
+  --container-content: 960px;
+  --container-reading: 720px;
+  --layout-gutter: clamp(var(--space-4), 4vw, var(--space-10));
+  --section-space: clamp(var(--space-12), 8vw, var(--space-24));
+  --header-min-block-size: 76px;
+  --header-offset: 92px;
+  --layer-base: 0;
+  --layer-sticky: 100;
+  --layer-overlay: 500;
+  --layer-skip-link: 1000;
+  --opacity-disabled: 0.62;
+  --type-display-size: clamp(2.25rem, 6vw, 4.75rem);
+  --type-heading-1-size: clamp(2rem, 5vw, 4rem);
+  --type-heading-2-size: clamp(1.75rem, 3vw, 2.75rem);
+  --type-heading-3-size: clamp(1.25rem, 2vw, 1.75rem);
+  --type-body-large-size: clamp(1.0625rem, 1.5vw, 1.25rem);
+  --type-body-size: 1rem;
+  --type-label-size: 0.875rem;
+  --type-caption-size: 0.8125rem;
+  --line-display: 1.05;
+  --line-heading: 1.18;
+  --line-body: 1.65;
+  --line-arabic-body: 1.85;
+  --tracking-display: -0.035em;
+  --tracking-label: 0.04em;
+}
+
+html[data-theme='dark'] {
+  --text-subdued: var(--color-gray-300);
+  --status-success-surface: color-mix(in srgb, var(--color-green-700) 24%, var(--color-navy-900));
+  --status-success-text: var(--color-green-100);
+  --status-warning-surface: color-mix(in srgb, var(--color-amber-800) 30%, var(--color-navy-900));
+  --status-warning-text: var(--color-amber-100);
+  --status-error-surface: color-mix(in srgb, var(--color-red-700) 28%, var(--color-navy-900));
+  --status-error-text: var(--color-red-100);
+  --status-info-text: var(--color-blue-100);
+  --control-disabled-surface: var(--color-navy-800);
+  --control-disabled-text: var(--color-gray-300);
+  --selection-surface: var(--color-blue-800);
+  --selection-text: var(--color-gray-25);
+}
+
+/* CSS-only fallback for system theme when JavaScript is unavailable or delayed. */
+@media (prefers-color-scheme: dark) {
+  html[data-theme-preference='system'] {
+    --surface-page: var(--color-navy-950);
+    --surface-primary: var(--color-navy-900);
+    --surface-elevated: var(--color-navy-850);
+    --surface-muted: var(--color-navy-900);
+    --surface-strong: var(--color-navy-800);
+    --text-primary: var(--color-blue-50);
+    --text-secondary: var(--color-gray-300);
+    --text-subdued: var(--color-gray-300);
+    --text-inverse: var(--color-navy-950);
+    --border-standard: var(--color-navy-800);
+    --border-strong: var(--color-gray-600);
+    --interactive-primary: var(--color-blue-200);
+    --interactive-primary-hover: var(--color-blue-100);
+    --interactive-conversion: var(--color-orange-400);
+    --interactive-conversion-hover: var(--color-orange-100);
+    --link-default: var(--color-blue-200);
+    --link-hover: var(--color-blue-100);
+    --focus-ring: var(--color-orange-400);
+    --status-success-surface: color-mix(in srgb, var(--color-green-700) 24%, var(--color-navy-900));
+    --status-success-text: var(--color-green-100);
+    --status-warning-surface: color-mix(in srgb, var(--color-amber-800) 30%, var(--color-navy-900));
+    --status-warning-text: var(--color-amber-100);
+    --status-error-surface: color-mix(in srgb, var(--color-red-700) 28%, var(--color-navy-900));
+    --status-error-text: var(--color-red-100);
+    --status-info-surface: var(--color-navy-800);
+    --status-info-text: var(--color-blue-100);
+    --control-disabled-surface: var(--color-navy-800);
+    --control-disabled-text: var(--color-gray-300);
+    --selection-surface: var(--color-blue-800);
+    --selection-text: var(--color-gray-25);
+    --skeleton-base: var(--color-navy-800);
+    --skeleton-highlight: var(--color-navy-850);
+    --shadow-subtle: 0 1px 2px color-mix(in srgb, var(--color-navy-950) 70%, transparent);
+    --shadow-card: 0 20px 60px color-mix(in srgb, var(--color-navy-950) 70%, transparent);
+    --shadow-overlay: 0 28px 80px color-mix(in srgb, var(--color-navy-950) 78%, transparent);
+    color-scheme: dark;
+  }
+}