/* ============================================================================ V2PRO — reset, typography, native controls, a11y contract Depends on tokens.css. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { /* Persian is RTL; direction lives on so scrollbars flip too. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100dvh; background: var(--bg-0); color: var(--ink-1); font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: var(--fs-14); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Theme switching should not flash: colours cross-fade, layout does not. */ transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out); } /* Page background: a single wide light source at the top, matching the elevation model. Fixed so it does not scroll with content. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 62% at 50% -12%, rgba(34, 211, 238, .07), transparent 62%), radial-gradient(90% 52% at 84% 4%, rgba(124, 140, 255, .05), transparent 60%), var(--bg-0); } [data-theme='light'] body::before { background: radial-gradient(120% 62% at 50% -12%, rgba(11, 124, 146, .09), transparent 62%), radial-gradient(90% 52% at 84% 4%, rgba(91, 99, 216, .05), transparent 60%), var(--bg-0); } /* ---------- headings ---------- */ h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); font-weight: 700; letter-spacing: 0; text-wrap: balance; } h1 { font-size: var(--fs-26); } h2 { font-size: var(--fs-20); } h3 { font-size: var(--fs-16); } h4, h5, h6 { font-size: var(--fs-14); } p { text-wrap: pretty; } /* ---------- links ---------- */ a { color: var(--brand); text-decoration: none; transition: color var(--dur-1) var(--ease-out); } a:hover { color: var(--brand-2); } a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--brand-line); } /* ---------- media ---------- */ img, svg, canvas, video { display: block; max-width: 100%; } svg { /* Icons inherit text colour and size unless a component overrides. */ fill: none; stroke: currentColor; flex: none; } /* ---------- numbers ---------- Tabular figures everywhere data is aligned. Persian digits vary enough in width that proportional figures visibly ripple in a column. */ th, td, input, output, code, kbd, time, .num, .mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } code, kbd, pre, samp { font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace; font-size: .92em; direction: ltr; unicode-bidi: isolate; } kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-1); background: var(--sf-2); border: 1px solid var(--line-2); box-shadow: var(--rim), 0 1px 0 rgba(0, 0, 0, .3); color: var(--ink-2); font-size: var(--fs-11); line-height: 1; } /* Latin-only strings (URLs, UUIDs, emails, tokens) inside RTL text. Without isolation the browser reorders punctuation and the value reads wrong. */ .ltr { direction: ltr; unicode-bidi: isolate; text-align: left; } /* ---------- lists ---------- */ ul, ol { list-style: none; } /* ---------- tables ---------- */ table { border-collapse: separate; border-spacing: 0; width: 100%; } th { text-align: right; font-weight: 600; } /* ---------- form controls ---------- Native controls are restyled here once so every form in the app inherits the same look without per-view CSS. */ button, input, select, textarea, optgroup { font: inherit; font-family: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } button:disabled, input:disabled, select:disabled, textarea:disabled, [aria-disabled='true'] { cursor: not-allowed; opacity: .45; } input, select, textarea { width: 100%; min-height: 38px; padding: 8px 11px; border-radius: var(--r-1); background: var(--bg-1); border: 1px solid var(--line-2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22); color: var(--ink-1); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); } [data-theme='light'] input, [data-theme='light'] select, [data-theme='light'] textarea { box-shadow: inset 0 1px 2px rgba(20, 35, 75, .05); } /* 16px prevents iOS Safari from zooming the viewport on focus. */ @media (max-width: 767px) { input, select, textarea { font-size: var(--fs-16); min-height: 44px; } } input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--line-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-line); background: var(--sf-1); box-shadow: var(--ring), inset 0 1px 2px rgba(0, 0, 0, .18); } input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--crit); } input[aria-invalid='true']:focus, select[aria-invalid='true']:focus, textarea[aria-invalid='true']:focus { box-shadow: 0 0 0 3px var(--crit-soft), inset 0 1px 2px rgba(0, 0, 0, .18); } input[readonly] { /* Read-only must not look disabled — it holds real, copyable data. */ background: var(--sf-2); color: var(--ink-2); cursor: default; } ::placeholder { color: var(--ink-3); opacity: 1; } textarea { min-height: 84px; resize: vertical; line-height: var(--lh-body); } select { /* Custom chevron; `left` because the control is RTL. */ appearance: none; padding-left: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: left 14px top 50%, left 9px top 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; } select option { background: var(--sf-2); color: var(--ink-1); } input[type='checkbox'], input[type='radio'] { appearance: none; flex: none; width: 17px; height: 17px; min-height: 0; padding: 0; border: 1.5px solid var(--line-3); border-radius: 5px; background: var(--bg-1); box-shadow: none; cursor: pointer; display: grid; place-content: center; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-spring); } input[type='radio'] { border-radius: 50%; } input[type='checkbox']::after { content: ''; width: 9px; height: 5px; border: 2px solid var(--brand-ink); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--dur-1) var(--ease-spring); } input[type='radio']::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-ink); transform: scale(0); transition: transform var(--dur-1) var(--ease-spring); } input[type='checkbox']:checked, input[type='radio']:checked, input[type='checkbox']:indeterminate { background: var(--brand); border-color: var(--brand); } input[type='checkbox']:checked::after, input[type='radio']:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); } input[type='radio']:checked::after { transform: scale(1); } /* Indeterminate = "some rows on this page selected" in the table header. */ input[type='checkbox']:indeterminate::after { width: 9px; height: 0; border-bottom: 2px solid var(--brand-ink); border-left: 0; transform: none; } input[type='checkbox']:active:not(:disabled), input[type='radio']:active:not(:disabled) { transform: scale(.9); } input[type='range'] { appearance: none; min-height: 0; height: 4px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--sf-3); box-shadow: none; cursor: pointer; } input[type='range']::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); } input[type='range']::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--brand); border: 0; } /* Search/number affordances the browser adds are inconsistent across engines. */ input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { appearance: none; } input[type='number'] { -moz-appearance: textfield; } input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button { appearance: none; margin: 0; } fieldset { border: 0; min-width: 0; } legend { padding: 0; } label { display: block; } /* ---------- focus ---------- Never remove focus rings. Mouse users do not see them (`:focus-visible`), keyboard users always do. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-1); } input:focus-visible, select:focus-visible, textarea:focus-visible { /* Inputs already draw a --ring on :focus; a second ring would double up. */ outline: none; } /* ---------- selection ---------- */ ::selection { background: var(--brand-soft); color: var(--ink-1); } /* ---------- scrollbars ---------- */ * { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-3); border: 3px solid transparent; background-clip: content-box; border-radius: var(--r-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ---------- a11y utilities ---------- */ /* Visible to screen readers, invisible on screen. Not `display:none`, which removes it from the accessibility tree entirely. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Same, until focused — used by the skip link. */ .skip-link { position: fixed; top: var(--sp-2); right: var(--sp-2); z-index: var(--z-toast); padding: 10px 16px; border-radius: var(--r-1); background: var(--brand); color: var(--brand-ink); font-weight: 600; box-shadow: var(--e3); transform: translateY(calc(-100% - var(--sp-4))); transition: transform var(--dur-2) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); color: var(--brand-ink); } [hidden] { display: none !important; } /* ---------- text helpers ---------- */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nowrap { white-space: nowrap; } /* ---------- reduced motion ---------- The contract: animation is opt-out globally, and every component relies on this block rather than re-checking the media query itself. Durations drop to 1ms instead of 0 so `transitionend` handlers still fire. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; } } /* ---------- print ---------- */ @media print { body::before { display: none; } body { background: #fff; color: #000; } }