/* ============================================================ PetVaxCard — legacy --pet-* COMPATIBILITY BRIDGE ------------------------------------------------------------ THEME MIGRATION (human-approved, 2026-05-28): The new design system (themes/tokens.css → themes/brand-petvax.css → themes/components.css) is now CANONICAL. This file no longer defines raw colours; every legacy --pet-* token is re-expressed as a reference onto the new --color-* / --brand-* / --space-* / --radius- / --shadow- alias tokens (see THEMING.md §8 migration map). Why keep it: dozens of existing .razor.css / app.css rules and Fluent UI Blazor custom-property overrides reference --pet-* names. Aliasing them means every screen instantly inherits the new light/dark theming with NO raw hex anywhere outside themes/brand-petvax.css, and the build stays green. RULES (THEMING.md §6): no raw hex here; never restate brand colours; mode (light/dark) is fully delegated to themes/tokens.css via [data-theme]. Because the new tokens are mode-aware, these aliases need only be declared ONCE (mode-agnostic) — they resolve correctly in both light and dark. ============================================================ */ :root, :root[data-theme="light"], :root[data-theme="dark"], .fluent-light, .fluent-dark { /* ---- Brand: Primary (Teal Veterinario) ---- */ --pet-primary: var(--color-brand-bg); --pet-primary-hover: var(--color-brand-bg-hover); --pet-primary-active: var(--color-brand-bg-pressed); --pet-primary-light: var(--color-brand-bg-2-pressed); --pet-primary-dark: var(--color-brand-fg-1); --pet-primary-bg: var(--color-brand-bg-2); --pet-primary-bg-hover: var(--color-brand-bg-2-hover); --pet-primary-on: var(--color-neutral-fg-on-brand); /* ---- Brand: Secondary (Ámbar Cálido) ---- The amber accent ramp lives in themes/brand-petvax.css as --accent-*. */ --pet-secondary: var(--accent-bg-strong); --pet-secondary-hover: var(--accent-fg-strong); --pet-secondary-light: var(--accent-bg); --pet-secondary-dark: var(--accent-fg-strong); --pet-secondary-bg: var(--accent-bg); --pet-secondary-on: var(--accent-fg-strong); /* ---- Functional: Success ---- */ --pet-success: var(--color-status-success-fg-1); --pet-success-hover: var(--color-status-success-fg-1); --pet-success-bg: var(--color-status-success-bg-1); --pet-success-border: var(--color-status-success-border-1); /* ---- Functional: Warning ---- */ --pet-warning: var(--color-status-warning-fg-1); --pet-warning-hover: var(--color-status-warning-fg-1); --pet-warning-bg: var(--color-status-warning-bg-1); --pet-warning-border: var(--color-status-warning-border-1); /* ---- Functional: Error / Danger ---- */ --pet-error: var(--color-status-danger-fg-1); --pet-error-hover: var(--color-status-danger-fg-1); --pet-error-bg: var(--color-status-danger-bg-1); --pet-error-border: var(--color-status-danger-border-1); /* ---- Functional: Info ---- */ --pet-info: var(--color-status-info-fg-1); --pet-info-hover: var(--color-brand-fg-link-hover); --pet-info-bg: var(--color-status-info-bg-1); --pet-info-border: var(--color-status-info-border-1); /* ---- Surfaces ---- */ --pet-bg-page: var(--color-neutral-bg-2); --pet-bg-card: var(--color-neutral-card-bg); --pet-bg-card-hover: var(--color-neutral-card-bg-hover); --pet-bg-elevated: var(--color-neutral-card-bg); --pet-bg-nav: var(--shell-sidebar-bg); --pet-bg-nav-hover: var(--shell-sidebar-bg-2); --pet-bg-nav-active: var(--shell-sidebar-active-bg); --pet-bg-table-header: var(--color-neutral-bg-2); --pet-bg-table-row-alt: var(--color-neutral-bg-2); --pet-bg-input: var(--color-neutral-bg-1); --pet-bg-overlay: color-mix(in srgb, var(--color-neutral-bg-inverted) 40%, transparent); --pet-bg-skeleton: var(--color-neutral-bg-5); /* ---- Text ---- */ --pet-text-primary: var(--color-neutral-fg-1); --pet-text-secondary: var(--color-neutral-fg-2); --pet-text-muted: var(--color-neutral-fg-3); --pet-text-disabled: var(--color-neutral-fg-disabled); --pet-text-placeholder: var(--color-neutral-fg-4); --pet-text-on-primary: var(--color-neutral-fg-on-brand); --pet-text-on-nav: var(--shell-sidebar-fg); --pet-text-link: var(--color-brand-fg-link); --pet-text-link-hover: var(--color-brand-fg-link-hover); /* ---- Borders & Dividers ---- */ --pet-border: var(--color-neutral-stroke-2); --pet-border-strong: var(--color-neutral-stroke-1); --pet-border-focus: var(--color-compound-brand-stroke); --pet-border-error: var(--color-status-danger-border-1); /* ---- Shadows ---- */ --pet-shadow-sm: var(--shadow-2); --pet-shadow-md: var(--shadow-8); --pet-shadow-lg: var(--shadow-16); --pet-shadow-dialog: var(--shadow-28); /* ---- Species Accents ---- dog = brand teal, cat = amber accent, bird = info, other = brand fg. */ --pet-species-dog: var(--color-brand-fg-1); --pet-species-cat: var(--accent-bg-strong); --pet-species-bird: var(--color-status-info-fg-1); --pet-species-other: var(--color-brand-fg-2); /* ---- Focus Ring ---- */ --pet-focus-ring: 0 0 0 var(--stroke-thick) var(--color-stroke-focus-1), 0 0 0 var(--stroke-thickest) var(--color-stroke-focus-2); /* ---- Border Radius (map onto the new --radius- scale) ---- */ --pet-radius-sm: var(--radius-md); --pet-radius-md: var(--radius-lg); --pet-radius-lg: var(--radius-xl); --pet-radius-pill: var(--radius-circular); /* ---- Spacing (legacy 8px grid mapped onto the new 4px grid) ---- */ --pet-space-xs: var(--space-xs); --pet-space-sm: var(--space-s); --pet-space-md: var(--space-l); --pet-space-lg: var(--space-xxl); --pet-space-xl: var(--space-xxxl); --pet-space-2xl: calc(var(--space-xxxl) + var(--space-l)); /* ---- Typography ---- */ --pet-font-family: var(--font-family-base); --pet-font-mono: var(--font-family-mono); /* ---- Z-Index Scale (map onto the new --z-* scale) ---- */ --pet-z-dropdown: var(--z-dropdown); --pet-z-sticky: var(--z-popover); --pet-z-overlay: var(--z-dialog); --pet-z-dialog: var(--z-dialog); --pet-z-toast: var(--z-toast); /* ---- Transitions ---- */ --pet-transition-fast: var(--duration-fast) var(--curve-easy-ease); --pet-transition-normal: var(--duration-normal) var(--curve-easy-ease); --pet-transition-slow: var(--duration-slow) var(--curve-easy-ease); /* ============================================================ CR-070 — Fluent UI Blazor v4 NEUTRAL token bridge. FluentDesignTheme is declared without a bound Mode, so its own design tokens do NOT follow the runtime data-theme toggle that ThemeToggle.razor flips. That left Fluent components (FluentLabel, FluentCard text, FluentNavLink, inputs) rendering with a LIGHT foreground on the dark #292929 surface — dark-on-dark, failing AA. Re-express Fluent's neutral tokens onto our mode-aware --color-* ramp so every Fluent component tracks [data-theme] deterministically in BOTH light and dark. (Mode-agnostic: the --color-* values are already mode-aware via themes/tokens.css [data-theme] blocks.) ============================================================ */ --neutral-foreground-rest: var(--color-neutral-fg-1); --neutral-foreground-hover: var(--color-neutral-fg-1); --neutral-foreground-active: var(--color-neutral-fg-1); --neutral-foreground-focus: var(--color-neutral-fg-1); --neutral-foreground-2-rest: var(--color-neutral-fg-2); --neutral-foreground-2-hover: var(--color-neutral-fg-2); --neutral-foreground-3-rest: var(--color-neutral-fg-3); --neutral-foreground-hint: var(--color-neutral-fg-3); --neutral-foreground-hint-rest: var(--color-neutral-fg-3); --neutral-foreground-disabled: var(--color-neutral-fg-disabled); --neutral-fill-rest: var(--color-neutral-bg-3); --neutral-fill-hover: var(--color-neutral-bg-4); --neutral-fill-input-rest: var(--color-neutral-card-bg); --neutral-fill-input-hover: var(--color-neutral-card-bg-hover); --neutral-fill-stealth-rest: transparent; --neutral-fill-stealth-hover: var(--color-neutral-bg-1-hover); --neutral-fill-stealth-active: var(--color-neutral-bg-1-pressed); --neutral-layer-1: var(--color-neutral-card-bg); --neutral-layer-2: var(--color-neutral-bg-2); --neutral-layer-3: var(--color-neutral-bg-3); --neutral-layer-4: var(--color-neutral-bg-4); --neutral-layer-floating: var(--color-neutral-card-bg); --neutral-layer-card: var(--color-neutral-card-bg); --neutral-layer-card-container: var(--color-neutral-card-bg); --layer-fill-fixed-base: var(--color-neutral-bg-1); --neutral-stroke-rest: var(--color-neutral-stroke-1); --neutral-stroke-hover: var(--color-neutral-stroke-1-hover); --neutral-stroke-strong-rest: var(--color-neutral-stroke-accessible); --neutral-stroke-divider-rest: var(--color-neutral-stroke-2); --neutral-stroke-input-rest: var(--color-neutral-stroke-1); }