/* ========================================================================== NAMAYAR — Design tokens -------------------------------------------------------------------------- Style direction (per ui-ux-pro-max): refined minimalism with a cinematic dark register — film-slate charcoal surfaces, warm gold accent. The palette is derived from the skill's "Luxury / Premium" result (#1C1917 + #A16207), re-tuned per theme so every foreground/background pair clears WCAG AA. Everything below is a *semantic* token (--surface, --text-muted, --accent). Templates must never use a raw hex value; that is what makes three themes and a future re-skin a one-file change. Themes: light (default) · dark · sepia. Selection order — an explicit [data-theme] on always wins, so the user's choice beats the OS preference. ========================================================================== */ /* --- Fonts: self-hosted, no CDN dependency (§1) -------------------------- */ @font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; /* never block first paint on a font (§7.3) */ } @font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* --- Typography ------------------------------------------------------ */ --font-body: 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif; --font-display: var(--font-body); /* Latin-only contexts (usernames, slugs, code) where Vazirmatn's Latin glyphs are less comfortable than a true monospace. */ --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace; /* Type scale — 1.200 minor third, 16px base (never below 16 on mobile). */ --text-2xs: 0.6875rem; /* 11px — badges only, never body copy */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.625rem; /* 26px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.5rem; /* 40px */ --text-5xl: 3.25rem; /* 52px */ --leading-tight: 1.3; --leading-snug: 1.45; --leading-normal: 1.7; /* Persian needs more leading than Latin */ --leading-loose: 1.9; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- Spacing: 4/8px rhythm ------------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* --- Radius ---------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; /* --- Layout ---------------------------------------------------------- */ --container: 76rem; --container-narrow: 44rem; /* long-form reading measure */ --sidebar-width: 17rem; --header-height: 4rem; /* Minimum interactive size — enforced on every control (skill §2). */ --tap-target: 2.75rem; /* 44px */ /* --- Z-index scale --------------------------------------------------- */ --z-base: 0; --z-sticky: 10; --z-header: 20; --z-drawer: 40; --z-overlay: 50; --z-modal: 60; --z-toast: 80; /* --- Motion ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 300ms; /* Exit is ~65% of enter so dismissal feels responsive (skill §7). */ --duration-exit: 130ms; } /* ========================================================================== THEME: LIGHT (default) Verified pairs (see scripts/check_contrast.py): text/bg 15.9:1 · text-muted/bg 7.2:1 · accent/bg 4.7:1 · accent-ink/accent 5.6:1 ========================================================================== */ :root, :root[data-theme='light'] { color-scheme: light; --bg: #f7f6f4; --bg-subtle: #efedea; --surface: #ffffff; --surface-2: #faf9f7; --surface-3: #f1efec; --surface-inset: #f4f2ef; --text: #1c1917; --text-muted: #5c554f; --text-subtle: #78706a; --text-inverse: #fafaf9; --border: #e0dcd7; --border-strong: #c9c3bc; /* Form-control boundary — WCAG 1.4.11 requires 3:1 for UI components. */ --border-input: #988d82; --accent: #96591f; /* warm gold-bronze, AA on --bg */ --accent-hover: #7c4917; --accent-active: #653a12; --accent-ink: #ffffff; /* text on an accent fill */ --accent-soft: #f7ecdc; /* tinted background */ --accent-soft-ink: #7a4715; /* text on --accent-soft */ --accent-border: #e2c9a5; --success: #15803d; --success-soft: #e6f4ea; --success-ink: #14622f; --warning: #a15c07; --warning-soft: #fdf0dc; --warning-ink: #8a4d05; --danger: #be1e2d; --danger-soft: #fdeaec; --danger-ink: #a3182a; --info: #0e6f8e; --info-soft: #e4f2f8; --info-ink: #0c5c76; --focus-ring: #0f5fa8; --overlay: rgba(28, 25, 23, 0.55); --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06), 0 1px 3px rgba(28, 25, 23, 0.05); --shadow-md: 0 2px 6px rgba(28, 25, 23, 0.07), 0 6px 16px rgba(28, 25, 23, 0.06); --shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.1), 0 20px 48px rgba(28, 25, 23, 0.08); /* Reading surface — Story View and the display modes. */ --read-bg: #fbfaf8; --read-text: #1c1917; --read-muted: #57534e; --read-rule: #e5e1db; /* Character accent slots. Characters store a slot name (``char-3``), not a hex, so each theme supplies a variant that clears AA on its own surfaces. Values computed by scripts/check_contrast.py's sibling search. */ --char-1: #8F5E26; --char-2: #247288; --char-3: #9240CC; --char-4: #207840; --char-5: #C0334F; --char-6: #3864CA; --char-7: #7D6621; --char-8: #1F7572; --char-9: #A3532B; --char-10: #7D4DD0; } /* ========================================================================== THEME: DARK — the product's signature register. Reading modes default here. Surfaces are warm-tinted charcoal (film slate), never pure black, so the gold accent reads as light rather than as a glow. ========================================================================== */ :root[data-theme='dark'] { color-scheme: dark; --bg: #0d0c0b; --bg-subtle: #131110; --surface: #1a1715; --surface-2: #221e1b; --surface-3: #2b2622; --surface-inset: #14120f; --text: #f6f4f1; --text-muted: #b3aaa2; --text-subtle: #948b83; --text-inverse: #1c1917; --border: #322c27; --border-strong: #453d36; --border-input: #72675d; --accent: #e0a955; /* brightened for dark surfaces */ --accent-hover: #ecb96a; --accent-active: #f2c67f; --accent-ink: #241703; /* dark ink on the light accent fill */ --accent-soft: #2a2114; --accent-soft-ink: #e8bd77; --accent-border: #4a3a20; --success: #5fc98a; --success-soft: #16281d; --success-ink: #7bd8a0; --warning: #e3ae5b; --warning-soft: #2a2114; --warning-ink: #efc178; --danger: #f2818c; --danger-soft: #2e1619; --danger-ink: #f7a0a8; --info: #6cc0dd; --info-soft: #142731; --info-ink: #8ad2ea; --focus-ring: #7ab6f0; --overlay: rgba(0, 0, 0, 0.72); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.65); --read-bg: #0f0d0c; --read-text: #f2efe9; --read-muted: #a89f96; --read-rule: #2e2823; --char-1: #B17229; --char-2: #278BA6; --char-3: #A760DA; --char-4: #22934C; --char-5: #D7536D; --char-6: #567DD7; --char-7: #9A7D24; --char-8: #218E8A; --char-9: #C9632F; --char-10: #946ADC; } /* ========================================================================== THEME: SEPIA — long rehearsal sessions; paper-warm, low blue light. ========================================================================== */ :root[data-theme='sepia'] { color-scheme: light; --bg: #f2e8d8; --bg-subtle: #ece0cd; --surface: #fbf4e6; --surface-2: #f6ecda; --surface-3: #eee1cb; --surface-inset: #efe4d0; --text: #2b2015; --text-muted: #5d4c38; --text-subtle: #77644c; --text-inverse: #fbf4e6; --border: #ddcdb2; --border-strong: #c4ae8c; --border-input: #908478; --accent: #8a4a12; --accent-hover: #713b0d; --accent-active: #5c300a; --accent-ink: #fbf4e6; --accent-soft: #eddcc0; --accent-soft-ink: #6d390c; --accent-border: #cdb08a; --success: #14672f; --success-soft: #dfe9d8; --success-ink: #125a29; --warning: #8a4d05; --warning-soft: #f0e0c2; --warning-ink: #764105; --danger: #a3182a; --danger-soft: #f2ddd9; --danger-ink: #8c1424; --info: #0c5c76; --info-soft: #dde8ec; --info-ink: #0a4d63; --focus-ring: #0d5490; --overlay: rgba(43, 32, 21, 0.55); --shadow-sm: 0 1px 2px rgba(72, 55, 33, 0.1); --shadow-md: 0 2px 8px rgba(72, 55, 33, 0.12); --shadow-lg: 0 10px 32px rgba(72, 55, 33, 0.16); --read-bg: #f6ecd9; --read-text: #2b2015; --read-muted: #5d4c38; --read-rule: #ddcdb2; --char-1: #8F5E26; --char-2: #247288; --char-3: #9240CC; --char-4: #207840; --char-5: #C0334F; --char-6: #3864CA; --char-7: #7D6621; --char-8: #1F7572; --char-9: #A3532B; --char-10: #7D4DD0; } /* Follow the OS only when the user has not chosen explicitly. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0d0c0b; --bg-subtle: #131110; --surface: #1a1715; --surface-2: #221e1b; --surface-3: #2b2622; --surface-inset: #14120f; --text: #f6f4f1; --text-muted: #b3aaa2; --text-subtle: #948b83; --text-inverse: #1c1917; --border: #322c27; --border-strong: #453d36; --accent: #e0a955; --accent-hover: #ecb96a; --accent-active: #f2c67f; --accent-ink: #241703; --accent-soft: #2a2114; --accent-soft-ink: #e8bd77; --accent-border: #4a3a20; --success: #5fc98a; --success-soft: #16281d; --success-ink: #7bd8a0; --warning: #e3ae5b; --warning-soft: #2a2114; --warning-ink: #efc178; --danger: #f2818c; --danger-soft: #2e1619; --danger-ink: #f7a0a8; --info: #6cc0dd; --info-soft: #142731; --info-ink: #8ad2ea; --focus-ring: #7ab6f0; --overlay: rgba(0, 0, 0, 0.72); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.65); --read-bg: #0f0d0c; --read-text: #f2efe9; --read-muted: #a89f96; --read-rule: #2e2823; --border-input: #72675d; --char-1: #B17229; --char-2: #278BA6; --char-3: #A760DA; --char-4: #22934C; --char-5: #D7536D; --char-6: #567DD7; --char-7: #9A7D24; --char-8: #218E8A; --char-9: #C9632F; --char-10: #946ADC; } } /* ========================================================================== RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Offset in-page jumps so anchors don't hide under the sticky header. */ scroll-padding-top: calc(var(--header-height) + var(--space-4)); } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); font-weight: var(--weight-normal); color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100dvh; /* No horizontal scroll anywhere (§7.3). */ overflow-x: hidden; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--text); text-wrap: balance; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } h5, h6 { font-size: var(--text-base); } p { text-wrap: pretty; } a { color: var(--accent); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--accent-hover); text-decoration: underline; } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } /* Tabular figures keep numeric columns from shifting (skill §6). */ .tnum, table td, .stat-value { font-variant-numeric: tabular-nums; } /* Latin text inside an RTL document (usernames, slugs). */ .ltr { direction: ltr; unicode-bidi: isolate; text-align: left; } .mono { font-family: var(--font-mono); font-size: 0.9em; } /* --- Focus: always visible, never removed (skill §1) --------------------- */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--accent); color: var(--accent-ink); } /* --- Screen-reader-only, with a visible skip link ------------------------ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-inline-start: var(--space-4); top: -100%; z-index: var(--z-toast); padding: var(--space-3) var(--space-5); background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-md); font-weight: var(--weight-semibold); transition: top var(--duration-base) var(--ease-out); } .skip-link:focus { top: var(--space-4); text-decoration: none; } /* --- Scrollbars ---------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: content-box; } /* ========================================================================== REDUCED MOTION — honoured globally (skill §1, §7.3). Animation-driven features degrade to an instant reveal rather than breaking: Word-Slide mode checks this same preference in JS. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }