/* ========================================================================== TOOLNOVA DESIGN SYSTEM — BASE Reset + foundational element styles. Uses CSS logical properties (margin-inline, padding-inline, text-align: start, etc.) instead of left/right throughout the whole system, specifically so RTL languages mirror correctly everywhere for free — no separate [dir="rtl"] override needed for basic spacing/alignment, only for the handful of places a physical direction is genuinely intentional (documented in components.css where that occurs). ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } html[data-reduced-motion="true"] { scroll-behavior: auto; } body { margin: 0; background: var(--tn-color-void); color: var(--tn-color-text); font-family: var(--tn-font-display); font-size: var(--tn-text-base); line-height: var(--tn-leading-normal); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, p, figure { margin: 0; } button, input, select, textarea { font-family: inherit; color: inherit; } img, svg { display: block; max-width: 100%; } a { color: inherit; } .tn-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Global focus visibility — one rule, every interactive element, every product. Never overridden per-component. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--tn-color-coral); outline-offset: 2px; border-radius: 4px; } /* ---------- RTL ---------- */ /* Setting dir="rtl" on (done by the i18n engine) is sufficient for the vast majority of this system because layout uses logical properties. The few genuinely-physical exceptions (icons that convey direction, like a "back" chevron) are mirrored explicitly. */ [dir="rtl"] .tn-mirror-rtl { transform: scaleX(-1); } /* ---------- Ambient background field (used by hero-style pages) ---------- */ .tn-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .tn-field__glow { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; filter: blur(120px); opacity: 0.16; } .tn-field__glow--coral { background: var(--tn-color-coral); inset-block-start: -20vw; inset-inline-end: -10vw; } .tn-field__glow--blue { background: var(--tn-color-blue); inset-block-end: -25vw; inset-inline-start: -15vw; opacity: 0.1; } .tn-page { position: relative; z-index: 1; } /* ---------- Layout primitives ---------- */ .tn-container { max-width: 1240px; margin-inline: auto; padding-inline: var(--tn-space-6); } .tn-stack { display: flex; flex-direction: column; } .tn-row { display: flex; align-items: center; }