/* ============================================================================ Theme transitions — Houdini-registered custom properties ---------------------------------------------------------------------------- Registers every theme-affected custom property via ``@property`` so the browser can interpolate them when ``data-theme`` toggles on ````. Then declares one ``:root`` transition that eases every registered leaf at 400ms cubic-bezier(0.4, 0, 0.2, 1) — the same easing already used on the login page. ``prefers-reduced-motion`` zeros the duration. Why a single cascade-level transition instead of per-element rules: * Every consumer reaches the leaf tokens through ``var(--*)``. Once the leafs interpolate, the rest follows automatically — no need to touch every component (button, card, table row, modal, ...). * Element-level transitions (``transition: var(--transition)`` → ``transition: all 0.2s``) on ``.btn`` / ``.card`` / etc. stay scoped to their own triggers (hover, focus). The custom-property transition runs only when ``data-theme`` flips, so existing animations do not collide. * The login page already implements the same crossfade locally; the global cascade now matches it everywhere else without touching the login-only rules. Browser support: Chrome 85+ (Aug 2020), Firefox 128+ (Jul 2024), Safari 16.4+ (Mar 2023). Older browsers fall back to the previous snap behavior — acceptable per the task brief. ============================================================================ */ /* ─── Leaf color tokens (palette.css — values differ between themes) ──────── */ @property --color-moss { syntax: ''; inherits: true; initial-value: #4a7c59; } @property --color-moss-light { syntax: ''; inherits: true; initial-value: #e8f3eb; } @property --color-moss-dark { syntax: ''; inherits: true; initial-value: #2d5a3d; } @property --color-moss-08 { syntax: ''; inherits: true; initial-value: rgba(74, 124, 89, 0.08); } @property --color-moss-10 { syntax: ''; inherits: true; initial-value: rgba(74, 124, 89, 0.10); } @property --color-moss-15 { syntax: ''; inherits: true; initial-value: rgba(74, 124, 89, 0.15); } @property --color-moss-18 { syntax: ''; inherits: true; initial-value: rgba(74, 124, 89, 0.18); } @property --color-moss-25 { syntax: ''; inherits: true; initial-value: rgba(74, 124, 89, 0.25); } @property --color-stone-50 { syntax: ''; inherits: true; initial-value: #f6f5f2; } @property --color-stone-100 { syntax: ''; inherits: true; initial-value: #f0efe9; } @property --color-stone-200 { syntax: ''; inherits: true; initial-value: #eceae5; } @property --color-stone-300 { syntax: ''; inherits: true; initial-value: #e2e0da; } @property --color-ink { syntax: ''; inherits: true; initial-value: #1f2937; } @property --color-ink-700 { syntax: ''; inherits: true; initial-value: #6b7280; } @property --color-ink-500 { syntax: ''; inherits: true; initial-value: #9ca3af; } @property --color-crimson { syntax: ''; inherits: true; initial-value: #dc2626; } @property --color-crimson-light { syntax: ''; inherits: true; initial-value: #fef2f2; } @property --color-forest { syntax: ''; inherits: true; initial-value: #16a34a; } @property --color-amber { syntax: ''; inherits: true; initial-value: #d97706; } @property --color-amber-light { syntax: ''; inherits: true; initial-value: #fef3c7; } @property --color-frost-50 { syntax: ''; inherits: true; initial-value: #f3f4f6; } @property --color-frost-700 { syntax: ''; inherits: true; initial-value: #4b5563; } @property --color-surface { syntax: ''; inherits: true; initial-value: #ffffff; } @property --color-metos { syntax: ''; inherits: true; initial-value: #0b866a; } @property --color-soil-temperature-bg { syntax: ''; inherits: true; initial-value: #fee2e2; } @property --color-soil-temperature-fg { syntax: ''; inherits: true; initial-value: #b91c1c; } @property --color-leaf-wetness-bg { syntax: ''; inherits: true; initial-value: #dbeafe; } @property --color-leaf-wetness-fg { syntax: ''; inherits: true; initial-value: #1d4ed8; } @property --color-soil-moisture-bg { syntax: ''; inherits: true; initial-value: #fef3c7; } @property --color-soil-moisture-fg { syntax: ''; inherits: true; initial-value: #a16207; } @property --color-rainfall-bg { syntax: ''; inherits: true; initial-value: #cffafe; } @property --color-rainfall-fg { syntax: ''; inherits: true; initial-value: #0e7490; } @property --color-wind-speed-bg { syntax: ''; inherits: true; initial-value: #f3f4f6; } @property --color-wind-speed-fg { syntax: ''; inherits: true; initial-value: #4b5563; } @property --color-eto-bg { syntax: ''; inherits: true; initial-value: #f3e8ff; } @property --color-eto-fg { syntax: ''; inherits: true; initial-value: #7e22ce; } @property --color-ph-bg { syntax: ''; inherits: true; initial-value: #dcfce7; } @property --color-ph-fg { syntax: ''; inherits: true; initial-value: #15803d; } @property --color-ec-bg { syntax: ''; inherits: true; initial-value: #ffedd5; } @property --color-ec-fg { syntax: ''; inherits: true; initial-value: #c2410c; } @property --color-water-level-bg { syntax: ''; inherits: true; initial-value: #dbeafe; } @property --color-water-level-fg { syntax: ''; inherits: true; initial-value: #1e40af; } /* ─── Translucent overlays + cross-flipping tokens (tokens.css) ──────────── Light mode zeroes these alphas; dark mode lifts them. ``--topbar-bg-light`` and ``--topbar-bg-dark`` cross-flip (0.8 ↔ 0), so both are registered so the two surfaces fade in opposite directions instead of swapping instantly. */ @property --white-08 { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, 0); } @property --white-80 { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, 0); } @property --white-90 { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, 0); } @property --white-92 { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, 0); } @property --white-96 { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, 0); } @property --topbar-bg-light { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, 0.8); } @property --topbar-bg-dark { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, 0); } @property --surface-dark-70 { syntax: ''; inherits: true; initial-value: rgba(28, 33, 44, 0); } @property --surface-dark-96 { syntax: ''; inherits: true; initial-value: rgba(28, 33, 44, 0); } @property --surface-elevated-100 { syntax: ''; inherits: true; initial-value: rgba(45, 51, 67, 0); } @property --surface-elevated-96 { syntax: ''; inherits: true; initial-value: rgba(45, 51, 67, 0); } @property --page-overlay-06 { syntax: ''; inherits: true; initial-value: rgba(15, 23, 42, 0); } @property --page-overlay-80 { syntax: ''; inherits: true; initial-value: rgba(15, 20, 25, 0); } @property --neutral-overlay-35 { syntax: ''; inherits: true; initial-value: rgba(150, 150, 150, 0); } /* --input-bg reassigns its var() source between themes (``var(--surface-raised)`` in light, ``var(--surface)`` in dark). Register it so the cascade swap is interpolated end-to-end instead of snapping from one leaf color to the other. */ @property --input-bg { syntax: ''; inherits: true; initial-value: #f0efe9; } /* ─── Shadow stacks (shadows.css — rgba alphas shift between themes) ─────── */ @property --shadow-card { syntax: ''; inherits: true; initial-value: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); } @property --shadow-card-hover { syntax: ''; inherits: true; initial-value: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03); } @property --shadow-dropdown { syntax: ''; inherits: true; initial-value: 0 10px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04); } @property --shadow-sidebar { syntax: ''; inherits: true; initial-value: 2px 0 8px rgba(0, 0, 0, 0.04); } /* ─── Global ease between themes ──────────────────────────────────────────── Longhands (rather than a comma-separated shorthand) so every registered property shares the same duration + easing. The shorthand grammar treats each comma-separated item as a separate transition entry, so it would only attach duration to the last property. */ :root { transition-property: --color-moss, --color-moss-light, --color-moss-dark, --color-moss-08, --color-moss-10, --color-moss-15, --color-moss-18, --color-moss-25, --color-stone-50, --color-stone-100, --color-stone-200, --color-stone-300, --color-ink, --color-ink-700, --color-ink-500, --color-crimson, --color-crimson-light, --color-forest, --color-amber, --color-amber-light, --color-frost-50, --color-frost-700, --color-surface, --color-metos, --color-soil-temperature-bg, --color-soil-temperature-fg, --color-leaf-wetness-bg, --color-leaf-wetness-fg, --color-soil-moisture-bg, --color-soil-moisture-fg, --color-rainfall-bg, --color-rainfall-fg, --color-wind-speed-bg, --color-wind-speed-fg, --color-eto-bg, --color-eto-fg, --color-ph-bg, --color-ph-fg, --color-ec-bg, --color-ec-fg, --color-water-level-bg, --color-water-level-fg, --white-08, --white-80, --white-90, --white-92, --white-96, --topbar-bg-light, --topbar-bg-dark, --surface-dark-70, --surface-dark-96, --surface-elevated-100, --surface-elevated-96, --page-overlay-06, --page-overlay-80, --neutral-overlay-35, --input-bg, --shadow-card, --shadow-card-hover, --shadow-dropdown, --shadow-sidebar; transition-duration: 400ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* ─── Strip color from local `transition: var(--transition)` ───────────────── `--transition` resolves to `transition: all 0.2s`. Components using it (cards, dropdowns, buttons, table rows, sidebar, …) set their own local `transition: all 0.2s`. When :root interpolates theme tokens at 400ms, each intermediate color restarts a fresh 200ms local transition — the child can never catch up with the parent's pace, so it visibly lags. Strip color/background-color/border-color from the local transition and let the :root transition drive theme changes; keep transform/opacity/ box-shadow/filter for hover and focus micro-interactions. The `:root` ancestor bumps specificity from (0,1,0) to (0,2,0) so this override beats the per-component `transition: var(--transition)` shorthand regardless of source-file load order. */ :root .card, :root .surface, :root .stats-card, :root .stat-card, :root .dropdown-trigger, :root .dropdown-menu, :root .dropdown-item, :root .dropdown-chevron, :root .form-input, :root .form-select, :root .form-textarea, :root .btn, :root .pagination-btn, :root .switch, :root .switch-track, :root .switch-thumb, :root .user-link, :root .filter-bar, :root .filter-bar-input, :root .filter-search input, :root .data-table tbody tr, :root .data-table th, :root .tab-link, :root .sidebar, :root .sidebar .nav-item, :root .subscription-row, :root .landing-card, :root .product-card { transition-property: transform, opacity, box-shadow, filter, scale; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { :root { transition-duration: 0ms; } :root .card, :root .surface, :root .stats-card, :root .stat-card, :root .dropdown-trigger, :root .dropdown-menu, :root .dropdown-item, :root .dropdown-chevron, :root .form-input, :root .form-select, :root .form-textarea, :root .btn, :root .pagination-btn, :root .switch, :root .switch-track, :root .switch-thumb, :root .user-link, :root .filter-bar, :root .filter-bar-input, :root .filter-search input, :root .data-table tbody tr, :root .data-table th, :root .tab-link, :root .sidebar, :root .sidebar .nav-item, :root .subscription-row, :root .landing-card, :root .product-card { transition-duration: 0ms; } }