@fabio.caffarello/react-design-system 4.4.0 → 4.5.0

package/dist/tokens.css

@@ -0,0 +1,2920 @@
+/*! Design System raw token source — @theme + light/dark overrides.
+ * Generated from src/styles/tokens.css by scripts/build-tokens-css.mjs (issue #234).
+ * Consume via the "./theme" export alongside "./styles":
+ *   @import "tailwindcss";
+ *   @import "@fabio.caffarello/react-design-system/styles" layer(rds);
+ *   @import "@fabio.caffarello/react-design-system/theme";
+ * Your Tailwind generates the utilities natively from the @theme blocks below.
+ * DO NOT edit dist/tokens.css by hand — edit the src/styles token files. */
+
+/**
+ * Design System — Raw Token Source (consumer-extendable)
+ *
+ * This is the SOURCE-of-truth token cascade with NOTHING Tailwind-specific
+ * around it: no `@import "tailwindcss"`, no `@source`, no utilities, no
+ * component classes. It carries only the `@theme {…}` blocks (primitives +
+ * semantic) and the light/dark selector overrides.
+ *
+ * It exists so a Tailwind v4 consumer can `@import` the design system's
+ * tokens RAW and let THEIR OWN Tailwind generate the utilities natively
+ * (`text-fg-brand`, `bg-surface-brand-strong`, `ring-line-focus`, …) —
+ * theme-aware, with one source of truth and no fragile re-export bridge.
+ * Issue #234.
+ *
+ * Build artifact: `scripts/build-tokens-css.mjs` inlines this `@import`
+ * chain into `dist/tokens.css` WITHOUT running it through Tailwind (the
+ * `@theme` blocks must reach the consumer uncompiled). Published as the
+ * `./theme` (and `./theme.css`) package export.
+ *
+ * DO NOT add `@import "tailwindcss"`, `@source`, `@apply`, or utility/
+ * component CSS here — those belong to `src/styles/index.css` (the batteries-
+ * included compiled `./styles` bundle), never to the raw token source.
+ * `scripts/validate-theme-export.mjs` fails the build if any leak in.
+ *
+ * The import order mirrors `src/styles/index.css` exactly (primitives →
+ * semantic → themes), minus the Tailwind entry and the utilities tail, so
+ * the two never drift in token coverage.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ */
+
+/* ============================================
+ * PRIMITIVE TOKENS
+ * Raw design values — colors, spacing, etc.
+ * ============================================ */
+
+/* ↳ inlined from src/styles/primitives/colors.css */
+/**
+ * Design System - Primitive Colors
+ *
+ * Complete color scales (50-950) for the design system.
+ * These are the raw color values that semantic tokens reference.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ * @version 1.0.0
+ */
+
+@theme {
+  /* ============================================
+   * BASE COLORS
+   * ============================================ */
+
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-transparent: transparent;
+  --color-current: currentColor;
+
+  /* ============================================
+   * INDIGO - Primary Brand Color
+   * Modern, tech, innovation
+   * ============================================ */
+
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-400: #818cf8;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+  --color-indigo-950: #1e1b4b;
+
+  /* ============================================
+   * VIOLET - Secondary Brand Color
+   * Complementary to indigo, creative accent
+   * ============================================ */
+
+  --color-violet-50: #f5f3ff;
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6fe;
+  --color-violet-300: #c4b5fd;
+  --color-violet-400: #a78bfa;
+  --color-violet-500: #8b5cf6;
+  --color-violet-600: #7c3aed;
+  --color-violet-700: #6d28d9;
+  --color-violet-800: #5b21b6;
+  --color-violet-900: #4c1d95;
+  --color-violet-950: #2e1065;
+
+  /* ============================================
+   * CYAN - Accent Color
+   * Fresh, modern highlights
+   * ============================================ */
+
+  --color-cyan-50: #ecfeff;
+  --color-cyan-100: #cffafe;
+  --color-cyan-200: #a5f3fc;
+  --color-cyan-300: #67e8f9;
+  --color-cyan-400: #22d3ee;
+  --color-cyan-500: #06b6d4;
+  --color-cyan-600: #0891b2;
+  --color-cyan-700: #0e7490;
+  --color-cyan-800: #155e75;
+  --color-cyan-900: #164e63;
+  --color-cyan-950: #083344;
+
+  /* ============================================
+   * SLATE - Neutral Color
+   * UI backgrounds, text, borders
+   * ============================================ */
+
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+  --color-slate-950: #020617;
+
+  /* ============================================
+   * GRAY - Alternative Neutral
+   * Pure gray without blue undertone
+   * ============================================ */
+
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+
+  /* ============================================
+   * EMERALD - Success Color
+   * Positive actions, confirmations
+   * ============================================ */
+
+  --color-emerald-50: #ecfdf5;
+  --color-emerald-100: #d1fae5;
+  --color-emerald-200: #a7f3d0;
+  --color-emerald-300: #6ee7b7;
+  --color-emerald-400: #34d399;
+  --color-emerald-500: #10b981;
+  --color-emerald-600: #059669;
+  --color-emerald-700: #047857;
+  --color-emerald-800: #065f46;
+  --color-emerald-900: #064e3b;
+  --color-emerald-950: #022c22;
+
+  /* ============================================
+   * GREEN - Alternative Success
+   * Brighter, more vibrant success
+   * ============================================ */
+
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-green-950: #052e16;
+
+  /* ============================================
+   * AMBER - Warning Color
+   * Caution, attention needed
+   * ============================================ */
+
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c7;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  --color-amber-950: #451a03;
+
+  /* ============================================
+   * YELLOW - Alternative Warning
+   * Brighter, more visible warning
+   * ============================================ */
+
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c3;
+  --color-yellow-200: #fef08a;
+  --color-yellow-300: #fde047;
+  --color-yellow-400: #facc15;
+  --color-yellow-500: #eab308;
+  --color-yellow-600: #ca8a04;
+  --color-yellow-700: #a16207;
+  --color-yellow-800: #854d0e;
+  --color-yellow-900: #713f12;
+  --color-yellow-950: #422006;
+
+  /* ============================================
+   * ORANGE - Energetic Accent
+   * Energy, enthusiasm, CTAs
+   * ============================================ */
+
+  --color-orange-50: #fff7ed;
+  --color-orange-100: #ffedd5;
+  --color-orange-200: #fed7aa;
+  --color-orange-300: #fdba74;
+  --color-orange-400: #fb923c;
+  --color-orange-500: #f97316;
+  --color-orange-600: #ea580c;
+  --color-orange-700: #c2410c;
+  --color-orange-800: #9a3412;
+  --color-orange-900: #7c2d12;
+  --color-orange-950: #431407;
+
+  /* ============================================
+   * ROSE - Error Color
+   * Errors, destructive actions
+   * ============================================ */
+
+  --color-rose-50: #fff1f2;
+  --color-rose-100: #ffe4e6;
+  --color-rose-200: #fecdd3;
+  --color-rose-300: #fda4af;
+  --color-rose-400: #fb7185;
+  --color-rose-500: #f43f5e;
+  --color-rose-600: #e11d48;
+  --color-rose-700: #be123c;
+  --color-rose-800: #9f1239;
+  --color-rose-900: #881337;
+  --color-rose-950: #4c0519;
+
+  /* ============================================
+   * RED - Alternative Error
+   * Pure red for critical errors
+   * ============================================ */
+
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
+
+  /* ============================================
+   * SKY - Info Color
+   * Informational, neutral feedback
+   * ============================================ */
+
+  --color-sky-50: #f0f9ff;
+  --color-sky-100: #e0f2fe;
+  --color-sky-200: #bae6fd;
+  --color-sky-300: #7dd3fc;
+  --color-sky-400: #38bdf8;
+  --color-sky-500: #0ea5e9;
+  --color-sky-600: #0284c7;
+  --color-sky-700: #0369a1;
+  --color-sky-800: #075985;
+  --color-sky-900: #0c4a6e;
+  --color-sky-950: #082f49;
+
+  /* ============================================
+   * BLUE - Alternative Info
+   * Traditional blue info color
+   * ============================================ */
+
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  --color-blue-950: #172554;
+
+  /* ============================================
+   * FUCHSIA - Creative Accent
+   * Vibrant, playful, creative variant
+   * ============================================ */
+
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-100: #fae8ff;
+  --color-fuchsia-200: #f5d0fe;
+  --color-fuchsia-300: #f0abfc;
+  --color-fuchsia-400: #e879f9;
+  --color-fuchsia-500: #d946ef;
+  --color-fuchsia-600: #c026d3;
+  --color-fuchsia-700: #a21caf;
+  --color-fuchsia-800: #86198f;
+  --color-fuchsia-900: #701a75;
+  --color-fuchsia-950: #4a044e;
+
+  /* ============================================
+   * PINK - Soft Accent
+   * Softer than fuchsia, friendly
+   * ============================================ */
+
+  --color-pink-50: #fdf2f8;
+  --color-pink-100: #fce7f3;
+  --color-pink-200: #fbcfe8;
+  --color-pink-300: #f9a8d4;
+  --color-pink-400: #f472b6;
+  --color-pink-500: #ec4899;
+  --color-pink-600: #db2777;
+  --color-pink-700: #be185d;
+  --color-pink-800: #9d174d;
+  --color-pink-900: #831843;
+  --color-pink-950: #500724;
+
+  /* ============================================
+   * PURPLE - Deep Accent
+   * Royal, premium feel
+   * ============================================ */
+
+  --color-purple-50: #faf5ff;
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d5ff;
+  --color-purple-300: #d8b4fe;
+  --color-purple-400: #c084fc;
+  --color-purple-500: #a855f7;
+  --color-purple-600: #9333ea;
+  --color-purple-700: #7e22ce;
+  --color-purple-800: #6b21a8;
+  --color-purple-900: #581c87;
+  --color-purple-950: #3b0764;
+
+  /* ============================================
+   * TEAL - Fresh Accent
+   * Nature, freshness, balance
+   * ============================================ */
+
+  --color-teal-50: #f0fdfa;
+  --color-teal-100: #ccfbf1;
+  --color-teal-200: #99f6e4;
+  --color-teal-300: #5eead4;
+  --color-teal-400: #2dd4bf;
+  --color-teal-500: #14b8a6;
+  --color-teal-600: #0d9488;
+  --color-teal-700: #0f766e;
+  --color-teal-800: #115e59;
+  --color-teal-900: #134e4a;
+  --color-teal-950: #042f2e;
+
+  /* ============================================
+   * LIME - Vibrant Success
+   * High energy, growth
+   * ============================================ */
+
+  --color-lime-50: #f7fee7;
+  --color-lime-100: #ecfccb;
+  --color-lime-200: #d9f99d;
+  --color-lime-300: #bef264;
+  --color-lime-400: #a3e635;
+  --color-lime-500: #84cc16;
+  --color-lime-600: #65a30d;
+  --color-lime-700: #4d7c0f;
+  --color-lime-800: #3f6212;
+  --color-lime-900: #365314;
+  --color-lime-950: #1a2e05;
+}
+
+/* ↳ inlined from src/styles/primitives/brand.css */
+/**
+ * Brand Primitive Scales — brasil-a-vera identity (default, overridable)
+ *
+ * The RDS ships a default brand identity. Consumers reskin by redefining
+ * --color-brand-primary-* / --color-brand-secondary-* in their own
+ * @theme or :root. The Tailwind primitives in colors.css
+ * (--color-indigo-*, --color-pink-*, --color-cyan-*, ...) stay honest
+ * to their official Tailwind v4 HEX and are NOT the reskin surface.
+ *
+ * Semantic tokens in semantic/colors.css cascade via var() and DO NOT
+ * need to be touched by consumers.
+ *
+ * primary scale: institutional navy from brasil-a-vera globals.css.
+ * secondary scale: OKLCH-derived from ADR-024 brasil-a-vera purple
+ *   (hue 295). Reproducible via scripts/derive-brand-secondary.mjs.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ */
+
+@theme {
+  /* ============================================
+   * BRAND PRIMARY — institutional navy (brasil-a-vera)
+   * ============================================ */
+
+  --color-brand-primary-50: #f0f4f8;
+  --color-brand-primary-100: #d9e2ec;
+  --color-brand-primary-200: #bcccdc;
+  --color-brand-primary-300: #9fb3c8;
+  --color-brand-primary-400: #7390ad;
+  --color-brand-primary-500: #486581;
+  --color-brand-primary-600: #334e68;
+  --color-brand-primary-700: #243b53;
+  --color-brand-primary-800: #1a2a3a;
+  --color-brand-primary-900: #102a43;
+  --color-brand-primary-950: #061a35;
+
+  /* ============================================
+   * BRAND SECONDARY — ADR-024 purple (OKLCH-derived, hue 295)
+   * ============================================ */
+
+  --color-brand-secondary-50: #f7f5ff;
+  --color-brand-secondary-100: #eee9ff;
+  --color-brand-secondary-200: #e0d6ff;
+  --color-brand-secondary-300: #cbb8ff;
+  --color-brand-secondary-400: #aa89fc;
+  --color-brand-secondary-500: #8e58f2;
+  --color-brand-secondary-600: #703bc8;
+  --color-brand-secondary-700: #582aa2;
+  --color-brand-secondary-800: #44227e;
+  --color-brand-secondary-900: #32185d;
+  --color-brand-secondary-950: #180635;
+}
+
+/* ↳ inlined from src/styles/primitives/spacing.css */
+/**
+ * Design System - Spacing Scale
+ *
+ * Consistent spacing system based on 4px base unit.
+ * Used for margins, paddings, gaps, and layout.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ * @version 1.0.0
+ */
+
+@theme {
+  /* ============================================
+   * SPACING SCALE
+   * Base unit: 4px (0.25rem)
+   * ============================================ */
+
+  /* Micro spacing (0-4px) */
+  --spacing-0: 0px;
+  --spacing-px: 1px;
+  --spacing-0-5: 0.125rem; /* 2px */
+  --spacing-1: 0.25rem; /* 4px */
+
+  /* Small spacing (8-16px) */
+  --spacing-1-5: 0.375rem; /* 6px */
+  --spacing-2: 0.5rem; /* 8px */
+  --spacing-2-5: 0.625rem; /* 10px */
+  --spacing-3: 0.75rem; /* 12px */
+  --spacing-3-5: 0.875rem; /* 14px */
+  --spacing-4: 1rem; /* 16px */
+
+  /* Medium spacing (20-32px) */
+  --spacing-5: 1.25rem; /* 20px */
+  --spacing-6: 1.5rem; /* 24px */
+  --spacing-7: 1.75rem; /* 28px */
+  --spacing-8: 2rem; /* 32px */
+
+  /* Large spacing (36-64px) */
+  --spacing-9: 2.25rem; /* 36px */
+  --spacing-10: 2.5rem; /* 40px */
+  --spacing-11: 2.75rem; /* 44px */
+  --spacing-12: 3rem; /* 48px */
+  --spacing-14: 3.5rem; /* 56px */
+  --spacing-16: 4rem; /* 64px */
+
+  /* Extra large spacing (80-384px) */
+  --spacing-20: 5rem; /* 80px */
+  --spacing-24: 6rem; /* 96px */
+  --spacing-28: 7rem; /* 112px */
+  --spacing-32: 8rem; /* 128px */
+  --spacing-36: 9rem; /* 144px */
+  --spacing-40: 10rem; /* 160px */
+  --spacing-44: 11rem; /* 176px */
+  --spacing-48: 12rem; /* 192px */
+  --spacing-52: 13rem; /* 208px */
+  --spacing-56: 14rem; /* 224px */
+  --spacing-60: 15rem; /* 240px */
+  --spacing-64: 16rem; /* 256px */
+  --spacing-72: 18rem; /* 288px */
+  --spacing-80: 20rem; /* 320px */
+  --spacing-96: 24rem; /* 384px */
+
+  /* ============================================
+   * SEMANTIC SPACING
+   * Named tokens for common use cases
+   * ============================================ */
+
+  /* Component internal spacing */
+  --spacing-component-xs: var(--spacing-1); /* 4px - tight internal */
+  --spacing-component-sm: var(--spacing-2); /* 8px - compact */
+  --spacing-component-md: var(--spacing-3); /* 12px - default */
+  --spacing-component-lg: var(--spacing-4); /* 16px - comfortable */
+  --spacing-component-xl: var(--spacing-6); /* 24px - spacious */
+
+  /* Layout spacing */
+  --spacing-layout-xs: var(--spacing-4); /* 16px */
+  --spacing-layout-sm: var(--spacing-6); /* 24px */
+  --spacing-layout-md: var(--spacing-8); /* 32px */
+  --spacing-layout-lg: var(--spacing-12); /* 48px */
+  --spacing-layout-xl: var(--spacing-16); /* 64px */
+  --spacing-layout-2xl: var(--spacing-24); /* 96px */
+
+  /* Section spacing */
+  --spacing-section-sm: var(--spacing-12); /* 48px */
+  --spacing-section-md: var(--spacing-16); /* 64px */
+  --spacing-section-lg: var(--spacing-24); /* 96px */
+  --spacing-section-xl: var(--spacing-32); /* 128px */
+
+  /* Gap spacing (for flexbox/grid) */
+  --spacing-gap-xs: var(--spacing-1); /* 4px */
+  --spacing-gap-sm: var(--spacing-2); /* 8px */
+  --spacing-gap-md: var(--spacing-4); /* 16px */
+  --spacing-gap-lg: var(--spacing-6); /* 24px */
+  --spacing-gap-xl: var(--spacing-8); /* 32px */
+
+  /* ============================================
+   * FORM ELEMENT SPACING
+   * Specific spacing for form controls
+   * ============================================ */
+
+  --spacing-form-element: 38px; /* Standard input height */
+  --spacing-form-padding-x: var(--spacing-3); /* 12px */
+  --spacing-form-padding-y: var(--spacing-2); /* 8px */
+  --spacing-form-gap: var(--spacing-2); /* 8px between fields */
+  --spacing-form-label-gap: var(--spacing-1-5); /* 6px label to input */
+}
+
+/* ↳ inlined from src/styles/primitives/typography.css */
+/**
+ * Design System - Typography
+ *
+ * Font families, sizes, weights, and line heights.
+ * Designed for optimal readability and hierarchy.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ * @version 1.0.0
+ */
+
+@theme {
+  /* ============================================
+   * FONT FAMILIES
+   * ============================================ */
+
+  --font-sans:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace;
+
+  /* Brand font - can be customized */
+  --font-brand: var(--font-sans);
+  --font-display: var(--font-sans);
+  --font-body: var(--font-sans);
+  --font-code: var(--font-mono);
+
+  /* ============================================
+   * FONT SIZES
+   * Scale based on 1rem = 16px
+   * ============================================ */
+
+  --font-size-2xs: 0.625rem; /* 10px */
+  --font-size-xs: 0.75rem; /* 12px */
+
+  /* Tailwind 4 utility-generating namespace (--text-*).
+   * text-2xs (10px) is industry-standard for micro-text on badge
+   * counters / mini chips; size-only, no default line-height. */
+  --text-2xs: var(--font-size-2xs);
+  --font-size-sm: 0.875rem; /* 14px */
+  --font-size-base: 1rem; /* 16px */
+  --font-size-lg: 1.125rem; /* 18px */
+  --font-size-xl: 1.25rem; /* 20px */
+  --font-size-2xl: 1.5rem; /* 24px */
+  --font-size-3xl: 1.875rem; /* 30px */
+  --font-size-4xl: 2.25rem; /* 36px */
+  --font-size-5xl: 3rem; /* 48px */
+  --font-size-6xl: 3.75rem; /* 60px */
+  --font-size-7xl: 4.5rem; /* 72px */
+  --font-size-8xl: 6rem; /* 96px */
+  --font-size-9xl: 8rem; /* 128px */
+
+  /* ============================================
+   * FONT WEIGHTS
+   * ============================================ */
+
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+
+  /* ============================================
+   * LINE HEIGHTS
+   * ============================================ */
+
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+
+  /* Specific line heights */
+  --line-height-3: 0.75rem; /* 12px */
+  --line-height-4: 1rem; /* 16px */
+  --line-height-5: 1.25rem; /* 20px */
+  --line-height-6: 1.5rem; /* 24px */
+  --line-height-7: 1.75rem; /* 28px */
+  --line-height-8: 2rem; /* 32px */
+  --line-height-9: 2.25rem; /* 36px */
+  --line-height-10: 2.5rem; /* 40px */
+
+  /* ============================================
+   * LETTER SPACING
+   * ============================================ */
+
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+
+  /* ============================================
+   * TEXT DECORATION
+   * ============================================ */
+
+  --text-decoration-thickness-auto: auto;
+  --text-decoration-thickness-from-font: from-font;
+  --text-decoration-thickness-0: 0px;
+  --text-decoration-thickness-1: 1px;
+  --text-decoration-thickness-2: 2px;
+  --text-decoration-thickness-4: 4px;
+  --text-decoration-thickness-8: 8px;
+
+  /* ============================================
+   * SEMANTIC TYPOGRAPHY
+   * Pre-defined text styles
+   * ============================================ */
+
+  /* Display headings (hero sections) */
+  --text-display-1-size: var(--font-size-6xl);
+  --text-display-1-weight: var(--font-weight-bold);
+  --text-display-1-line-height: var(--line-height-tight);
+  --text-display-1-letter-spacing: var(--letter-spacing-tight);
+
+  --text-display-2-size: var(--font-size-5xl);
+  --text-display-2-weight: var(--font-weight-bold);
+  --text-display-2-line-height: var(--line-height-tight);
+  --text-display-2-letter-spacing: var(--letter-spacing-tight);
+
+  /* Headings */
+  --text-h1-size: var(--font-size-4xl);
+  --text-h1-weight: var(--font-weight-bold);
+  --text-h1-line-height: var(--line-height-tight);
+
+  --text-h2-size: var(--font-size-3xl);
+  --text-h2-weight: var(--font-weight-semibold);
+  --text-h2-line-height: var(--line-height-tight);
+
+  --text-h3-size: var(--font-size-2xl);
+  --text-h3-weight: var(--font-weight-semibold);
+  --text-h3-line-height: var(--line-height-snug);
+
+  --text-h4-size: var(--font-size-xl);
+  --text-h4-weight: var(--font-weight-semibold);
+  --text-h4-line-height: var(--line-height-snug);
+
+  --text-h5-size: var(--font-size-lg);
+  --text-h5-weight: var(--font-weight-medium);
+  --text-h5-line-height: var(--line-height-normal);
+
+  --text-h6-size: var(--font-size-base);
+  --text-h6-weight: var(--font-weight-medium);
+  --text-h6-line-height: var(--line-height-normal);
+
+  /* Body text */
+  --text-body-lg-size: var(--font-size-lg);
+  --text-body-lg-weight: var(--font-weight-normal);
+  --text-body-lg-line-height: var(--line-height-relaxed);
+
+  --text-body-size: var(--font-size-base);
+  --text-body-weight: var(--font-weight-normal);
+  --text-body-line-height: var(--line-height-normal);
+
+  --text-body-sm-size: var(--font-size-sm);
+  --text-body-sm-weight: var(--font-weight-normal);
+  --text-body-sm-line-height: var(--line-height-normal);
+
+  /* UI text */
+  --text-label-size: var(--font-size-sm);
+  --text-label-weight: var(--font-weight-medium);
+  --text-label-line-height: var(--line-height-normal);
+  --text-label-letter-spacing: var(--letter-spacing-wide);
+
+  --text-caption-size: var(--font-size-xs);
+  --text-caption-weight: var(--font-weight-normal);
+  --text-caption-line-height: var(--line-height-normal);
+
+  --text-overline-size: var(--font-size-xs);
+  --text-overline-weight: var(--font-weight-semibold);
+  --text-overline-line-height: var(--line-height-normal);
+  --text-overline-letter-spacing: var(--letter-spacing-widest);
+
+  /* Button text */
+  --text-button-sm-size: var(--font-size-xs);
+  --text-button-sm-weight: var(--font-weight-medium);
+
+  --text-button-size: var(--font-size-sm);
+  --text-button-weight: var(--font-weight-medium);
+
+  --text-button-lg-size: var(--font-size-base);
+  --text-button-lg-weight: var(--font-weight-medium);
+
+  /* Code text */
+  --text-code-size: var(--font-size-sm);
+  --text-code-weight: var(--font-weight-normal);
+  --text-code-line-height: var(--line-height-relaxed);
+}
+
+/* ↳ inlined from src/styles/primitives/shadows.css */
+/**
+ * Design System - Shadows
+ *
+ * Elevation system using box shadows.
+ * Creates depth and visual hierarchy.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ * @version 1.0.0
+ */
+
+@theme {
+  /* ============================================
+   * BASE SHADOWS
+   * Standard elevation levels
+   * ============================================ */
+
+  --shadow-none: none;
+
+  /* Extra small - subtle depth */
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  /* Small - cards, dropdowns (resting state) */
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+
+  /* Medium - hover states, popovers */
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+  /* Large - modals, dialogs */
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  /* Extra large - sticky elements, high elevation */
+  --shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* 2XL - maximum elevation */
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* Inner shadow - pressed states, inputs */
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+  /* ============================================
+   * COLORED SHADOWS
+   * For brand-colored elements
+   * ============================================ */
+
+  /* Brand-primary shadows — color-mix follows consumer reskin of
+   * --color-brand-primary-500 (issue #152 Caminho C). */
+  --shadow-primary-sm:
+    0 1px 3px 0
+      color-mix(in srgb, var(--color-brand-primary-500) 20%, transparent),
+    0 1px 2px -1px
+      color-mix(in srgb, var(--color-brand-primary-500) 20%, transparent);
+  --shadow-primary-md:
+    0 4px 6px -1px
+      color-mix(in srgb, var(--color-brand-primary-500) 20%, transparent),
+    0 2px 4px -2px
+      color-mix(in srgb, var(--color-brand-primary-500) 20%, transparent);
+  --shadow-primary-lg:
+    0 10px 15px -3px
+      color-mix(in srgb, var(--color-brand-primary-500) 20%, transparent),
+    0 4px 6px -4px
+      color-mix(in srgb, var(--color-brand-primary-500) 20%, transparent);
+
+  /* Brand-secondary shadows */
+  --shadow-secondary-sm:
+    0 1px 3px 0
+      color-mix(in srgb, var(--color-brand-secondary-500) 20%, transparent),
+    0 1px 2px -1px
+      color-mix(in srgb, var(--color-brand-secondary-500) 20%, transparent);
+  --shadow-secondary-md:
+    0 4px 6px -1px
+      color-mix(in srgb, var(--color-brand-secondary-500) 20%, transparent),
+    0 2px 4px -2px
+      color-mix(in srgb, var(--color-brand-secondary-500) 20%, transparent);
+  --shadow-secondary-lg:
+    0 10px 15px -3px
+      color-mix(in srgb, var(--color-brand-secondary-500) 20%, transparent),
+    0 4px 6px -4px
+      color-mix(in srgb, var(--color-brand-secondary-500) 20%, transparent);
+
+  /* Success (Emerald) shadows */
+  --shadow-success-sm:
+    0 1px 3px 0 rgb(16 185 129 / 0.2), 0 1px 2px -1px rgb(16 185 129 / 0.2);
+  --shadow-success-md:
+    0 4px 6px -1px rgb(16 185 129 / 0.2), 0 2px 4px -2px rgb(16 185 129 / 0.2);
+
+  /* Warning (Amber) shadows */
+  --shadow-warning-sm:
+    0 1px 3px 0 rgb(245 158 11 / 0.2), 0 1px 2px -1px rgb(245 158 11 / 0.2);
+  --shadow-warning-md:
+    0 4px 6px -1px rgb(245 158 11 / 0.2), 0 2px 4px -2px rgb(245 158 11 / 0.2);
+
+  /* Error (Rose) shadows */
+  --shadow-error-sm:
+    0 1px 3px 0 rgb(244 63 94 / 0.2), 0 1px 2px -1px rgb(244 63 94 / 0.2);
+  --shadow-error-md:
+    0 4px 6px -1px rgb(244 63 94 / 0.2), 0 2px 4px -2px rgb(244 63 94 / 0.2);
+
+  /* ============================================
+   * SEMANTIC SHADOWS
+   * Named shadows for specific use cases
+   * ============================================ */
+
+  /* Component shadows */
+  --shadow-card: var(--shadow-sm);
+  --shadow-card-hover: var(--shadow-md);
+
+  --shadow-dropdown: var(--shadow-lg);
+  --shadow-popover: var(--shadow-lg);
+  --shadow-tooltip: var(--shadow-md);
+
+  --shadow-modal: var(--shadow-xl);
+  --shadow-dialog: var(--shadow-xl);
+
+  --shadow-sticky: var(--shadow-md);
+  --shadow-float: var(--shadow-lg);
+
+  /* Input shadows */
+  --shadow-input: var(--shadow-xs);
+  --shadow-input-focus: 0 0 0 3px
+    color-mix(in srgb, var(--color-brand-primary-500) 10%, transparent);
+  --shadow-input-error: 0 0 0 3px rgb(244 63 94 / 0.1);
+  --shadow-input-success: 0 0 0 3px rgb(16 185 129 / 0.1);
+
+  /* Button shadows */
+  --shadow-button: var(--shadow-xs);
+  --shadow-button-hover: var(--shadow-sm);
+  --shadow-button-active: var(--shadow-inner);
+  --shadow-button-primary: var(--shadow-primary-sm);
+  --shadow-button-primary-hover: var(--shadow-primary-md);
+
+  /* ============================================
+   * DARK MODE SHADOWS
+   * Adjusted for dark backgrounds
+   * ============================================ */
+
+  --shadow-dark-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-dark-sm:
+    0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --shadow-dark-md:
+    0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --shadow-dark-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+  --shadow-dark-xl:
+    0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
+  --shadow-dark-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6);
+
+  /* ============================================
+   * GLOW EFFECTS
+   * For special emphasis
+   * ============================================ */
+
+  --glow-primary: 0 0 20px
+    color-mix(in srgb, var(--color-brand-primary-500) 30%, transparent);
+  --glow-secondary: 0 0 20px
+    color-mix(in srgb, var(--color-brand-secondary-500) 30%, transparent);
+  --glow-accent: 0 0 20px rgb(6 182 212 / 0.3);
+  --glow-success: 0 0 20px rgb(16 185 129 / 0.3);
+  --glow-warning: 0 0 20px rgb(245 158 11 / 0.3);
+  --glow-error: 0 0 20px rgb(244 63 94 / 0.3);
+}
+
+/* ↳ inlined from src/styles/primitives/radius.css */
+/**
+ * Design System - Border Radius
+ *
+ * Consistent corner rounding system.
+ * Creates visual softness and modern feel.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ * @version 1.0.0
+ */
+
+@theme {
+  /* ============================================
+   * BASE RADIUS SCALE
+   * ============================================ */
+
+  --radius-none: 0px;
+  --radius-sm: 0.125rem; /* 2px */
+  --radius-md: 0.25rem; /* 4px - previously 'DEFAULT' */
+  --radius-lg: 0.375rem; /* 6px */
+  --radius-xl: 0.5rem; /* 8px */
+  --radius-2xl: 0.75rem; /* 12px */
+  --radius-3xl: 1rem; /* 16px */
+  --radius-4xl: 1.5rem; /* 24px */
+  --radius-full: 9999px; /* Fully rounded (pills, circles) */
+
+  /* ============================================
+   * SEMANTIC RADIUS
+   * Named tokens for specific components
+   * ============================================ */
+
+  /* Buttons */
+  --radius-button-sm: var(--radius-md); /* 4px */
+  --radius-button: var(--radius-lg); /* 6px */
+  --radius-button-lg: var(--radius-xl); /* 8px */
+  --radius-button-pill: var(--radius-full);
+
+  /* Inputs */
+  --radius-input: var(--radius-lg); /* 6px */
+  --radius-input-sm: var(--radius-md); /* 4px */
+  --radius-input-lg: var(--radius-xl); /* 8px */
+
+  /* Cards */
+  --radius-card: var(--radius-xl); /* 8px */
+  --radius-card-sm: var(--radius-lg); /* 6px */
+  --radius-card-lg: var(--radius-2xl); /* 12px */
+
+  /* Modals and dialogs */
+  --radius-modal: var(--radius-2xl); /* 12px */
+  --radius-dialog: var(--radius-2xl); /* 12px */
+
+  /* Popovers and tooltips */
+  --radius-popover: var(--radius-xl); /* 8px */
+  --radius-tooltip: var(--radius-lg); /* 6px */
+  --radius-dropdown: var(--radius-xl); /* 8px */
+
+  /* Badges and chips */
+  --radius-badge: var(--radius-full); /* Pill shape */
+  --radius-chip: var(--radius-lg); /* 6px */
+  --radius-tag: var(--radius-md); /* 4px */
+
+  /* Avatars */
+  --radius-avatar: var(--radius-full); /* Circle */
+  --radius-avatar-square: var(--radius-lg); /* 6px */
+
+  /* Progress and sliders */
+  --radius-progress: var(--radius-full);
+  --radius-slider: var(--radius-full);
+  --radius-slider-thumb: var(--radius-full);
+
+  /* Images and media */
+  --radius-image: var(--radius-xl); /* 8px */
+  --radius-thumbnail: var(--radius-lg); /* 6px */
+}
+
+/* ↳ inlined from src/styles/primitives/animations.css */
+/**
+ * Design System - Animations
+ *
+ * Durations, easings, and transitions.
+ * Consistent motion throughout the system.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ * @version 1.0.0
+ */
+
+@theme {
+  /* ============================================
+   * DURATIONS
+   * ============================================ */
+
+  --duration-0: 0ms;
+  --duration-75: 75ms;
+  --duration-100: 100ms;
+  --duration-150: 150ms;
+  --duration-200: 200ms;
+  --duration-300: 300ms;
+  --duration-500: 500ms;
+  --duration-700: 700ms;
+  --duration-1000: 1000ms;
+
+  /* Semantic durations */
+  --duration-instant: var(--duration-75); /* Micro interactions */
+  --duration-fast: var(--duration-150); /* Quick feedback */
+  --duration-normal: var(--duration-200); /* Standard transitions */
+  --duration-slow: var(--duration-300); /* Deliberate animations */
+  --duration-slower: var(--duration-500); /* Complex animations */
+
+  /* ============================================
+   * EASINGS
+   * ============================================ */
+
+  --ease-linear: linear;
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Custom easings */
+  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+  /* Semantic easings */
+  --ease-default: var(--ease-out);
+  --ease-enter: var(--ease-out);
+  --ease-exit: var(--ease-in);
+  --ease-move: var(--ease-in-out);
+
+  /* ============================================
+   * TRANSITIONS
+   * Pre-defined transition strings
+   * ============================================ */
+
+  /* Property-specific */
+  --transition-colors:
+    color var(--duration-fast) var(--ease-default),
+    background-color var(--duration-fast) var(--ease-default),
+    border-color var(--duration-fast) var(--ease-default),
+    text-decoration-color var(--duration-fast) var(--ease-default),
+    fill var(--duration-fast) var(--ease-default),
+    stroke var(--duration-fast) var(--ease-default);
+
+  --transition-opacity: opacity var(--duration-fast) var(--ease-default);
+
+  --transition-shadow: box-shadow var(--duration-fast) var(--ease-default);
+
+  --transition-transform: transform var(--duration-normal) var(--ease-default);
+
+  /* Combined transitions */
+  --transition-all: all var(--duration-normal) var(--ease-default);
+
+  --transition-common:
+    color var(--duration-fast) var(--ease-default),
+    background-color var(--duration-fast) var(--ease-default),
+    border-color var(--duration-fast) var(--ease-default),
+    box-shadow var(--duration-fast) var(--ease-default),
+    opacity var(--duration-fast) var(--ease-default);
+
+  /* ============================================
+   * ANIMATION DELAYS
+   * ============================================ */
+
+  --delay-0: 0ms;
+  --delay-75: 75ms;
+  --delay-100: 100ms;
+  --delay-150: 150ms;
+  --delay-200: 200ms;
+  --delay-300: 300ms;
+  --delay-500: 500ms;
+  --delay-700: 700ms;
+  --delay-1000: 1000ms;
+}
+
+/* ============================================
+ * KEYFRAME ANIMATIONS
+ * ============================================ */
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in-up {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-down {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-right {
+  from {
+    transform: translateX(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes scale-in {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes scale-out {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  75%,
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
+}
+
+/* Modal/Dialog animations */
+@keyframes modal-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes modal-exit {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+}
+
+/* Toast animations */
+@keyframes toast-enter {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes toast-exit {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+/* Skeleton loading animation */
+@keyframes skeleton {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+
+/* ============================================
+ * SEMANTIC TOKENS
+ * Meaningful tokens that reference primitives.
+ * ============================================ */
+
+/* ↳ inlined from src/styles/semantic/colors.css */
+/**
+ * Design System - Semantic Colors
+ *
+ * Meaningful color tokens that reference primitive values.
+ * Declared in @theme so Tailwind v4 generates native utility classes
+ * (bg-surface-base, text-fg-primary, border-line-strong, etc.).
+ * Theme overrides (light/dark) remain in selectors —
+ * see themes/{light,dark}.css.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ * @version 1.0.0
+ */
+
+@theme {
+  /* ============================================
+   * BRAND COLORS
+   * Core brand identity colors
+   * ============================================ */
+
+  --color-brand-primary: var(--color-brand-primary-500);
+  --color-brand-primary-light: var(--color-brand-primary-400);
+  --color-brand-primary-dark: var(--color-brand-primary-600);
+  --color-brand-primary-darker: var(--color-brand-primary-700);
+
+  --color-brand-secondary: var(--color-brand-secondary-500);
+  --color-brand-secondary-light: var(--color-brand-secondary-400);
+  --color-brand-secondary-dark: var(--color-brand-secondary-600);
+
+  --color-brand-accent: var(--color-cyan-500);
+  --color-brand-accent-light: var(--color-cyan-400);
+  --color-brand-accent-dark: var(--color-cyan-600);
+
+  /* ============================================
+   * FOREGROUND COLORS
+   * Text, icons, and content
+   * ============================================ */
+
+  --color-fg-primary: var(--color-slate-900);
+  --color-fg-secondary: var(--color-slate-600);
+  --color-fg-tertiary: var(--color-slate-500);
+  --color-fg-quaternary: var(--color-slate-400);
+  --color-fg-placeholder: var(--color-slate-400);
+  --color-fg-disabled: var(--color-slate-300);
+  --color-fg-inverse: var(--color-white);
+  --color-fg-inverse-secondary: var(--color-slate-200);
+
+  /* Link colors */
+  --color-fg-link: var(--color-brand-primary-600);
+  --color-fg-link-hover: var(--color-brand-primary-700);
+  --color-fg-link-active: var(--color-brand-primary-800);
+  --color-fg-link-visited: var(--color-brand-secondary-700);
+
+  /* Brand text */
+  --color-fg-brand: var(--color-brand-primary);
+  --color-fg-brand-emphasis: var(--color-brand-primary-600);
+  --color-fg-brand-secondary: var(--color-brand-secondary);
+  --color-fg-brand-secondary-emphasis: var(--color-brand-secondary-600);
+
+  /* Feedback text */
+  --color-fg-success: var(--color-emerald-700);
+  --color-fg-warning: var(--color-amber-700);
+  --color-fg-error: var(--color-rose-700);
+  --color-fg-info: var(--color-sky-700);
+
+  /* On-color feedback text — the text that sits ON the solid (filled)
+   * status surfaces --color-{status}-solid (see FEEDBACK section). White,
+   * calibrated so it clears WCAG AA for normal text against each solid
+   * (emerald-700 5.48:1, amber-700 5.02:1, rose-700 6.29:1, sky-700 5.93:1).
+   * Do NOT confuse with --color-fg-success (the COLORED text used on neutral
+   * or soft-wash surfaces) nor with --color-fg-inverse (slate-900 in dark —
+   * a worse, semantically wrong pair over a saturated status fill). */
+  --color-fg-on-success: var(--color-white);
+  --color-fg-on-warning: var(--color-white);
+  --color-fg-on-error: var(--color-white);
+  --color-fg-on-info: var(--color-white);
+
+  /* ============================================
+   * SURFACE COLORS — Backgrounds
+   * Page and container backgrounds (canvas, subtle, muted, ...)
+   * ============================================ */
+
+  --color-surface-canvas: var(--color-white);
+  --color-surface-subtle: var(--color-slate-50);
+  --color-surface-muted: var(--color-slate-100);
+  --color-surface-emphasis: var(--color-slate-200);
+  --color-surface-strong: var(--color-slate-300);
+  --color-surface-inverse: var(--color-slate-900);
+  --color-surface-inverse-subtle: var(--color-slate-800);
+
+  /* Brand backgrounds */
+  --color-surface-brand-subtle: var(--color-brand-primary-50);
+  --color-surface-brand-muted: var(--color-brand-primary-100);
+  --color-surface-brand: var(--color-brand-primary-500);
+  --color-surface-brand-strong: var(--color-brand-primary-600);
+  --color-surface-brand-emphasis: var(--color-brand-primary-600);
+
+  --color-surface-secondary-subtle: var(--color-brand-secondary-50);
+  --color-surface-secondary: var(--color-brand-secondary-700);
+
+  --color-surface-accent-subtle: var(--color-cyan-50);
+  --color-surface-accent: var(--color-cyan-500);
+
+  /* ============================================
+   * SURFACE COLORS — Elevation layers
+   * Cards, modals, panels (canvas/base/raised/overlay/sunken)
+   * ============================================ */
+
+  --color-surface-base: var(--color-white);
+  --color-surface-raised: var(--color-white);
+  --color-surface-overlay: var(--color-white);
+  --color-surface-sunken: var(--color-slate-50);
+  --color-surface-disabled: var(--color-slate-100);
+
+  /* ============================================
+   * LINE COLORS
+   * Borders, dividers, separators
+   * ============================================ */
+
+  --color-line-default: var(--color-slate-200);
+  --color-line-muted: var(--color-slate-100);
+  --color-line-subtle: var(--color-slate-100);
+  --color-line-emphasis: var(--color-slate-300);
+  --color-line-strong: var(--color-slate-400);
+  --color-line-inverse: var(--color-slate-700);
+
+  /* Focus borders */
+  --color-line-focus: var(--color-brand-primary-500);
+  --color-line-focus-ring: var(--color-brand-primary-500);
+
+  /* Brand borders */
+  --color-line-brand: var(--color-brand-primary-500);
+  --color-line-secondary: var(--color-brand-secondary-500);
+  --color-line-accent: var(--color-cyan-500);
+
+  /* ============================================
+   * SURFACE COLORS — Interactive states
+   * Hover, active, selected, focus (fused from old state namespace)
+   * ============================================ */
+
+  --color-surface-hover: var(--color-slate-50);
+  --color-surface-hover-subtle: var(--color-slate-50);
+  --color-surface-active: var(--color-slate-100);
+  --color-surface-selected: var(--color-brand-primary-50);
+  --color-surface-selected-subtle: var(--color-brand-primary-50);
+  /* state-disabled fused into surface-disabled (identical values) */
+  --color-surface-disabled-subtle: var(--color-slate-50);
+  --color-surface-focus: var(--color-brand-primary-100);
+
+  /* ============================================
+   * FEEDBACK COLORS
+   * For success, warning, error, info states
+   * ============================================ */
+
+  /* Success */
+  --color-success: var(--color-emerald-500);
+  --color-success-light: var(--color-emerald-400);
+  --color-success-dark: var(--color-emerald-700);
+  --color-success-bg: var(--color-emerald-50);
+  --color-success-bg-emphasis: var(--color-emerald-100);
+  --color-success-border: var(--color-emerald-200);
+  --color-success-border-emphasis: var(--color-emerald-500);
+
+  /* Warning */
+  --color-warning: var(--color-amber-500);
+  --color-warning-light: var(--color-amber-400);
+  --color-warning-dark: var(--color-amber-700);
+  --color-warning-bg: var(--color-amber-50);
+  --color-warning-bg-emphasis: var(--color-amber-100);
+  --color-warning-border: var(--color-amber-200);
+  --color-warning-border-emphasis: var(--color-amber-500);
+
+  /* Error */
+  --color-error: var(--color-rose-700);
+  --color-error-light: var(--color-rose-400);
+  --color-error-dark: var(--color-rose-700);
+  --color-error-bg: var(--color-rose-50);
+  --color-error-bg-emphasis: var(--color-rose-100);
+  --color-error-border: var(--color-rose-200);
+  --color-error-border-emphasis: var(--color-rose-500);
+
+  /* Info */
+  --color-info: var(--color-sky-500);
+  --color-info-light: var(--color-sky-400);
+  --color-info-dark: var(--color-sky-700);
+  --color-info-bg: var(--color-sky-50);
+  --color-info-bg-emphasis: var(--color-sky-100);
+  --color-info-border: var(--color-sky-200);
+  --color-info-border-emphasis: var(--color-sky-500);
+
+  /* Status neutral — completes the status family (success/warning/error/info/neutral)
+   * for components like Dot, status Badge, online presence indicators. */
+  --color-status-neutral: var(--color-slate-500);
+
+  /* Solid (filled) status surfaces — saturated backgrounds that CARRY
+   * on-color text (--color-fg-on-{status}, white). Each step is the darkest
+   * needed so white text clears WCAG AA for normal text:
+   *   success emerald-700 (5.48:1), warning amber-700 (5.02:1),
+   *   error rose-700 (6.29:1), info sky-700 (5.93:1).
+   * These are the TEXT-CARRYING counterparts to the DECORATIVE solids
+   * --color-{status} (emerald-500 etc. — used for Dot/Progress fills where no
+   * text sits, and where white would only reach ~2.5:1). Same split as
+   * surface-brand (decorative) vs surface-brand-strong (carries text). They
+   * stay saturated + white in BOTH themes by design (a status chip, like a
+   * colored button), so the dark.css blocks declare identical values rather
+   * than flipping to a lighter step that white could not sit on. */
+  --color-success-solid: var(--color-emerald-700);
+  --color-warning-solid: var(--color-amber-700);
+  --color-error-solid: var(--color-rose-700);
+  --color-info-solid: var(--color-sky-700);
+
+  /* ============================================
+   * DATA-VISUALIZATION CATEGORICAL PALETTE (Okabe-Ito)
+   *
+   * Colorblind-safe categorical colors for chart series (parties, vote
+   * types, ranges). A SEPARATE axis from the semantic feedback colors:
+   * success/warning/error/info encode STATE, never CATEGORY. These are the
+   * canonical Okabe & Ito (2008) tones — the reference palette engineered to
+   * stay distinguishable under deuteranopia/protanopia/tritanopia — with the
+   * canonical `black` swapped for a neutral gray so the 8th series survives
+   * on a dark canvas. Dark-theme variants in themes/dark.css lift luminance
+   * (hue preserved) so each series clears 3:1 over slate-950 (WCAG 1.4.11).
+   * These intentionally carry literal HEX rather than referencing a tonal
+   * primitive scale — Okabe-Ito is an external canonical set, not a 50..950
+   * ramp. Consume via getChartColor(i) (src/ui/tokens/chart.ts) or the
+   * bg-chart-N / text-chart-N utilities. See .claude/rules/colors.md.
+   * ============================================ */
+
+  --color-chart-1: #e69f00; /* orange */
+  --color-chart-2: #56b4e9; /* sky blue */
+  --color-chart-3: #009e73; /* bluish green */
+  --color-chart-4: #d55e00; /* vermillion */
+  --color-chart-5: #0072b2; /* blue */
+  --color-chart-6: #cc79a7; /* reddish purple */
+  --color-chart-7: #f0e442; /* yellow */
+  --color-chart-8: #999999; /* gray (Okabe-Ito uses black; gray survives dark) */
+
+  /* Data-viz CATEGORICAL tone (soft wash) — the badge-facing member of the
+   * data-viz axis above. A reddish-purple (fuchsia) wash for "category /
+   * analytical" emphasis (e.g. a DataBadge L3/derived-data marker), kept
+   * deliberately distinct from the brand `secondary` violet (state-vs-brand
+   * vs category) and from `accent` (cyan). Mirrors the status soft-wash
+   * trio (bg / dark text / base-border); white is never on it, so the
+   * AA-relevant pair is text-dataviz-dark over bg-dataviz-bg
+   * (fuchsia-700/50 = 5.89:1 light, fuchsia-300/950 = 8.41:1 dark). */
+  --color-dataviz: var(--color-fuchsia-500);
+  --color-dataviz-bg: var(--color-fuchsia-50);
+  --color-dataviz-dark: var(--color-fuchsia-700);
+
+  /* ============================================
+   * SCRIM & TRANSLUCENT STATE LAYERS
+   * Theme-agnostic — these must stay dark in all modes by design.
+   * Scrim is a backdrop veil that focuses attention on an overlay.
+   * Tint is a translucent state layer for hover/interaction feedback
+   * on elements whose surface color is not fixed.
+   * ============================================ */
+
+  /* Scrim color (theme-agnostic — backdrop should be dark in all modes by design) */
+  --color-scrim: rgb(0 0 0 / 0.5);
+
+  /* Tint-hover color (theme-agnostic — translucent layer works over any surface) */
+  --color-tint-hover: rgb(0 0 0 / 0.1);
+
+  /* ============================================
+   * ICON COLORS
+   * For iconography
+   * ============================================ */
+
+  --color-icon-default: var(--color-slate-500);
+  --color-icon-muted: var(--color-slate-400);
+  --color-icon-subtle: var(--color-slate-300);
+  --color-icon-emphasis: var(--color-slate-700);
+  --color-icon-inverse: var(--color-white);
+  --color-icon-brand: var(--color-brand-primary-500);
+  --color-icon-success: var(--color-emerald-500);
+  --color-icon-warning: var(--color-amber-500);
+  --color-icon-error: var(--color-rose-500);
+  --color-icon-info: var(--color-sky-500);
+
+  /* ============================================
+   * OVERLAY COLORS
+   * For modals, drawers, backdrops
+   * ============================================ */
+
+  --color-overlay-light: rgb(255 255 255 / 0.8);
+  --color-overlay-dark: rgb(15 23 42 / 0.5);
+  --color-overlay-darker: rgb(15 23 42 / 0.75);
+  --color-overlay-backdrop: rgb(0 0 0 / 0.5);
+
+  /* ============================================
+   * SKELETON/LOADING COLORS
+   * For loading states
+   * ============================================ */
+
+  --color-skeleton-base: var(--color-slate-200);
+  --color-skeleton-shine: var(--color-slate-100);
+
+  /* ============================================
+   * DIVIDER COLORS
+   * For separators
+   * ============================================ */
+
+  --color-divider: var(--color-slate-200);
+  --color-divider-subtle: var(--color-slate-100);
+  --color-divider-emphasis: var(--color-slate-300);
+}
+
+/* ============================================
+ * CANVAS-TOKEN CONSUMPTION
+ *
+ * The body element materialises the design-system canvas color so it
+ * exists in the rendered DOM (axe-core walks the background-color
+ * ancestor chain to compute contrast and DOES NOT read color-scheme).
+ *
+ * Without this rule, --color-surface-canvas was defined but nothing
+ * consumed it: the browser painted an OS/UA dark default when
+ * color-scheme:dark was set, which happened to LOOK approximately
+ * correct, but axe walked the cascade, found rgba(0,0,0,0) everywhere,
+ * defaulted to assuming white-canvas, and flagged every text-fg-* over
+ * an "unbounded" area as ratio ~1.05 — even though the visible
+ * contrast was 6.9–17.0. 67% of the dark color-contrast baseline
+ * (783 of 1159 nodes in the parallel re-sweep) was this single
+ * false-positive class. PR ${??} verified the no-shift property in
+ * light, the spec-alignment shift in dark (UA accidental gray →
+ * DS-specified slate-950), and the surgical positional correlation of
+ * the drop (canvas-fallback stories evaporated; raw-color / Bucket-F /
+ * other-cause stories were untouched).
+ *
+ * `color: var(--color-fg-primary)` makes text without an explicit color
+ * inherit the DS foreground rather than the UA default. Same axe issue
+ * in the foreground direction.
+ * ============================================ */
+
+@layer base {
+  body {
+    background-color: var(--color-surface-canvas);
+    color: var(--color-fg-primary);
+  }
+}
+
+/* ↳ inlined from src/styles/semantic/surfaces.css */
+/**
+ * Design System - Surface Tokens
+ *
+ * Elevated surfaces, cards, panels, and containers.
+ * Combines colors, shadows, and borders.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ * @version 1.0.0
+ */
+
+:root {
+  /* ============================================
+   * SURFACE LEVELS
+   * Different elevation levels
+   * ============================================ */
+
+  /* Level 0 - Base/Page background */
+  --surface-0-bg: var(--color-surface-canvas);
+  --surface-0-border: transparent;
+  --surface-0-shadow: none;
+
+  /* Level 1 - Subtle elevation (sunken areas, input fields) */
+  --surface-1-bg: var(--color-surface-sunken);
+  --surface-1-border: var(--color-line-subtle);
+  --surface-1-shadow: var(--shadow-inner);
+
+  /* Level 2 - Cards, panels (resting state) */
+  --surface-2-bg: var(--color-surface-base);
+  --surface-2-border: var(--color-line-default);
+  --surface-2-shadow: var(--shadow-sm);
+
+  /* Level 3 - Raised cards (hover state) */
+  --surface-3-bg: var(--color-surface-raised);
+  --surface-3-border: var(--color-line-default);
+  --surface-3-shadow: var(--shadow-md);
+
+  /* Level 4 - Dropdowns, popovers */
+  --surface-4-bg: var(--color-surface-overlay);
+  --surface-4-border: var(--color-line-default);
+  --surface-4-shadow: var(--shadow-lg);
+
+  /* Level 5 - Modals, dialogs */
+  --surface-5-bg: var(--color-surface-overlay);
+  --surface-5-border: var(--color-line-subtle);
+  --surface-5-shadow: var(--shadow-xl);
+
+  /* Level 6 - Maximum elevation (toasts, notifications) */
+  --surface-6-bg: var(--color-surface-overlay);
+  --surface-6-border: var(--color-line-subtle);
+  --surface-6-shadow: var(--shadow-2xl);
+
+  /* ============================================
+   * COMPONENT SURFACES
+   * Pre-defined surface styles for common components
+   * ============================================ */
+
+  /* Card */
+  --surface-card-bg: var(--surface-2-bg);
+  --surface-card-border: var(--surface-2-border);
+  --surface-card-shadow: var(--surface-2-shadow);
+  --surface-card-radius: var(--radius-card);
+
+  --surface-card-hover-bg: var(--surface-3-bg);
+  --surface-card-hover-border: var(--surface-3-border);
+  --surface-card-hover-shadow: var(--surface-3-shadow);
+
+  /* Card interactive (clickable) */
+  --surface-card-interactive-bg: var(--surface-2-bg);
+  --surface-card-interactive-border: var(--color-line-default);
+  --surface-card-interactive-shadow: var(--shadow-sm);
+
+  --surface-card-interactive-hover-bg: var(--color-surface-subtle);
+  --surface-card-interactive-hover-border: var(--color-line-emphasis);
+  --surface-card-interactive-hover-shadow: var(--shadow-md);
+
+  --surface-card-interactive-active-bg: var(--color-surface-muted);
+  --surface-card-interactive-active-border: var(--color-line-emphasis);
+  --surface-card-interactive-active-shadow: var(--shadow-sm);
+
+  /* Panel */
+  --surface-panel-bg: var(--color-surface-subtle);
+  --surface-panel-border: var(--color-line-default);
+  --surface-panel-shadow: none;
+  --surface-panel-radius: var(--radius-xl);
+
+  /* Sidebar */
+  --surface-sidebar-bg: var(--color-surface-canvas);
+  --surface-sidebar-border: var(--color-line-default);
+  --surface-sidebar-shadow: var(--shadow-sm);
+
+  /* Header */
+  --surface-header-bg: var(--color-surface-canvas);
+  --surface-header-border: var(--color-line-default);
+  --surface-header-shadow: var(--shadow-sm);
+
+  /* Footer */
+  --surface-footer-bg: var(--color-surface-subtle);
+  --surface-footer-border: var(--color-line-default);
+  --surface-footer-shadow: none;
+
+  /* Modal */
+  --surface-modal-bg: var(--surface-5-bg);
+  --surface-modal-border: var(--surface-5-border);
+  --surface-modal-shadow: var(--surface-5-shadow);
+  --surface-modal-radius: var(--radius-modal);
+  --surface-modal-backdrop: var(--color-overlay-backdrop);
+
+  /* Dialog */
+  --surface-dialog-bg: var(--surface-5-bg);
+  --surface-dialog-border: var(--surface-5-border);
+  --surface-dialog-shadow: var(--surface-5-shadow);
+  --surface-dialog-radius: var(--radius-dialog);
+
+  /* Dropdown */
+  --surface-dropdown-bg: var(--surface-4-bg);
+  --surface-dropdown-border: var(--surface-4-border);
+  --surface-dropdown-shadow: var(--surface-4-shadow);
+  --surface-dropdown-radius: var(--radius-dropdown);
+
+  /* Popover */
+  --surface-popover-bg: var(--surface-4-bg);
+  --surface-popover-border: var(--surface-4-border);
+  --surface-popover-shadow: var(--surface-4-shadow);
+  --surface-popover-radius: var(--radius-popover);
+
+  /* Tooltip */
+  --surface-tooltip-bg: var(--color-slate-900);
+  --surface-tooltip-border: transparent;
+  --surface-tooltip-shadow: var(--shadow-md);
+  --surface-tooltip-radius: var(--radius-tooltip);
+  --surface-tooltip-color: var(--color-white);
+
+  /* Toast */
+  --surface-toast-bg: var(--surface-6-bg);
+  --surface-toast-border: var(--surface-6-border);
+  --surface-toast-shadow: var(--surface-6-shadow);
+  --surface-toast-radius: var(--radius-xl);
+
+  /* Input */
+  --surface-input-bg: var(--color-surface-canvas);
+  --surface-input-border: var(--color-line-default);
+  --surface-input-shadow: var(--shadow-xs);
+  --surface-input-radius: var(--radius-input);
+
+  --surface-input-hover-border: var(--color-line-emphasis);
+  --surface-input-focus-border: var(--color-line-focus);
+  --surface-input-focus-shadow: var(--shadow-input-focus);
+
+  --surface-input-error-border: var(--color-error);
+  --surface-input-error-shadow: var(--shadow-input-error);
+
+  --surface-input-disabled-bg: var(--color-surface-muted);
+  --surface-input-disabled-border: var(--color-line-muted);
+
+  /* Button surfaces */
+  --surface-button-primary-bg: var(--color-brand-primary);
+  --surface-button-primary-border: transparent;
+  --surface-button-primary-shadow: var(--shadow-button-primary);
+
+  --surface-button-primary-hover-bg: var(--color-brand-primary-dark);
+  --surface-button-primary-hover-shadow: var(--shadow-button-primary-hover);
+
+  --surface-button-secondary-bg: transparent;
+  --surface-button-secondary-border: var(--color-line-default);
+  --surface-button-secondary-shadow: var(--shadow-button);
+
+  --surface-button-ghost-bg: transparent;
+  --surface-button-ghost-border: transparent;
+
+  /* Table */
+  --surface-table-bg: var(--color-surface-canvas);
+  --surface-table-border: var(--color-line-default);
+  --surface-table-header-bg: var(--color-surface-subtle);
+  --surface-table-row-hover-bg: var(--color-surface-hover);
+  --surface-table-row-selected-bg: var(--color-surface-selected);
+  --surface-table-row-stripe-bg: var(--color-surface-subtle);
+
+  /* Code block */
+  --surface-code-bg: var(--color-slate-900);
+  --surface-code-border: var(--color-slate-700);
+  --surface-code-color: var(--color-slate-100);
+
+  --surface-code-inline-bg: var(--color-slate-100);
+  --surface-code-inline-border: var(--color-slate-200);
+  --surface-code-inline-color: var(--color-rose-600);
+
+  /* ============================================
+   * FEEDBACK SURFACES
+   * For alerts, banners, status indicators
+   * ============================================ */
+
+  /* Success */
+  --surface-success-bg: var(--color-success-bg);
+  --surface-success-border: var(--color-success-border);
+  --surface-success-icon: var(--color-success);
+
+  --surface-success-emphasis-bg: var(--color-success);
+  --surface-success-emphasis-border: var(--color-success-dark);
+  --surface-success-emphasis-color: var(--color-white);
+
+  /* Warning */
+  --surface-warning-bg: var(--color-warning-bg);
+  --surface-warning-border: var(--color-warning-border);
+  --surface-warning-icon: var(--color-warning);
+
+  --surface-warning-emphasis-bg: var(--color-warning);
+  --surface-warning-emphasis-border: var(--color-warning-dark);
+  --surface-warning-emphasis-color: var(--color-slate-900);
+
+  /* Error */
+  --surface-error-bg: var(--color-error-bg);
+  --surface-error-border: var(--color-error-border);
+  --surface-error-icon: var(--color-error);
+
+  --surface-error-emphasis-bg: var(--color-error);
+  --surface-error-emphasis-border: var(--color-error-dark);
+  --surface-error-emphasis-color: var(--color-white);
+
+  /* Info */
+  --surface-info-bg: var(--color-info-bg);
+  --surface-info-border: var(--color-info-border);
+  --surface-info-icon: var(--color-info);
+
+  --surface-info-emphasis-bg: var(--color-info);
+  --surface-info-emphasis-border: var(--color-info-dark);
+  --surface-info-emphasis-color: var(--color-white);
+}
+
+/* ↳ inlined from src/styles/semantic/borders.css */
+/**
+ * Design System - Border Tokens
+ *
+ * Border widths, styles, and complete border definitions.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ * @version 1.0.0
+ */
+
+@theme {
+  /* ============================================
+   * BORDER WIDTHS
+   * ============================================ */
+
+  --border-width-0: 0px;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+  --border-width-8: 8px;
+
+  /* Semantic widths */
+  --border-width-none: var(--border-width-0);
+  --border-width-thin: var(--border-width-1);
+  --border-width-default: var(--border-width-1);
+  --border-width-medium: var(--border-width-2);
+  --border-width-thick: var(--border-width-4);
+
+  /* ============================================
+   * BORDER STYLES
+   * ============================================ */
+
+  --border-style-solid: solid;
+  --border-style-dashed: dashed;
+  --border-style-dotted: dotted;
+  --border-style-double: double;
+  --border-style-none: none;
+
+  /* ============================================
+   * COMPLETE BORDERS
+   * Ready-to-use border definitions
+   * ============================================ */
+
+  /* Default border */
+  --border-default: var(--border-width-default) var(--border-style-solid)
+    var(--color-line-default);
+  --border-muted: var(--border-width-default) var(--border-style-solid)
+    var(--color-line-muted);
+  --border-subtle: var(--border-width-default) var(--border-style-solid)
+    var(--color-line-subtle);
+  --border-emphasis: var(--border-width-default) var(--border-style-solid)
+    var(--color-line-emphasis);
+  --border-strong: var(--border-width-default) var(--border-style-solid)
+    var(--color-line-strong);
+
+  /* Brand borders */
+  --border-brand: var(--border-width-default) var(--border-style-solid)
+    var(--color-line-brand);
+  --border-brand-emphasis: var(--border-width-medium) var(--border-style-solid)
+    var(--color-line-brand);
+
+  /* Focus borders */
+  --border-focus: var(--border-width-medium) var(--border-style-solid)
+    var(--color-line-focus);
+
+  /* Feedback borders */
+  --border-success: var(--border-width-default) var(--border-style-solid)
+    var(--color-success-border);
+  --border-success-emphasis: var(--border-width-default)
+    var(--border-style-solid) var(--color-success);
+  --border-warning: var(--border-width-default) var(--border-style-solid)
+    var(--color-warning-border);
+  --border-warning-emphasis: var(--border-width-default)
+    var(--border-style-solid) var(--color-warning);
+  --border-error: var(--border-width-default) var(--border-style-solid)
+    var(--color-error-border);
+  --border-error-emphasis: var(--border-width-default) var(--border-style-solid)
+    var(--color-error);
+  --border-info: var(--border-width-default) var(--border-style-solid)
+    var(--color-info-border);
+  --border-info-emphasis: var(--border-width-default) var(--border-style-solid)
+    var(--color-info);
+
+  /* Dashed borders */
+  --border-dashed: var(--border-width-default) var(--border-style-dashed)
+    var(--color-line-default);
+  --border-dashed-emphasis: var(--border-width-default)
+    var(--border-style-dashed) var(--color-line-emphasis);
+
+  /* Dotted borders */
+  --border-dotted: var(--border-width-default) var(--border-style-dotted)
+    var(--color-line-default);
+
+  /* ============================================
+   * OUTLINE TOKENS
+   * For focus indicators
+   * ============================================ */
+
+  --outline-none: none;
+  --outline-default: 2px solid var(--color-line-focus);
+  --outline-offset: 2px;
+
+  /* Focus ring */
+  --ring-width: 3px;
+  --ring-color: var(--color-brand-primary-500);
+  --ring-opacity: 0.2;
+  --ring-offset-width: 2px;
+  --ring-offset-color: var(--color-white);
+
+  /* Focus ring compositions — color-mix preserves the alpha relationship
+   * across consumer reskins (brand-primary override propagates to the
+   * ring automatically). Status rings keep their universal Tailwind
+   * tones (status semantics are not brand-overridable; see issue #152). */
+  --ring-default: 0 0 0 var(--ring-width)
+    color-mix(in srgb, var(--color-brand-primary-500) 20%, transparent);
+  --ring-success: 0 0 0 var(--ring-width)
+    color-mix(in srgb, var(--color-emerald-500) 20%, transparent);
+  --ring-warning: 0 0 0 var(--ring-width)
+    color-mix(in srgb, var(--color-amber-500) 20%, transparent);
+  --ring-error: 0 0 0 var(--ring-width)
+    color-mix(in srgb, var(--color-rose-500) 20%, transparent);
+  --ring-info: 0 0 0 var(--ring-width)
+    color-mix(in srgb, var(--color-sky-500) 20%, transparent);
+
+  /* ============================================
+   * DIVIDER TOKENS
+   * For visual separation
+   * ============================================ */
+
+  --divider-horizontal: var(--border-width-default) var(--border-style-solid)
+    var(--color-divider);
+  --divider-vertical: var(--border-width-default) var(--border-style-solid)
+    var(--color-divider);
+  --divider-subtle: var(--border-width-default) var(--border-style-solid)
+    var(--color-divider-subtle);
+  --divider-emphasis: var(--border-width-default) var(--border-style-solid)
+    var(--color-divider-emphasis);
+}
+
+
+/* ============================================
+ * THEMES
+ * Light/dark selector overrides — essential for theme-awareness.
+ * ============================================ */
+
+/* ↳ inlined from src/styles/themes/index.css */
+/**
+ * Design System - Theme Aggregator
+ *
+ * Imports all theme files in the correct order.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ * @version 1.0.0
+ */
+
+/* Base theme utilities and shared variables */
+/* ↳ inlined from src/styles/themes/base.css */
+/**
+ * Design System - Theme Base
+ *
+ * Shared theme configuration and utilities.
+ * This file sets up the theme system foundation.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ * @version 1.0.0
+ */
+
+/* ============================================
+ * THEME DATA ATTRIBUTES
+ * The design system uses the data-theme attribute (or .light / .dark
+ * class) on :root to control color mode.
+ *
+ * Usage:
+ * <html data-theme="light">
+ * <html data-theme="dark">
+ * ============================================ */
+
+:root {
+  /* ============================================
+   * SHARED THEME VARIABLES
+   * These don't change between light/dark
+   * ============================================ */
+
+  /* Color scheme hint for browsers */
+  color-scheme: light dark;
+
+  /* Default theme - light */
+  --theme-mode: light;
+
+  /* ============================================
+   * Z-INDEX SCALE
+   * Consistent layering across themes
+   * ============================================ */
+
+  --z-behind: -1;
+  --z-base: 0;
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-fixed: 30;
+  --z-modal-backdrop: 40;
+  --z-modal: 50;
+  --z-popover: 60;
+  --z-tooltip: 70;
+  --z-toast: 80;
+  --z-max: 9999;
+
+  /* ============================================
+   * OPACITY SCALE
+   * Consistent transparency values
+   * ============================================ */
+
+  --opacity-0: 0;
+  --opacity-5: 0.05;
+  --opacity-10: 0.1;
+  --opacity-20: 0.2;
+  --opacity-25: 0.25;
+  --opacity-30: 0.3;
+  --opacity-40: 0.4;
+  --opacity-50: 0.5;
+  --opacity-60: 0.6;
+  --opacity-70: 0.7;
+  --opacity-75: 0.75;
+  --opacity-80: 0.8;
+  --opacity-90: 0.9;
+  --opacity-95: 0.95;
+  --opacity-100: 1;
+
+  /* ============================================
+   * ASPECT RATIOS
+   * Common aspect ratios for media
+   * ============================================ */
+
+  --aspect-auto: auto;
+  --aspect-square: 1 / 1;
+  --aspect-video: 16 / 9;
+  --aspect-portrait: 3 / 4;
+  --aspect-landscape: 4 / 3;
+  --aspect-wide: 21 / 9;
+
+  /* ============================================
+   * CONTAINER SIZES
+   * Max widths for content containers
+   * ============================================ */
+
+  --container-xs: 20rem; /* 320px */
+  --container-sm: 24rem; /* 384px */
+  --container-md: 28rem; /* 448px */
+  --container-lg: 32rem; /* 512px */
+  --container-xl: 36rem; /* 576px */
+  --container-2xl: 42rem; /* 672px */
+  --container-3xl: 48rem; /* 768px */
+  --container-4xl: 56rem; /* 896px */
+  --container-5xl: 64rem; /* 1024px */
+  --container-6xl: 72rem; /* 1152px */
+  --container-7xl: 80rem; /* 1280px */
+  --container-full: 100%;
+  --container-prose: 65ch; /* Optimal reading width */
+
+  /* ============================================
+   * BREAKPOINTS
+   * Responsive design breakpoints
+   * ============================================ */
+
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* ============================================
+   * SCROLLBAR STYLING
+   * Consistent scrollbar appearance
+   * ============================================ */
+
+  --scrollbar-width: 8px;
+  --scrollbar-width-thin: 4px;
+  /* slate-100 preserved from the prior themes/light.css declaration
+   * (D4). dark.css redeclares this token with a darker value. */
+  --scrollbar-track-bg: var(--color-slate-100);
+  --scrollbar-thumb-bg: var(--color-slate-300);
+  --scrollbar-thumb-hover-bg: var(--color-slate-400);
+  --scrollbar-radius: var(--radius-full);
+}
+
+/* ============================================
+ * SCROLLBAR STYLES
+ * Custom scrollbar for WebKit browsers
+ * ============================================ */
+
+/* Webkit scrollbar */
+::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-bg);
+  border-radius: var(--scrollbar-radius);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb-bg);
+  border-radius: var(--scrollbar-radius);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover-bg);
+}
+
+/* Firefox scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
+}
+
+/* Thin scrollbar variant */
+.scrollbar-thin::-webkit-scrollbar {
+  width: var(--scrollbar-width-thin);
+  height: var(--scrollbar-width-thin);
+}
+
+/* Hidden scrollbar (still scrollable) */
+.scrollbar-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+
+/* ============================================
+ * FOCUS STYLES
+ * Accessible focus indicators
+ * ============================================ */
+
+/* Remove default focus outline */
+*:focus {
+  outline: none;
+}
+
+/* Keyboard focus only (not mouse/touch) */
+*:focus-visible {
+  outline: 2px solid var(--color-line-focus);
+  outline-offset: 2px;
+}
+
+/* Focus ring utility class */
+.focus-ring:focus-visible {
+  box-shadow: var(--ring-default);
+}
+
+/* Skip to main content link */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--color-surface-canvas);
+  color: var(--color-fg-primary);
+  padding: var(--spacing-2) var(--spacing-4);
+  z-index: var(--z-max);
+  transition: top var(--duration-fast) var(--ease-default);
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+/* ============================================
+ * SELECTION STYLES
+ * Text selection appearance
+ * ============================================ */
+
+::selection {
+  background-color: var(--color-brand-primary-200);
+  color: var(--color-slate-900);
+}
+
+/* ============================================
+ * REDUCED MOTION
+ * Respect user preferences
+ * ============================================ */
+
+@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;
+  }
+}
+
+
+/* Color modes */
+/* ↳ inlined from src/styles/themes/light.css */
+/**
+ * Light Theme — minimal mode indicator
+ *
+ * Light is the default theme: all light-mode token values are declared
+ * once in semantic/colors.css (@theme), themes/base.css (shared
+ * cross-theme tokens like scrollbar/code/shadow), and semantic/surfaces.css.
+ * This file ONLY carries the theme-mode indicator and the color-scheme
+ * hint — there is nothing else for it to redeclare without drifting from
+ * the @theme defaults.
+ *
+ * Architecture rationale: the Caminho C refactor (issue #152) chose
+ * "single source of truth for light" over "redundant declarations + a
+ * coverage validator" — eliminate the drift surface rather than police it.
+ *
+ * Dark mode keeps its own themes/dark.css (necessarily — dark redeclares
+ * ~117 tokens and validate-dark-coverage.mjs guards the @media duplication).
+ *
+ * @brand brasil-a-vera (default, overridable)
+ */
+
+:root,
+[data-theme="light"],
+.light {
+  --theme-mode: light;
+  color-scheme: light;
+}
+
+/* ↳ inlined from src/styles/themes/dark.css */
+/**
+ * Design System - Dark Theme
+ *
+ * Dark color scheme overrides.
+ * Activated via data-theme="dark" or .dark class.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ * @version 1.0.0
+ */
+
+[data-theme="dark"],
+.dark {
+  /* Theme indicator */
+  --theme-mode: dark;
+  color-scheme: dark;
+
+  /* ============================================
+   * BRAND COLORS
+   * Slightly lighter for dark backgrounds
+   * ============================================ */
+
+  --color-brand-primary: var(--color-brand-primary-400);
+  --color-brand-primary-light: var(--color-brand-primary-300);
+  --color-brand-primary-dark: var(--color-brand-primary-500);
+  --color-brand-primary-darker: var(--color-brand-primary-600);
+
+  --color-brand-secondary: var(--color-brand-secondary-400);
+  --color-brand-secondary-light: var(--color-brand-secondary-300);
+  --color-brand-secondary-dark: var(--color-brand-secondary-500);
+
+  --color-brand-accent: var(--color-cyan-400);
+  --color-brand-accent-light: var(--color-cyan-300);
+  --color-brand-accent-dark: var(--color-cyan-500);
+
+  /* ============================================
+   * FOREGROUND COLORS
+   * Inverted for dark backgrounds
+   * ============================================ */
+
+  --color-fg-primary: var(--color-slate-50);
+  --color-fg-secondary: var(--color-slate-300);
+  --color-fg-tertiary: var(--color-slate-400);
+  --color-fg-quaternary: var(--color-slate-500);
+  --color-fg-placeholder: var(--color-slate-500);
+  --color-fg-disabled: var(--color-slate-600);
+  --color-fg-inverse: var(--color-slate-900);
+  --color-fg-inverse-secondary: var(--color-slate-700);
+
+  /* Link colors */
+  --color-fg-link: var(--color-brand-primary-400);
+  --color-fg-link-hover: var(--color-brand-primary-300);
+  --color-fg-link-active: var(--color-brand-primary-200);
+  --color-fg-link-visited: var(--color-brand-secondary-300);
+
+  /* Brand text */
+  --color-fg-brand: var(--color-brand-primary-400);
+  --color-fg-brand-emphasis: var(--color-brand-primary-300);
+  --color-fg-brand-secondary: var(--color-brand-secondary-400);
+  --color-fg-brand-secondary-emphasis: var(--color-brand-secondary-300);
+
+  /* Feedback text */
+  --color-fg-success: var(--color-emerald-400);
+  --color-fg-warning: var(--color-amber-400);
+  --color-fg-error: var(--color-rose-400);
+  --color-fg-info: var(--color-sky-400);
+
+  /* On-color feedback text — constant white in both themes (the solid
+   * status surfaces stay saturated + dark in dark mode too). See
+   * semantic/colors.css for the AA rationale. */
+  --color-fg-on-success: var(--color-white);
+  --color-fg-on-warning: var(--color-white);
+  --color-fg-on-error: var(--color-white);
+  --color-fg-on-info: var(--color-white);
+
+  /* ============================================
+   * SURFACE COLORS — Backgrounds (dark scale)
+   * ============================================ */
+
+  --color-surface-canvas: var(--color-slate-950);
+  --color-surface-subtle: var(--color-slate-900);
+  --color-surface-muted: var(--color-slate-800);
+  --color-surface-emphasis: var(--color-slate-700);
+  --color-surface-strong: var(--color-slate-600);
+  --color-surface-inverse: var(--color-slate-50);
+  --color-surface-inverse-subtle: var(--color-slate-100);
+
+  /* Brand backgrounds */
+  --color-surface-brand-subtle: var(--color-brand-primary-950);
+  --color-surface-brand-muted: var(--color-brand-primary-900);
+  --color-surface-brand: var(--color-brand-primary-500);
+  --color-surface-brand-strong: var(--color-brand-primary-400);
+  --color-surface-brand-emphasis: var(--color-brand-primary-400);
+
+  --color-surface-secondary-subtle: var(--color-brand-secondary-950);
+  --color-surface-secondary: var(--color-brand-secondary-500);
+
+  --color-surface-accent-subtle: var(--color-cyan-950);
+  --color-surface-accent: var(--color-cyan-500);
+
+  /* ============================================
+   * SURFACE COLORS — Elevation layers (dark)
+   * ============================================ */
+
+  --color-surface-base: var(--color-slate-900);
+  --color-surface-raised: var(--color-slate-800);
+  --color-surface-overlay: var(--color-slate-800);
+  --color-surface-sunken: var(--color-slate-950);
+  --color-surface-disabled: var(--color-slate-800);
+
+  /* Surface levels */
+  --surface-0-bg: var(--color-slate-950);
+  --surface-1-bg: var(--color-slate-900);
+  --surface-2-bg: var(--color-slate-800);
+  --surface-3-bg: var(--color-slate-700);
+  --surface-4-bg: var(--color-slate-800);
+  --surface-5-bg: var(--color-slate-800);
+
+  /* ============================================
+   * LINE COLORS
+   * Lighter borders on dark backgrounds
+   * ============================================ */
+
+  --color-line-default: var(--color-slate-700);
+  --color-line-muted: var(--color-slate-800);
+  --color-line-subtle: var(--color-slate-800);
+  --color-line-emphasis: var(--color-slate-600);
+  --color-line-strong: var(--color-slate-500);
+  --color-line-inverse: var(--color-slate-200);
+  --color-line-focus: var(--color-brand-primary-400);
+  --color-line-focus-ring: var(--color-brand-primary-400);
+
+  /* Brand-colored borders — mirror the brand foreground/border ladder
+   * (light theme uses -500, dark theme uses -400) so a Tabs underline or
+   * branded outline reads against a dark surface. Concrete contrast is
+   * verified per release via test:a11y:baseline. */
+  --color-line-brand: var(--color-brand-primary-400);
+  --color-line-secondary: var(--color-brand-secondary-400);
+  --color-line-accent: var(--color-cyan-400);
+
+  /* ============================================
+   * SURFACE COLORS — Interactive states (dark)
+   * ============================================ */
+
+  --color-surface-hover: var(--color-slate-800);
+  --color-surface-hover-subtle: var(--color-slate-900);
+  --color-surface-active: var(--color-slate-700);
+  --color-surface-selected: var(--color-brand-primary-950);
+  --color-surface-selected-subtle: var(--color-brand-primary-900);
+  /* state-disabled fused into surface-disabled (identical values).
+   * disabled-subtle is intentionally close to canvas — slate-900 over
+   * canvas slate-950 is ~1.16:1, mirroring the light pattern where
+   * slate-50 over white is also barely perceptible. The role is
+   * "barely-perceptible disabled wash", not "visible disabled tint". */
+  --color-surface-disabled-subtle: var(--color-slate-900);
+  --color-surface-focus: var(--color-brand-primary-900);
+
+  /* ============================================
+   * FEEDBACK COLORS
+   * Brighter for dark backgrounds
+   * ============================================ */
+
+  /* Success */
+  --color-success: var(--color-emerald-400);
+  --color-success-light: var(--color-emerald-300);
+  --color-success-dark: var(--color-emerald-500);
+  --color-success-bg: var(--color-emerald-950);
+  --color-success-bg-emphasis: var(--color-emerald-900);
+  --color-success-border: var(--color-emerald-800);
+  --color-success-border-emphasis: var(--color-emerald-400);
+
+  /* Warning */
+  --color-warning: var(--color-amber-400);
+  --color-warning-light: var(--color-amber-300);
+  --color-warning-dark: var(--color-amber-500);
+  --color-warning-bg: var(--color-amber-950);
+  --color-warning-bg-emphasis: var(--color-amber-900);
+  --color-warning-border: var(--color-amber-800);
+  --color-warning-border-emphasis: var(--color-amber-400);
+
+  /* Error */
+  --color-error: var(--color-rose-400);
+  --color-error-light: var(--color-rose-300);
+  --color-error-dark: var(--color-rose-400);
+  --color-error-bg: var(--color-rose-950);
+  --color-error-bg-emphasis: var(--color-rose-900);
+  --color-error-border: var(--color-rose-800);
+  --color-error-border-emphasis: var(--color-rose-400);
+
+  /* Info */
+  --color-info: var(--color-sky-400);
+  --color-info-light: var(--color-sky-300);
+  --color-info-dark: var(--color-sky-500);
+
+  /* Status neutral — completes status family in dark mode */
+  --color-status-neutral: var(--color-slate-400);
+  --color-info-bg: var(--color-sky-950);
+  --color-info-bg-emphasis: var(--color-sky-900);
+  --color-info-border: var(--color-sky-800);
+  --color-info-border-emphasis: var(--color-sky-400);
+
+  /* Solid (filled) status surfaces — saturated chips that stay dark in both
+   * themes so white on-color text clears AA. Identical to light by design.
+   * See semantic/colors.css. */
+  --color-success-solid: var(--color-emerald-700);
+  --color-warning-solid: var(--color-amber-700);
+  --color-error-solid: var(--color-rose-700);
+  --color-info-solid: var(--color-sky-700);
+
+  /* ============================================
+   * DATA-VISUALIZATION CATEGORICAL PALETTE (Okabe-Ito, dark-calibrated)
+   * Luminance lifted (hue preserved) so each series clears 3:1 over
+   * slate-950. Must mirror the @media block below. See semantic/colors.css.
+   * ============================================ */
+
+  --color-chart-1: #f2b441; /* orange */
+  --color-chart-2: #7fc8f0; /* sky blue */
+  --color-chart-3: #2cc79a; /* bluish green */
+  --color-chart-4: #f47a2e; /* vermillion */
+  --color-chart-5: #4da3dc; /* blue */
+  --color-chart-6: #e098c3; /* reddish purple */
+  --color-chart-7: #f5ec6b; /* yellow */
+  --color-chart-8: #b8bcc4; /* gray */
+
+  /* Data-viz categorical tone (soft wash) — see semantic/colors.css. */
+  --color-dataviz: var(--color-fuchsia-400);
+  --color-dataviz-bg: var(--color-fuchsia-950);
+  --color-dataviz-dark: var(--color-fuchsia-300);
+
+  /* ============================================
+   * ICON COLORS
+   * ============================================ */
+
+  --color-icon-default: var(--color-slate-400);
+  --color-icon-muted: var(--color-slate-500);
+  --color-icon-subtle: var(--color-slate-600);
+  --color-icon-emphasis: var(--color-slate-200);
+  --color-icon-inverse: var(--color-slate-900);
+  --color-icon-brand: var(--color-brand-primary-400);
+  --color-icon-success: var(--color-emerald-400);
+  --color-icon-warning: var(--color-amber-400);
+  --color-icon-error: var(--color-rose-400);
+  --color-icon-info: var(--color-sky-400);
+
+  /* ============================================
+   * OVERLAY COLORS
+   * ============================================ */
+
+  --color-overlay-light: rgb(255 255 255 / 0.1);
+  --color-overlay-dark: rgb(0 0 0 / 0.6);
+  --color-overlay-darker: rgb(0 0 0 / 0.8);
+  --color-overlay-backdrop: rgb(0 0 0 / 0.7);
+
+  /* ============================================
+   * SHADOWS
+   * Darker, more intense shadows for dark theme
+   * ============================================ */
+
+  --shadow-card: var(--shadow-dark-sm);
+  --shadow-card-hover: var(--shadow-dark-md);
+  --shadow-dropdown: var(--shadow-dark-lg);
+  --shadow-modal: var(--shadow-dark-xl);
+  --shadow-tooltip: var(--shadow-dark-md);
+
+  /* ============================================
+   * SCROLLBAR
+   * Darker scrollbar for dark theme
+   * ============================================ */
+
+  --scrollbar-track-bg: var(--color-slate-900);
+  --scrollbar-thumb-bg: var(--color-slate-600);
+  --scrollbar-thumb-hover-bg: var(--color-slate-500);
+
+  /* ============================================
+   * SKELETON
+   * ============================================ */
+
+  --color-skeleton-base: var(--color-slate-700);
+  --color-skeleton-shine: var(--color-slate-600);
+
+  /* ============================================
+   * DIVIDER
+   * ============================================ */
+
+  --color-divider: var(--color-slate-700);
+  --color-divider-subtle: var(--color-slate-800);
+  --color-divider-emphasis: var(--color-slate-600);
+
+  /* ============================================
+   * CODE
+   * ============================================ */
+
+  --surface-code-bg: var(--color-slate-950);
+  --surface-code-border: var(--color-slate-800);
+  --surface-code-color: var(--color-slate-100);
+
+  --surface-code-inline-bg: var(--color-slate-800);
+  --surface-code-inline-border: var(--color-slate-700);
+  --surface-code-inline-color: var(--color-brand-secondary-300);
+
+  /* ============================================
+   * TOOLTIP
+   * Inverted for dark theme
+   * ============================================ */
+
+  --surface-tooltip-bg: var(--color-slate-100);
+  --surface-tooltip-color: var(--color-slate-900);
+
+  /* ============================================
+   * FOCUS RING
+   * More visible on dark backgrounds
+   * ============================================ */
+
+  --ring-color: var(--color-brand-primary-400);
+  /* D7: color-mix preserves the brand-primary-400 → 30% alpha relationship
+   * across reskins. If a consumer overrides --color-brand-primary-400, the
+   * focus ring follows automatically. WCAG 2.4.11 (focus-visible) is
+   * verified against the resolved alpha in test:a11y:baseline. */
+  --ring-default: 0 0 0 var(--ring-width)
+    color-mix(in srgb, var(--color-brand-primary-400) 30%, transparent);
+
+  /* ============================================
+   * SELECTION
+   * ============================================ */
+
+  ::selection {
+    background-color: var(--color-brand-primary-700);
+    color: var(--color-white);
+  }
+}
+
+/* ============================================
+ * SYSTEM PREFERENCE: DARK
+ * Automatically apply dark theme if user prefers.
+ *
+ * IMPORTANT — this block is INTENTIONALLY a verbatim duplicate of the
+ * `[data-theme="dark"], .dark` block above. CSS does not inherit
+ * variables between selectors: a previous version listed only 5 vars
+ * here with a comment "other variables would inherit from .dark", and
+ * that comment was wrong — users on prefers-color-scheme: dark without
+ * an explicit data-theme="dark" received 5 dark vars + ~110 light vars,
+ * which produced Modal/Dialog/CommandPalette with white backgrounds in
+ * OS dark mode (rg 1.05 contrast catastrophe — found by the dark a11y
+ * baseline plumbing).
+ *
+ * Both blocks MUST stay byte-identical except for selector and
+ * `--theme-mode`/`color-scheme` headers. `scripts/validate-dark-coverage.mjs`
+ * runs in pre-push + CI and fails on any divergence — duplication that
+ * cannot drift. If you change a value here, change it in the
+ * `[data-theme="dark"]` block above (and vice versa).
+ * ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.light) {
+    /* Theme indicator */
+    --theme-mode: dark;
+    color-scheme: dark;
+
+    /* ============================================
+     * BRAND COLORS
+     * ============================================ */
+
+    --color-brand-primary: var(--color-brand-primary-400);
+    --color-brand-primary-light: var(--color-brand-primary-300);
+    --color-brand-primary-dark: var(--color-brand-primary-500);
+    --color-brand-primary-darker: var(--color-brand-primary-600);
+
+    --color-brand-secondary: var(--color-brand-secondary-400);
+    --color-brand-secondary-light: var(--color-brand-secondary-300);
+    --color-brand-secondary-dark: var(--color-brand-secondary-500);
+
+    --color-brand-accent: var(--color-cyan-400);
+    --color-brand-accent-light: var(--color-cyan-300);
+    --color-brand-accent-dark: var(--color-cyan-500);
+
+    /* ============================================
+     * FOREGROUND COLORS
+     * ============================================ */
+
+    --color-fg-primary: var(--color-slate-50);
+    --color-fg-secondary: var(--color-slate-300);
+    --color-fg-tertiary: var(--color-slate-400);
+    --color-fg-quaternary: var(--color-slate-500);
+    --color-fg-placeholder: var(--color-slate-500);
+    --color-fg-disabled: var(--color-slate-600);
+    --color-fg-inverse: var(--color-slate-900);
+    --color-fg-inverse-secondary: var(--color-slate-700);
+
+    --color-fg-link: var(--color-brand-primary-400);
+    --color-fg-link-hover: var(--color-brand-primary-300);
+    --color-fg-link-active: var(--color-brand-primary-200);
+    --color-fg-link-visited: var(--color-brand-secondary-300);
+
+    --color-fg-brand: var(--color-brand-primary-400);
+    --color-fg-brand-emphasis: var(--color-brand-primary-300);
+    --color-fg-brand-secondary: var(--color-brand-secondary-400);
+    --color-fg-brand-secondary-emphasis: var(--color-brand-secondary-300);
+
+    --color-fg-success: var(--color-emerald-400);
+    --color-fg-warning: var(--color-amber-400);
+    --color-fg-error: var(--color-rose-400);
+    --color-fg-info: var(--color-sky-400);
+
+    /* On-color feedback text — constant white in both themes. */
+    --color-fg-on-success: var(--color-white);
+    --color-fg-on-warning: var(--color-white);
+    --color-fg-on-error: var(--color-white);
+    --color-fg-on-info: var(--color-white);
+
+    /* ============================================
+     * SURFACE COLORS — Backgrounds
+     * ============================================ */
+
+    --color-surface-canvas: var(--color-slate-950);
+    --color-surface-subtle: var(--color-slate-900);
+    --color-surface-muted: var(--color-slate-800);
+    --color-surface-emphasis: var(--color-slate-700);
+    --color-surface-strong: var(--color-slate-600);
+    --color-surface-inverse: var(--color-slate-50);
+    --color-surface-inverse-subtle: var(--color-slate-100);
+
+    --color-surface-brand-subtle: var(--color-brand-primary-950);
+    --color-surface-brand-muted: var(--color-brand-primary-900);
+    --color-surface-brand: var(--color-brand-primary-500);
+    --color-surface-brand-strong: var(--color-brand-primary-400);
+    --color-surface-brand-emphasis: var(--color-brand-primary-400);
+
+    --color-surface-secondary-subtle: var(--color-brand-secondary-950);
+    --color-surface-secondary: var(--color-brand-secondary-500);
+
+    --color-surface-accent-subtle: var(--color-cyan-950);
+    --color-surface-accent: var(--color-cyan-500);
+
+    /* ============================================
+     * SURFACE COLORS — Elevation layers
+     * ============================================ */
+
+    --color-surface-base: var(--color-slate-900);
+    --color-surface-raised: var(--color-slate-800);
+    --color-surface-overlay: var(--color-slate-800);
+    --color-surface-sunken: var(--color-slate-950);
+    --color-surface-disabled: var(--color-slate-800);
+
+    --surface-0-bg: var(--color-slate-950);
+    --surface-1-bg: var(--color-slate-900);
+    --surface-2-bg: var(--color-slate-800);
+    --surface-3-bg: var(--color-slate-700);
+    --surface-4-bg: var(--color-slate-800);
+    --surface-5-bg: var(--color-slate-800);
+
+    /* ============================================
+     * LINE COLORS
+     * ============================================ */
+
+    --color-line-default: var(--color-slate-700);
+    --color-line-muted: var(--color-slate-800);
+    --color-line-subtle: var(--color-slate-800);
+    --color-line-emphasis: var(--color-slate-600);
+    --color-line-strong: var(--color-slate-500);
+    --color-line-inverse: var(--color-slate-200);
+    --color-line-focus: var(--color-brand-primary-400);
+    --color-line-focus-ring: var(--color-brand-primary-400);
+
+    --color-line-brand: var(--color-brand-primary-400);
+    --color-line-secondary: var(--color-brand-secondary-400);
+    --color-line-accent: var(--color-cyan-400);
+
+    /* ============================================
+     * SURFACE COLORS — Interactive states
+     * ============================================ */
+
+    --color-surface-hover: var(--color-slate-800);
+    --color-surface-hover-subtle: var(--color-slate-900);
+    --color-surface-active: var(--color-slate-700);
+    --color-surface-selected: var(--color-brand-primary-950);
+    --color-surface-selected-subtle: var(--color-brand-primary-900);
+    --color-surface-disabled-subtle: var(--color-slate-900);
+    --color-surface-focus: var(--color-brand-primary-900);
+
+    /* ============================================
+     * FEEDBACK COLORS
+     * ============================================ */
+
+    --color-success: var(--color-emerald-400);
+    --color-success-light: var(--color-emerald-300);
+    --color-success-dark: var(--color-emerald-500);
+    --color-success-bg: var(--color-emerald-950);
+    --color-success-bg-emphasis: var(--color-emerald-900);
+    --color-success-border: var(--color-emerald-800);
+    --color-success-border-emphasis: var(--color-emerald-400);
+
+    --color-warning: var(--color-amber-400);
+    --color-warning-light: var(--color-amber-300);
+    --color-warning-dark: var(--color-amber-500);
+    --color-warning-bg: var(--color-amber-950);
+    --color-warning-bg-emphasis: var(--color-amber-900);
+    --color-warning-border: var(--color-amber-800);
+    --color-warning-border-emphasis: var(--color-amber-400);
+
+    --color-error: var(--color-rose-400);
+    --color-error-light: var(--color-rose-300);
+    --color-error-dark: var(--color-rose-400);
+    --color-error-bg: var(--color-rose-950);
+    --color-error-bg-emphasis: var(--color-rose-900);
+    --color-error-border: var(--color-rose-800);
+    --color-error-border-emphasis: var(--color-rose-400);
+
+    --color-info: var(--color-sky-400);
+    --color-info-light: var(--color-sky-300);
+    --color-info-dark: var(--color-sky-500);
+    --color-info-bg: var(--color-sky-950);
+    --color-info-bg-emphasis: var(--color-sky-900);
+    --color-info-border: var(--color-sky-800);
+    --color-info-border-emphasis: var(--color-sky-400);
+
+    --color-status-neutral: var(--color-slate-400);
+
+    /* Solid (filled) status surfaces — identical to light by design. */
+    --color-success-solid: var(--color-emerald-700);
+    --color-warning-solid: var(--color-amber-700);
+    --color-error-solid: var(--color-rose-700);
+    --color-info-solid: var(--color-sky-700);
+
+    /* ============================================
+     * DATA-VISUALIZATION CATEGORICAL PALETTE (Okabe-Ito, dark-calibrated)
+     * ============================================ */
+
+    --color-chart-1: #f2b441; /* orange */
+    --color-chart-2: #7fc8f0; /* sky blue */
+    --color-chart-3: #2cc79a; /* bluish green */
+    --color-chart-4: #f47a2e; /* vermillion */
+    --color-chart-5: #4da3dc; /* blue */
+    --color-chart-6: #e098c3; /* reddish purple */
+    --color-chart-7: #f5ec6b; /* yellow */
+    --color-chart-8: #b8bcc4; /* gray */
+
+    /* Data-viz categorical tone (soft wash) — see semantic/colors.css. */
+    --color-dataviz: var(--color-fuchsia-400);
+    --color-dataviz-bg: var(--color-fuchsia-950);
+    --color-dataviz-dark: var(--color-fuchsia-300);
+
+    /* ============================================
+     * ICON COLORS
+     * ============================================ */
+
+    --color-icon-default: var(--color-slate-400);
+    --color-icon-muted: var(--color-slate-500);
+    --color-icon-subtle: var(--color-slate-600);
+    --color-icon-emphasis: var(--color-slate-200);
+    --color-icon-inverse: var(--color-slate-900);
+    --color-icon-brand: var(--color-brand-primary-400);
+    --color-icon-success: var(--color-emerald-400);
+    --color-icon-warning: var(--color-amber-400);
+    --color-icon-error: var(--color-rose-400);
+    --color-icon-info: var(--color-sky-400);
+
+    /* ============================================
+     * OVERLAY COLORS
+     * ============================================ */
+
+    --color-overlay-light: rgb(255 255 255 / 0.1);
+    --color-overlay-dark: rgb(0 0 0 / 0.6);
+    --color-overlay-darker: rgb(0 0 0 / 0.8);
+    --color-overlay-backdrop: rgb(0 0 0 / 0.7);
+
+    /* ============================================
+     * SHADOWS
+     * ============================================ */
+
+    --shadow-card: var(--shadow-dark-sm);
+    --shadow-card-hover: var(--shadow-dark-md);
+    --shadow-dropdown: var(--shadow-dark-lg);
+    --shadow-modal: var(--shadow-dark-xl);
+    --shadow-tooltip: var(--shadow-dark-md);
+
+    /* ============================================
+     * SCROLLBAR
+     * ============================================ */
+
+    --scrollbar-track-bg: var(--color-slate-900);
+    --scrollbar-thumb-bg: var(--color-slate-600);
+    --scrollbar-thumb-hover-bg: var(--color-slate-500);
+
+    /* ============================================
+     * SKELETON
+     * ============================================ */
+
+    --color-skeleton-base: var(--color-slate-700);
+    --color-skeleton-shine: var(--color-slate-600);
+
+    /* ============================================
+     * DIVIDER
+     * ============================================ */
+
+    --color-divider: var(--color-slate-700);
+    --color-divider-subtle: var(--color-slate-800);
+    --color-divider-emphasis: var(--color-slate-600);
+
+    /* ============================================
+     * CODE
+     * ============================================ */
+
+    --surface-code-bg: var(--color-slate-950);
+    --surface-code-border: var(--color-slate-800);
+    --surface-code-color: var(--color-slate-100);
+
+    --surface-code-inline-bg: var(--color-slate-800);
+    --surface-code-inline-border: var(--color-slate-700);
+    --surface-code-inline-color: var(--color-brand-secondary-300);
+
+    /* ============================================
+     * TOOLTIP
+     * ============================================ */
+
+    --surface-tooltip-bg: var(--color-slate-100);
+    --surface-tooltip-color: var(--color-slate-900);
+
+    /* ============================================
+     * FOCUS RING
+     * ============================================ */
+
+    --ring-color: var(--color-brand-primary-400);
+    /* D7: color-mix preserves the brand-primary-400 → 30% alpha relationship
+     * across reskins. If a consumer overrides --color-brand-primary-400, the
+     * focus ring follows automatically. WCAG 2.4.11 (focus-visible) is
+     * verified against the resolved alpha in test:a11y:baseline. */
+    --ring-default: 0 0 0 var(--ring-width)
+      color-mix(in srgb, var(--color-brand-primary-400) 30%, transparent);
+  }
+
+  /* ::selection inside @media — sibling to the :root rule above so
+   * older browsers without CSS nesting still parse cleanly. */
+  :root:not([data-theme="light"]):not(.light) ::selection {
+    background-color: var(--color-brand-primary-700);
+    color: var(--color-white);
+  }
+}
+
+