/* ══════════════════════════════════════════════════════════════════════════ ██████╗ ██╗ ██╗ █████╗ ███╗ ██╗████████╗ █████╗ ███╗ ██╗██╗██╗ ██╗███╗ ███╗ ██╔═══██╗██║ ██║██╔══██╗████╗ ██║╚══██╔══╝██╔══██╗████╗ ██║██║██║ ██║████╗ ████║ ██║ ██║██║ ██║███████║██╔██╗ ██║ ██║ ███████║██╔██╗ ██║██║██║ ██║██╔████╔██║ ██║▄▄ ██║██║ ██║██╔══██║██║╚██╗██║ ██║ ██╔══██║██║╚██╗██║██║██║ ██║██║╚██╔╝██║ ╚██████╔╝╚██████╔╝██║ ██║██║ ╚████║ ██║ ██║ ██║██║ ╚████║██║╚██████╔╝██║ ╚═╝ ██║ ╚══▀▀═╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═══╝╚═╝ ╚═════╝ ╚═╝ ╚═╝ ══════════════════════════════════════════════════════════════════════════ TENET5 QUANTANIUM DESIGN CONTRACT · css/tokens.css · CANONICAL v1.1.0 — 2026-04-27 — Hash anchor: /css/QUANTANIUM.json ══════════════════════════════════════════════════════════════════════════ YOU ARE READING THE CANONICAL DESIGN-TOKEN CONTRACT FOR THIS SITE. QUANTANIUM is TENET5's living-architecture name for the unified design + quantum-state pipeline. The technical CSS prefix remains `--slate-*` (widely referenced, stable), with a QUANTANIUM-pipeline namespace `--quantanium-*` for live-substrate UI surfaces (ising engine indicator, pvnp-tier colours, decoder telemetry). ┌───────────────────────────────────────────────────────────────────────┐ │ STOP — IF YOU ARE AN AI AGENT ABOUT TO EDIT CSS, READ THIS FIRST │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ RULE 1. This file is the ONLY place new :root tokens are defined. │ │ Do not add :root{} blocks to other files. If you need a │ │ new token, add it HERE and reference it elsewhere. │ │ │ │ RULE 2. Legacy aliases live in the §LEGACY ALIAS LAYER below. │ │ They forward old names (--bg, --text, --liril-*, --font-*) │ │ to canonical (--slate-*) names. Do not add new aliases — │ │ use canonical names in new code. │ │ │ │ RULE 3. Canonical tokens are written with !important. This is │ │ enforced by liril_brand_guardian and exists to defeat │ │ auto-generation passes that try to overwrite the theme. │ │ │ │ RULE 4. Cascade load order is FIXED: │ │ 1. /css/tokens.css ← THIS FILE (FIRST) │ │ 2. /style.css ← reset + layout primitives │ │ 3. /css/.css ← feature-specific │ │ 4. /css/inline_generated.css ← CI-generated rules │ │ Do not reorder. Do not import this file from inside another │ │ CSS file with @import — it must be a in the page. │ │ │ │ RULE 5. Machine-readable mirror lives at /css/QUANTANIUM.json. │ │ Every change to this file MUST update QUANTANIUM.json's │ │ canonical_source.sha256 field. Run: │ │ python tools/liril_brand_guardian.py --update-token-hash │ │ to recompute. │ │ │ │ RULE 6. Brand identity is locked separately in CLAUDE.md + │ │ AGENTS.md. Token VALUES below can evolve (palette swap, │ │ type-scale tuning). Token NAMES cannot — pages have │ │ hard-coded var(--slate-bg), var(--slate-ink), etc. │ │ │ └───────────────────────────────────────────────────────────────────────┘ The technical CSS prefix is `--slate-*` (canonical) plus the QUANTANIUM-pipeline UI prefix `--quantanium-*` (§4 below). Both namespaces resolve in this file. Legacy aliases (--bg, --text-*, --liril-*, --font-*, --color-*, --s-*, --r-*) forward via §2. The active palette is MONOCHROME OPERATIONAL-INTEL: base #202020 / raised #262626 / sunken #1a1a1a / overlay #161616 ink white / accent heraldic gold #c9a44c fonts Inter (body+display) + IBM Plex Mono (labels) Do not migrate to oxblood, navy, red-ensign, or any other historical palette without (a) a Daniel-ratified directive and (b) updating this header + QUANTANIUM.json + the brand guardian's expected-hash. Theme drift between sessions is the failure mode this contract prevents. ══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── §1 CANONICAL TOKENS — SLATE NAMESPACE (--slate-*) ─────────────────────────────────────────────────────────────────────── */ :root { /* ── Surfaces ──────────────────────────────────────────────────────── */ --slate-bg: #202020 !important; /* page background */ --slate-raised: #262626 !important; /* cards, panels */ --slate-sunken: #1a1a1a !important; /* nested wells */ --slate-overlay: #161616 !important; /* modal scrim, hero base */ --slate-table: rgba(38, 38, 38, 0.55) !important; --slate-evidence-tint: rgba(201, 164, 76, 0.04) !important; /* ── Ink (text) ────────────────────────────────────────────────────── */ --slate-ink: #ffffff !important; /* primary text */ --slate-ink-strong: #ffffff !important; /* headings, emphasis */ --slate-ink-dim: #b9b9b9 !important; /* secondary copy */ --slate-ink-muted: #7a7a7a !important; /* tertiary, captions */ --slate-ink-faint: #4a4a4a !important; /* placeholder */ /* ── Accent (heraldic gold) ────────────────────────────────────────── */ --slate-accent: #c9a44c !important; /* primary accent */ --slate-accent-warm: #d4b46a !important; /* hover */ --slate-accent-deep: #a07c30 !important; /* pressed / deep */ --slate-accent-glow: rgba(201, 164, 76, 0.10) !important; --slate-link: #c9a44c !important; --slate-link-hover: #d4b46a !important; --slate-brass: #c9a44c !important; /* field-watch brass alias */ /* ── Semantic tones (muted, never alarm) ───────────────────────────── */ --slate-critical: #a45a52 !important; /* muted brick, never #ef4444 */ --slate-verified: #6e8f68 !important; /* muted field green */ --slate-warning: #c9a44c !important; /* gold doubles as warn */ --slate-info: #6c7e91 !important; --slate-quantum: #8b7ec4 !important; /* reserved, ising indicator */ /* ── Borders ───────────────────────────────────────────────────────── */ --slate-border: #333333 !important; --slate-border-hot: #4a4a4a !important; /* hover */ --slate-border-accent: rgba(201, 164, 76, 0.35) !important; /* ── Typography stacks — TWO-FONT LOCK (Daniel 2026-04-27) ────────── The site renders in EXACTLY two faces, both webfont-loaded for cross-platform parity: • Atkinson Hyperlegible (Braille Institute) — body, headlines, display, links. Humanist rounded sans, designed for character differentiation (I/l/1, 0/O, b/d). • IBM Plex Mono — labels, eyebrows, monospace UI chrome, code. No other faces. No system-ui fallthrough drift between machines. Serif slot maps to Atkinson too — site does not use a serif. */ --slate-font-sans: "Atkinson Hyperlegible", sans-serif !important; --slate-font-mono: "IBM Plex Mono", ui-monospace, monospace !important; --slate-font-serif: "Atkinson Hyperlegible", sans-serif !important; --slate-font-display: "Atkinson Hyperlegible", sans-serif !important; --slate-font-accessible:"Atkinson Hyperlegible", sans-serif !important; /* ── Type scale (fluid, perfect-fifth) ─────────────────────────────── */ --slate-text-6xl: clamp(2.5rem, 5vw, 4rem) !important; --slate-text-5xl: clamp(2rem, 4vw, 3rem) !important; --slate-text-4xl: clamp(1.75rem,3.5vw,2.5rem) !important; --slate-text-3xl: clamp(1.5rem, 3vw, 2rem) !important; --slate-text-2xl: clamp(1.25rem,2vw, 1.5rem) !important; --slate-text-xl: 1.25rem !important; --slate-text-lg: 1.125rem !important; --slate-text-base: 1.0625rem !important; --slate-text-sm: 0.875rem !important; --slate-text-xs: 0.75rem !important; /* ── Spacing scale ─────────────────────────────────────────────────── */ --slate-pad-2xs: 4px !important; --slate-pad-xs: 8px !important; --slate-pad-sm: 12px !important; --slate-pad-md: 20px !important; --slate-pad-lg: 32px !important; --slate-pad-xl: 48px !important; --slate-pad-2xl: 72px !important; /* Fluid spacing (preferred for layout containers) */ --slate-s-2xs: clamp(4px, 0.4vw, 6px) !important; --slate-s-xs: clamp(8px, 0.8vw, 12px) !important; --slate-s-sm: clamp(12px, 1.2vw, 20px) !important; --slate-s-md: clamp(20px, 2.5vw, 36px) !important; --slate-s-lg: clamp(36px, 4.5vw, 64px) !important; --slate-s-xl: clamp(56px, 7vw, 100px) !important; --slate-s-2xl: clamp(80px, 10vw, 140px) !important; /* ── Radii ─────────────────────────────────────────────────────────── */ --slate-radius-xs: 2px !important; --slate-radius-sm: 4px !important; --slate-radius-md: 8px !important; --slate-radius-lg: 12px !important; --slate-radius-xl: 16px !important; --slate-radius-pill: 999px !important; /* ── Shadows ───────────────────────────────────────────────────────── */ --slate-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25) !important; --slate-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40) !important; --slate-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55) !important; --slate-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.65) !important; --slate-shadow-glass: 0 4px 24px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; /* ── Motion ────────────────────────────────────────────────────────── */ --slate-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1) !important; --slate-ease-in-out: cubic-bezier(0.65, 0.05, 0.35, 1) !important; --slate-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1) !important; --slate-duration-fast: 120ms !important; --slate-duration-base: 220ms !important; --slate-duration-slow: 420ms !important; /* ── Layout ────────────────────────────────────────────────────────── */ --slate-max-content: 780px !important; --slate-max-data: 960px !important; --slate-max-wide: 1200px !important; --slate-nav-h: 56px !important; /* ── Z-index scale ─────────────────────────────────────────────────── */ --slate-z-base: 1 !important; --slate-z-raised: 10 !important; --slate-z-nav: 100 !important; --slate-z-dropdown: 200 !important; --slate-z-overlay: 500 !important; --slate-z-walkthrough: 900 !important; --slate-z-toast: 1000 !important; --slate-z-modal: 1100 !important; /* ── Brand anchor ──────────────────────────────────────────────────── */ --slate-system-seed: 118400; /* public, machine-readable */ --slate-tokens-rev: "1.0.0-2026-04-27"; /* update QUANTANIUM.json on bump */ color-scheme: dark !important; } /* ───────────────────────────────────────────────────────────────────────── §2 LEGACY ALIAS LAYER — do not redefine, do not extend ───────────────────────────────────────────────────────────────────────── These map historical token names to canonical --slate-* tokens so pre-existing pages, inline_generated.css, and third-party slate templates keep rendering without rewrites. New code MUST use the canonical names. Old namespace → Canonical ────────────────────────────────────── --bg / --bg-elevated → --slate-bg / --slate-raised --text / --text-* → --slate-ink / --slate-ink-* --accent / --accent-* → --slate-accent / --slate-accent-* --color-* → --slate-{semantic} --liril-* → --slate-* (red-ensign legacy folded in) --hud-* / --color-quantum → kept as semantic accents --font-{sans,mono,…} → --slate-font-* --text-{xs..6xl} → --slate-text-* --s-{2xs..2xl} → --slate-s-* --r-{sm..xl} → --slate-radius-* ─────────────────────────────────────────────────────────────────────── */ :root { /* ── Surfaces (legacy --bg-*) ──────────────────────────────────────── */ --bg: var(--slate-bg); --bg-elev: var(--slate-raised); --bg-elevated: var(--slate-raised); --bg-card: var(--slate-raised); --bg-card-h: var(--slate-raised); --bg-surface: var(--slate-raised); --bg-darker: var(--slate-overlay); --bg-dark: var(--slate-overlay); --bg-table: var(--slate-table); --bg-evidence: var(--slate-evidence-tint); --bg-handoff: var(--slate-evidence-tint); --section-bg: var(--slate-bg); --hero-bg: var(--slate-overlay); --card-bg: var(--slate-raised); --surface: var(--slate-raised); /* ── Text (legacy --text-*) ────────────────────────────────────────── */ --text: var(--slate-ink); --text-primary: var(--slate-ink); --text-secondary: var(--slate-ink-dim); --text-tertiary: var(--slate-ink-muted); --text-quaternary: var(--slate-ink-faint); --text-light: var(--slate-ink-strong); --text-light-muted: var(--slate-ink-dim); --text-muted: var(--slate-ink-dim); --text-dim: var(--slate-ink-muted); --on-surface: var(--slate-ink); /* ── Accent (legacy --accent-*, --primary-*, --color-gold) ─────────── */ --accent: var(--slate-accent); --accent-bright: var(--slate-accent-warm); --accent-glow: var(--slate-accent-glow); --accent-soft: var(--slate-accent-glow); --accent-med: var(--slate-accent-glow); --accent-gold: var(--slate-accent); --primary: var(--slate-accent); --primary-light: var(--slate-accent-warm); --secondary: var(--slate-raised); --color-gold: var(--slate-accent); --color-royal-gold: var(--slate-accent); --color-royal-gold-light: var(--slate-accent-warm); --color-royal-gold-dark: var(--slate-accent-deep); /* ── Semantic colours ──────────────────────────────────────────────── */ --color-critical: var(--slate-critical); --color-warning: var(--slate-warning); --color-verified: var(--slate-verified); --color-info: var(--slate-info); --color-green: var(--slate-verified); --color-blue: var(--slate-info); --color-purple: var(--slate-quantum); --color-quantum: var(--slate-quantum); --color-abcxyz: var(--slate-accent); --color-ensign-red: var(--slate-critical); --color-ensign-navy: var(--slate-overlay); --color-royal-cream: var(--slate-ink); /* ── HUD palette (kept for OSINT/dashboard pages) ──────────────────── */ --hud-cyan: var(--slate-info); --hud-teal: var(--slate-info); --hud-green: var(--slate-verified); --hud-amber: var(--slate-accent); --hud-glow-cyan: var(--slate-accent-glow); --hud-glow-teal: var(--slate-accent-glow); --hud-border: var(--slate-border); --hud-border-accent: var(--slate-border-accent); --border-handoff: var(--slate-border-accent); /* ── Borders ───────────────────────────────────────────────────────── */ --border: var(--slate-border); --border-hover: var(--slate-border-hot); --border-hot: var(--slate-border-hot); --border-accent: var(--slate-border-accent); /* ── LIRIL legacy (red-ensign era — folded into slate) ─────────────── */ --liril-ensign-red: var(--slate-accent); --liril-ensign-red-deep: var(--slate-accent-deep); --liril-gold: var(--slate-accent); --liril-gold-bright: var(--slate-accent-warm); --liril-navy: var(--slate-bg); --liril-navy-deep: var(--slate-overlay); --liril-navy-raised: var(--slate-raised); --liril-navy-border: var(--slate-border); --liril-text-primary: var(--slate-ink); --liril-text-secondary: var(--slate-ink-dim); --liril-text-dim: var(--slate-ink-muted); --liril-text-accent: var(--slate-accent); --liril-ai-cyan: var(--slate-info); --liril-ai-quantum: var(--slate-quantum); --liril-ai-amber: var(--slate-accent); --liril-ai-emerald: var(--slate-verified); --liril-radius-sm: var(--slate-radius-sm); --liril-radius-md: var(--slate-radius-md); --liril-radius-lg: var(--slate-radius-lg); --liril-radius-pill: var(--slate-radius-pill); --liril-pad-xs: var(--slate-pad-2xs); --liril-pad-sm: var(--slate-pad-xs); --liril-pad-md: var(--slate-pad-sm); --liril-pad-lg: var(--slate-pad-md); --liril-pad-xl: var(--slate-pad-lg); --liril-shadow-sm: var(--slate-shadow-sm); --liril-shadow-md: var(--slate-shadow-md); --liril-shadow-lg: var(--slate-shadow-lg); --liril-shadow-glow: var(--slate-shadow-glass); --liril-ease-out: var(--slate-ease-out); --liril-ease-in-out: var(--slate-ease-in-out); --liril-duration-fast: var(--slate-duration-fast); --liril-duration-base: var(--slate-duration-base); --liril-duration-slow: var(--slate-duration-slow); --liril-z-nav: var(--slate-z-nav); --liril-z-overlay: var(--slate-z-overlay); --liril-z-walkthrough: var(--slate-z-walkthrough); --liril-z-toast: var(--slate-z-toast); --liril-font-sans: var(--slate-font-sans); --liril-font-mono: var(--slate-font-mono); --liril-font-serif: var(--slate-font-serif); /* ── Typography aliases ────────────────────────────────────────────── */ --font-sans: var(--slate-font-sans); --font-mono: var(--slate-font-mono); --font-headline: var(--slate-font-display); --font-body: var(--slate-font-sans); --font-hud: var(--slate-font-display); --text-xs: var(--slate-text-xs); --text-sm: var(--slate-text-sm); --text-base: var(--slate-text-base); --text-lg: var(--slate-text-lg); --text-xl: var(--slate-text-xl); --text-2xl: var(--slate-text-2xl); --text-3xl: var(--slate-text-3xl); --text-4xl: var(--slate-text-4xl); --text-5xl: var(--slate-text-5xl); --text-6xl: var(--slate-text-6xl); /* ── Spacing aliases (style.css fluid scale) ───────────────────────── */ --s-2xs: var(--slate-s-2xs); --s-xs: var(--slate-s-xs); --s-sm: var(--slate-s-sm); --s-md: var(--slate-s-md); --s-lg: var(--slate-s-lg); --s-xl: var(--slate-s-xl); --s-2xl: var(--slate-s-2xl); /* ── Radii aliases ─────────────────────────────────────────────────── */ --r-sm: var(--slate-radius-sm); --r-md: var(--slate-radius-md); --r-lg: var(--slate-radius-lg); --r-xl: var(--slate-radius-xl); /* ── Shadows / motion aliases ──────────────────────────────────────── */ --shadow-sm: var(--slate-shadow-sm); --shadow-md: var(--slate-shadow-md); --shadow-lg: var(--slate-shadow-lg); --shadow-glass: var(--slate-shadow-glass); --shadow-glass-h: var(--slate-shadow-glass); --backdrop-card: blur(12px) saturate(160%); --ease: var(--slate-ease-out); --ease-spring: var(--slate-ease-spring); --dur-fast: var(--slate-duration-fast); --dur: var(--slate-duration-base); --dur-slow: var(--slate-duration-slow); /* ── Layout ────────────────────────────────────────────────────────── */ --max-content: var(--slate-max-content); --max-data: var(--slate-max-data); --max-wide: var(--slate-max-wide); --nav-h: var(--slate-nav-h); /* ── TENT seed-anchored brand vars (per memory feedback rule) ──────── */ --tnt-seed: 118400; --tnt-tick-ms: 7830; /* 7.83 Hz Schumann anchor */ --tnt-loom-cell: var(--slate-radius-sm); } /* ───────────────────────────────────────────────────────────────────────── §3 GLOBAL APPLY — unconditional, defense-in-depth ───────────────────────────────────────────────────────────────────────── Per memory feedback_css_theme_must_be_unconditional_and_auto_applied.md the active theme must apply with no [data-slate=...] gate. shell.js may set data-slate as an additional hook but this layer does NOT require it. ─────────────────────────────────────────────────────────────────────── */ html, body { background: var(--slate-bg) !important; color: var(--slate-ink) !important; font-family: var(--slate-font-sans) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* Kill legacy topographic / red-ensign background images that older pages embed via body.topo / body::before. */ body.topo, body.topo::before, body::before { background-image: none !important; background: var(--slate-bg) !important; } /* ───────────────────────────────────────────────────────────────────────── §4 QUANTANIUM PIPELINE TOKENS — --quantanium-* namespace ───────────────────────────────────────────────────────────────────────── Live-substrate UI surface tokens. The QUANTANIUM pipeline runs every dispatch through the Ising / tensor_journal / pvnp ensemble and emits per-dispatch telemetry (q.engine, ising_decode_ms, tensor_project_ms, compose_ms, paste_fire_ms). These tokens drive the visible state of that pipeline on the site — engine indicator colours, pvnp-tier glow, decoder pulse animation. Read by: - js/quantanium-status.js (live widget) - .quantanium-status (DOM widget below) - .quantanium-pulse (decoder heartbeat element) ─────────────────────────────────────────────────────────────────────── */ :root { /* ── Engine identity ───────────────────────────────────────────────── */ --quantanium-engine-color: var(--slate-quantum) !important; /* #8b7ec4 */ --quantanium-engine-glow: rgba(139, 126, 196, 0.18) !important; --quantanium-engine-bg: rgba(139, 126, 196, 0.06) !important; --quantanium-engine-border: rgba(139, 126, 196, 0.30) !important; /* ── PvNP tier colours (classifier output) ─────────────────────────── */ --quantanium-pvnp-solvable: #6e8f68 !important; /* slate-verified field green */ --quantanium-pvnp-np-exposed: #c9a44c !important; /* slate-accent gold (review) */ --quantanium-pvnp-loom-break: #a45a52 !important; /* slate-critical brick (rejected) */ --quantanium-pvnp-unknown: #7a7a7a !important; /* slate-ink-muted */ /* ── Decoder telemetry surfaces ────────────────────────────────────── */ --quantanium-decoder-pulse: rgba(139, 126, 196, 0.45) !important; --quantanium-decoder-trail: rgba(139, 126, 196, 0.10) !important; --quantanium-tick-ms: 220ms !important; /* base tick */ --quantanium-tick-fast: 90ms !important; /* high-load */ --quantanium-tick-slow: 420ms !important; /* idle */ /* ── Bench badge colours (overclocker dimensions per R13) ──────────── */ --quantanium-bench-accuracy: #6e8f68 !important; --quantanium-bench-efficiency: #6c7e91 !important; --quantanium-bench-speed: #c9a44c !important; --quantanium-bench-artistic: #8b7ec4 !important; /* ── Substrate constants (machine-readable) ────────────────────────── */ --quantanium-system-seed: 118400; --quantanium-pipeline-rev: "1.0.0-2026-04-27"; --quantanium-engine-default: "ising_local"; } /* ───────────────────────────────────────────────────────────────────────── §5 ACCESSIBLE READING MODE — Atkinson Hyperlegible ───────────────────────────────────────────────────────────────────────── Atkinson Hyperlegible was designed by the Braille Institute (2020) to improve character recognition for low-vision and dyslexic readers. Open-licensed via Google Fonts; loaded on every page so the toggle has zero latency. Default mode: Inter primary with Atkinson as second-stack fallback (Inter already covers most readers well). Reading mode: Atkinson primary, larger line-height + wider tracking, toggled by setting [data-reading="accessible"] on . Toggle widget: js/reading-mode.js (button in nav + persists in localStorage as "tnt-reading=accessible|default"). Backed by science: https://brailleinstitute.org/freefont research (character differentiation, weighted bottoms, distinct b/d/p/q). ─────────────────────────────────────────────────────────────────────── */ /* Two-font lock — both faces webloaded so the site renders the same on Windows, macOS, and Linux. No system-font fallthrough. */ @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap'); html[data-reading="accessible"], html[data-reading="accessible"] body { font-family: var(--slate-font-accessible) !important; letter-spacing: 0.01em !important; line-height: 1.75 !important; } html[data-reading="accessible"] h1, html[data-reading="accessible"] h2, html[data-reading="accessible"] h3, html[data-reading="accessible"] h4, html[data-reading="accessible"] h5, html[data-reading="accessible"] h6 { font-family: var(--slate-font-accessible) !important; letter-spacing: 0.005em !important; } html[data-reading="accessible"] p, html[data-reading="accessible"] li, html[data-reading="accessible"] td, html[data-reading="accessible"] dd { font-size: 1.0625rem !important; /* slate-text-base */ line-height: 1.85 !important; word-spacing: 0.05em !important; } /* Always honour prefers-reduced-motion for the toggle transitions */ @media (prefers-reduced-motion: reduce) { html[data-reading="accessible"] * { transition: none !important; } } /* ───────────────────────────────────────────────────────────────────────── §6 QUANTANIUM STATUS WIDGET — DOM contract for js/quantanium-status.js ───────────────────────────────────────────────────────────────────────── Markup the JS expects:
ising_local solvable — / —
─────────────────────────────────────────────────────────────────────── */ .quantanium-status { display: inline-flex; align-items: center; gap: var(--slate-pad-xs); padding: var(--slate-pad-2xs) var(--slate-pad-sm); background: var(--quantanium-engine-bg); border: 1px solid var(--quantanium-engine-border); border-radius: var(--slate-radius-pill); font-family: var(--slate-font-mono); font-size: var(--slate-text-xs); color: var(--slate-ink-dim); letter-spacing: 0.04em; text-transform: uppercase; } .quantanium-status .quantanium-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--quantanium-engine-color); box-shadow: 0 0 0 0 var(--quantanium-decoder-pulse); animation: quantanium-pulse var(--quantanium-tick-ms) ease-out infinite; } .quantanium-status .quantanium-engine { color: var(--quantanium-engine-color); font-weight: 700; } .quantanium-status[data-pvnp="solvable"] .quantanium-tier { color: var(--quantanium-pvnp-solvable); } .quantanium-status[data-pvnp="np_exposed"] .quantanium-tier { color: var(--quantanium-pvnp-np-exposed); } .quantanium-status[data-pvnp="loom_break"] .quantanium-tier { color: var(--quantanium-pvnp-loom-break); } .quantanium-status[data-pvnp="unknown"] .quantanium-tier { color: var(--quantanium-pvnp-unknown); } .quantanium-status .quantanium-bench { color: var(--slate-ink-muted); font-size: 0.65rem; } @keyframes quantanium-pulse { 0% { box-shadow: 0 0 0 0 var(--quantanium-decoder-pulse); } 70% { box-shadow: 0 0 0 10px rgba(139, 126, 196, 0); } 100% { box-shadow: 0 0 0 0 rgba(139, 126, 196, 0); } } @media (prefers-reduced-motion: reduce) { .quantanium-status .quantanium-pulse { animation: none; } } /* ───────────────────────────────────────────────────────────────────────── §7 READING-MODE TOGGLE WIDGET — styles for js/reading-mode.js ─────────────────────────────────────────────────────────────────────── */ .reading-mode-toggle { position: fixed; bottom: var(--slate-pad-md); right: var(--slate-pad-md); z-index: var(--slate-z-toast); display: inline-flex; align-items: center; gap: var(--slate-pad-xs); padding: var(--slate-pad-xs) var(--slate-pad-sm); background: var(--slate-raised); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-pill); color: var(--slate-ink-dim); font-family: var(--slate-font-mono); font-size: var(--slate-text-xs); cursor: pointer; transition: background var(--slate-duration-base) var(--slate-ease-out), border-color var(--slate-duration-base) var(--slate-ease-out); } .reading-mode-toggle:hover, .reading-mode-toggle:focus-visible { background: var(--slate-bg); border-color: var(--slate-accent); color: var(--slate-ink); outline: none; } html[data-reading="accessible"] .reading-mode-toggle { border-color: var(--slate-accent); color: var(--slate-accent); } .reading-mode-toggle::before { content: "Aa"; font-weight: 700; font-size: 0.95em; letter-spacing: -0.04em; } /* ══════════════════════════════════════════════════════════════════════════ END QUANTANIUM DESIGN CONTRACT — css/tokens.css Source of truth: this file. Machine mirror: /css/QUANTANIUM.json Enforcement: tools/liril_brand_guardian.py token-hash check Owner: TENET5 / LIRIL — site identity gate ══════════════════════════════════════════════════════════════════════════ */