@import './fonts.css'; /* ── 3-Layer Token System ── Layer 1: Theme primitives - breeze-light.css: default light theme on :root - breeze-dark.css: dark overrides on :root[data-theme="dark"] Both are imported — toggle via data-theme attribute on Layer 2: Semantic tokens (universal — never changes between themes) Layer 3: Library bridge (backward compat with @juspay/svelte-ui-components) For build-time theme-only deployment, remove the unused theme import. For custom merchant themes, add a new file scoped to :root[data-theme="custom"]. */ @import './themes/breeze-light.css'; /* Layer 1: Light primitives (default) */ @import './themes/breeze-dark.css'; /* Layer 1: Dark primitives (activated via data-theme="dark") */ @import './tokens-semantic.css'; /* Layer 2: Semantic mappings */ @import './tokens-library-bridge.css'; /* Layer 3: Library compatibility */ @import './utilities.css'; /* Global utility classes */ * { box-sizing: border-box; } /* ── Global Keyframes ── Shared animations used by multiple components. Components should reference these instead of redefining them locally. */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUpFade { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } /* ── Container Utilities ── Centered max-width containers used across many pages. */ .container-xl { max-width: 1440px; width: 100%; margin-inline: auto; } .container-lg { max-width: 1280px; width: 100%; margin-inline: auto; } .container-md { max-width: 1200px; width: 100%; margin-inline: auto; } /* ── Section Reveal Animation ── Used by BreezeAutomatic fold components for scroll-triggered entrance. Apply .section-reveal to child elements, and toggle .animate-in on a parent to trigger the transition. */ .section-reveal { opacity: 0; transform: translateY(30px); transition: all var(--transition-section-reveal); } .section-reveal.animate-in, .animate-in > .section-reveal, .animate-in .section-reveal { opacity: 1; transform: translateY(0); }