/* ============================================================ DOMAIN · BASE — element defaults built on the tokens. Kept minimal; components carry their own styling. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--surface-app); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv01", "ss01"; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--text-primary); } p { margin: 0; text-wrap: pretty; } a { color: var(--text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } a:hover { color: var(--interactive-primary-active); text-decoration: underline; text-underline-offset: 2px; } code, kbd, samp { font-family: var(--font-data); font-size: 0.92em; } ::selection { background: var(--brand-200); color: var(--text-primary); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Direction / RTL — components use CSS logical properties (inline-start/end), so setting dir="rtl" on or any scope mirrors the whole UI. */ [dir="rtl"] { direction: rtl; } [dir="rtl"] .domain-flip { transform: scaleX(-1); } /* Thin, calm scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); } /* Shared keyframes used by components */ @keyframes domain-spin { to { transform: rotate(360deg); } } @keyframes domain-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes domain-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes domain-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes domain-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes domain-scale-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } } @keyframes domain-locator { 0% { transform: scale(0.7); opacity: 0.55; } 60% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes domain-slide-right { from { transform: translateX(100%); } to { transform: none; } } @keyframes domain-slide-left { from { transform: translateX(-100%); } to { transform: none; } } @keyframes domain-slide-top { from { transform: translateY(-100%); } to { transform: none; } } @keyframes domain-slide-bottom { from { transform: translateY(100%); } to { transform: none; } } @keyframes domain-indeterminate { 0% { left: -40%; } 100% { left: 100%; } } @keyframes domain-menu-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } @keyframes domain-pin-spark { from { opacity: 1; transform: rotate(var(--spark-angle, 0deg)) translateY(-2px); } to { opacity: 0; transform: rotate(var(--spark-angle, 0deg)) translateY(-16px); } } /* Accessibility — honor the OS "reduce motion" setting. Animations and transitions collapse to near-instant; state changes still apply. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Print — flatten to ink-on-paper: light surfaces, hairline borders, and drop transient/overlay chrome (scrollbars, shadows, sticky bars). Screens layer their own @media print on top for page breaks. */ @media print { :root, [data-theme] { --surface-app: #fff; --surface-card: #fff; } body { background: #fff; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; } *, *::before, *::after { box-shadow: none !important; } [data-fb-ui], [data-print-hide] { display: none !important; } }