/* ============================================================================= sq-theme.css — COLOUR and font-family binding ONLY. No geometry. ----------------------------------------------------------------------------- Everything here is applied on ONE element (), so a component stylesheet can contain zero hardcoded colours and still be fully themeable. The governing idea is an edited scholarly page: paper, ink, rubrication and a little brass. Rubrication — red for headings, marginalia and section marks — is the historical convention of the manuscript tradition, which is why it is the interaction colour here and not a generic link blue. The site previously used a cold navy #1C4A72 on warm parchment, chosen as "a link colour" and derived from nothing; it fought the ground on every page. Brass is ORNAMENT ONLY. It is deliberately too low-contrast for text and must never carry any. If you find yourself setting brass on a label, the label is wrong, not the token. ========================================================================== */ :root { /* --- Grounds ----------------------------------------------------------- */ --bg: #F6F2E8; /* paper */ --bg-2: #EFEADC; /* recessed — apparatus column, insets */ --card: #FFFDF7; /* raised — menus, dialogs, the rare real card */ --track: #E7E1D0; /* rails, meters, hatching */ /* --- Ink --------------------------------------------------------------- */ --ink: #14100C; /* body and headings */ --ink-soft: #4A4238; /* standfirst, secondary prose */ --ink-faint: #6A6053; /* metadata, captions, apparatus keys */ /* --- Rules ------------------------------------------------------------- */ --line: #DCD4C2; --line-strong: #C8BFA9; /* --- Interaction: rubrication red, the ONLY accent --------------------- --accent-raw carries the literal; --accent is the ROLE bound to it. The indirection is not decoration: [data-ground="accent"] must paint itself the accent colour WHILE rebinding the --accent role to the on-accent ink. Custom properties are not order-dependent within a block, so a ground that wrote `--bg: var(--accent); --accent: var(--on-accent);` resolved --bg to the ink and produced identical background and text. Grounds reference the -raw. */ --accent-raw: #A32A1E; --accent: var(--accent-raw); --accent-deep: #7E1D13; /* hover, active */ --accent-tint: #F0E2DE; /* selected row, quiet highlight */ --on-accent: #FDF8EF; /* text on a filled accent surface */ /* --- Ornament: brass. NEVER carries text. ------------------------------ */ --brass: #9A7B33; --motif-ink: color-mix(in srgb, var(--ink) 8%, transparent); /* --- The polarity-flipping pair ---------------------------------------- One "dramatic band" component reads correctly in both themes because these two swap roles rather than the component hardcoding a dark background. */ --contrast: #17120E; --on-contrast: #EDE6D6; --on-contrast-2:#A79C88; --accent-on-contrast: #D6603F; /* red lifts on dark ground to stay legible */ /* --- Misc -------------------------------------------------------------- */ /* Semantic status. Outside the brand palette by design: a success message must not be mistaken for rubrication, nor an error for ornament. */ --ok: #2E6B33; --danger: #A32A1E; --mark: #F3E7C8; /* search highlight */ --shadow-ink: 20, 16, 12; /* RGB triplet, tinted to ink */ --sh-1: 0 1px 2px rgba(var(--shadow-ink), .05); --sh-2: 0 14px 34px -18px rgba(var(--shadow-ink), .22); /* --- Font role binding ------------------------------------------------- Components reference these roles, never a family name. Swapping the display face (see the MoC licence question in sq-fonts.css) is a one-line change here, and no layout geometry may depend on a specific face's advance widths. */ --f-display: 'Al-Awwal', 'Saudi', Georgia, serif; --f-body: 'Amiri', 'Noto Naskh Arabic', Georgia, serif; --f-ui: 'Saudi', system-ui, -apple-system, sans-serif; --f-lit: 'Amiri', Georgia, serif; /* verse */ color-scheme: light; } /* ============================================================================= DARK — opt-in only, via data-theme="dark". Deliberately NOT wired to prefers-color-scheme: this is a reading surface and the choice belongs to the reader, not to their OS. Roles are preserved rather than inverted mechanically: no gold glow, no luminous white body text, no "textured black leather". ========================================================================== */ :root[data-theme="dark"] { --bg: #16130F; --bg-2: #1E1A15; --card: #241F19; --track: #2C261E; --ink: #E9E1D1; --ink-soft: #B9AE99; --ink-faint: #8C8271; --line: #322B23; --line-strong: #453C31; /* Red at #A32A1E is far too dark on a dark ground. Lifted and slightly desaturated so it still reads as rubrication rather than as a warning. */ --accent-raw: #E08268; --accent: var(--accent-raw); --accent-deep: #EFA891; --accent-tint: #33201B; --on-accent: #1A100C; --brass: #B2924A; --motif-ink: color-mix(in srgb, var(--ink) 10%, transparent); /* The band inverts: on a dark page the dramatic ground is the pale one. */ --contrast: #EDE6D6; --on-contrast: #17120E; --on-contrast-2: #5C5343; --accent-on-contrast: #A32A1E; --ok: #7FB584; --danger: #E08268; --mark: #4A3D1E; --shadow-ink: 0, 0, 0; --sh-1: 0 1px 2px rgba(var(--shadow-ink), .35); --sh-2: 0 14px 34px -18px rgba(var(--shadow-ink), .6); color-scheme: dark; } /* ============================================================================= GROUNDS — local token redefinition. A section re-declares the ground tokens on itself and EVERY descendant recolours for free, with no per-component work. Derived shades are computed with color-mix rather than authored, so they stay correct in both themes and under every era tint. ========================================================================== */ [data-ground="soft"] { --bg: var(--bg-2); background: var(--bg); color: var(--ink); } /* The reading surface. One declaration serves both themes because every value is derived from tokens — this is what replaced the .manuscript block in reading.css, which carried a whole parallel vocabulary plus a separate dark variant. */ [data-ground="paper"] { /* Deliberately does NOT redeclare --bg. It inherits the theme's paper value, and `--bg: var(--bg)` here was a self-referential cycle: the spec makes every custom property in a cycle guaranteed-invalid, which silently killed this element's own background AND the poem frame in sq-components.css, because both resolve var(--bg). Symptom: transparent reader ground, unframed عمود. */ background: radial-gradient(ellipse at 78% 8%, color-mix(in srgb, var(--brass) 7%, transparent) 0%, transparent 46%), radial-gradient(ellipse at 12% 92%, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 44%), var(--bg); color: var(--ink); } [data-ground="contrast"] { --bg: var(--contrast); --bg-2: color-mix(in srgb, var(--contrast) 92%, var(--on-contrast)); --card: color-mix(in srgb, var(--contrast) 88%, var(--on-contrast)); --ink: var(--on-contrast); --ink-soft: color-mix(in srgb, var(--on-contrast) 78%, var(--contrast)); --ink-faint: var(--on-contrast-2); --line: color-mix(in srgb, var(--on-contrast) 16%, var(--contrast)); --line-strong: color-mix(in srgb, var(--on-contrast) 28%, var(--contrast)); --accent: var(--accent-on-contrast); background: var(--bg); color: var(--ink); } [data-ground="accent"] { --bg: var(--accent-raw); --bg-2: color-mix(in srgb, var(--accent-raw) 86%, #000); --card: color-mix(in srgb, var(--accent-raw) 82%, #000); --ink: var(--on-accent); --ink-soft: color-mix(in srgb, var(--on-accent) 84%, var(--accent-raw)); --ink-faint: color-mix(in srgb, var(--on-accent) 62%, var(--accent-raw)); --line: color-mix(in srgb, var(--on-accent) 24%, var(--accent-raw)); /* The accent ROLE flips to the ink: a link on a red ground cannot be red. */ --accent: var(--on-accent); background: var(--bg); color: var(--ink); } /* --- Base application ----------------------------------------------------- */ html { background: var(--bg); } body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: var(--t-base); line-height: var(--lh-base); } ::selection { background: var(--mark); color: var(--ink); }