/* Porcelain & Scarlet design tokens - FULL_SITE_REVAMP_SPEC.md §4/§6, Wave 0 slice W0-C. SOURCE OF TRUTH: docs/revamp-design/tokens.css (the locked design authority). The values below are a verbatim port of that file's :root block. Do not retune a value here - amend the authority file and re-port, so the design system and the app never disagree. WHY THIS FILE IS CLASS-SCOPED, NOT :root The authority ships the block on a bare :root because it stands alone in the design mockups. In the app it has to land DARK: at CLOSET_REVAMP_SHELL=0 the product must render byte-for-byte as it does today, and a bare :root block loaded after style.css would repaint the whole site the moment it shipped. So every declaration is scoped to `:root.revamp-shell`, and the class is added to by applyRevampShellChrome() in app.js only when the flag is surfaced true on GET /auth/config - the PUBLIC boot config, applied before any view paints, so the logged-out login/reset/invite surfaces are styled too and the class survives logout. The flag is environment-level, never per-account. Flag off = the class is never present = this file contributes nothing to any computed style. That is the whole inertness guarantee, and app/tests/test_revamp_shell_flag.py pins it: no selector in this file may be unscoped. IF YOU ARE A SERVER-RENDERED PAGE, LINKING THIS FILE IS NOT ENOUGH. The class is mandatory: link /static/tokens.css AND put class="revamp-shell" on your own , deciding both from `_revamp_shell_enabled()` read server-side per request. Link it without the class and you get nothing, in silence. Never a client-side check, and never per viewer on /board or /board/look/ - anonymous board responses are shared-cached, so B4 (CONTRACTS_STYLE_BOARD.md:36) makes that gate environment-level only. W0-C deliberately wires only the SPA (static/index.html + app.js, signed in AND signed out, both from /auth/config); each server-rendered surface is wired by the slice that owns its head builder - P41/P42 by W5-BRD (`_board_html_head`), P00 by W5-PUB (`index()`), P46's 404/500 handlers by W1-F. P44 unsubscribe is deliberately NOT flag-gated (CONTRACTS_PUBLIC_AUTH.md:2373) and must not read the flag at all. NO @font-face HERE. The authority file carries its own @font-face rules because it is read standalone; the app already self-hosts all three families in /static/fonts/fonts.css (Playfair Display, Montserrat, Grand Hotel) under CSP `font-src 'self'`. Re-declaring them would download the same faces twice and split the source of truth. The --font-* tokens below name exactly those three families and add no fourth face. Quicksand is retired and must not come back (fonts.css header, owner decision 2026-07-27). */ :root.revamp-shell { /* --- Surfaces and ink ------------------------------------------------ */ /* White ground, W5C-PS-COLOR (owner decision 2026-07-31). Rationale lives in the authority file; the short version is that the ramp was RE-DERIVED rather than point-edited. Against the old warm porcelain each step sat within ~.003 chroma of the ground and read as a pure lightness step; against a zero-chroma white the same tint shows its full chroma as warm cast, so every surface step is held at or under the ~.005 large-area chroma JND. The rules keep their lightness on purpose - the ground rose only 3.5pp, and lightening them cut rule-on-paper from 1.87:1 to 1.58:1. paper and panel are deliberately the SAME value: a painted-area census found panel covering 111.8% of the Pair viewport against paper's 8.6%, so panel is the surface read as "the background". Separation moves from tone to rule. The zero-chroma white keeps hue 84.57 so the --accent-soft / --accent-bg mixes at the bottom of this file keep their warm cast. */ --color-paper: oklch(100% 0 84.57); --color-paper-2: oklch(97.5% .003 84); --color-paper-3: oklch(94% .005 82); --color-panel: oklch(100% 0 84.57); --color-ink: oklch(22.33% .0224 269.03); --color-ink-2: oklch(33% .024 269); --color-muted: oklch(45% .018 269); --color-rule: oklch(77% .005 80); --color-rule-2: oklch(68% .008 70); /* --- Accent and status ----------------------------------------------- */ --color-accent: oklch(56.28% .1742 28.18); --color-accent-deep: oklch(45% .135 28); --color-accent-ink: var(--color-paper); --color-companion: oklch(77.83% .0534 223.09); --color-companion-2: oklch(91% .022 223); --color-focus: oklch(35% .10 269); --color-success: oklch(48% .060 223); --color-error: var(--color-accent-deep); /* --- Type ------------------------------------------------------------ */ --font-display: "Fraunces", Georgia, serif; --font-body: "Montserrat", Arial, sans-serif; --font-wordmark: "Grand Hotel", cursive; /* --- Space ----------------------------------------------------------- */ --space-3xs: .125rem; --space-2xs: .25rem; --space-xs: .5rem; --space-sm: .75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 8rem; /* --- Scale ----------------------------------------------------------- */ --text-xs: .72rem; --text-sm: .82rem; --text-base: 1rem; --text-md: 1.2rem; --text-lg: 1.5rem; --text-xl: 1.9rem; --text-2xl: 2.5rem; --text-display: clamp(2.65rem, 6vw, 5rem); /* --- Motion (design.md's three sanctioned primitives use these) ------- */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.7, 0, .84, 0); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; /* --- Line, radius, layout -------------------------------------------- */ --rule-hair: 1px; --radius-sm: .75rem; --radius-card: 1.5rem; --radius-pill: 999px; --page-gutter: clamp(1rem, 4vw, 3.5rem); --page-max: 80rem; --reading-max: 68ch; --nav-height: 8.5rem; --z-sticky: 200; --z-nav: 300; /* Anything that takes the screen sits ABOVE the chrome, and the scale says so once instead of each overlay arguing it out with --z-nav on its own. The shell's two bars are fixed/sticky at --z-nav while the legacy modal layer is 100, so every overlay drawn by the old stylesheet was being painted over by the top bar and the bottom bar - the picker sheet's Done button sat underneath the tab bar at 390px. The avatar menu hit this first and was answered locally, by lifting its own scrim to --z-nav + 1; these three names are that same answer generalized, so the next overlay inherits it rather than rediscovering it. Ordering within the overlay band is the existing one, preserved: a toast outranks a modal (it reports on what the modal just did), and the lightbox outranks both. Consumed only under :root.revamp-shell, so the flag-off shell keeps its own numbers untouched. */ --z-overlay: 400; --z-toast: 500; --z-lightbox: 600; /* --- Legacy bridge (§4: "the legacy crimson --accent family and --gold-* aliases are REPLACED at the token layer behind the shell flag") -------- style.css keeps its own :root block for the flag-off shell. These four re-point the legacy accent family at the Porcelain & Scarlet scarlet on the SAME element (:root), so every existing consumer of --accent* follows the new system while a wave is mid-conversion. The six --gold-* names need no entry here: style.css already defines each as `var(--accent...)`, and a custom property computed on :root resolves against the winning :root declaration, so they inherit the replacement automatically. --accent-soft and --accent-bg have no counterpart in the authority file (the design system expresses tint with paper, not with a lighter accent), so rather than invent two hexes they are DERIVED from the authority's own accent via color-mix. Nothing here is a new color decision. */ --accent: var(--color-accent); --accent-deep: var(--color-accent-deep); --accent-soft: color-mix(in oklch, var(--color-accent) 55%, var(--color-paper)); --accent-bg: color-mix(in oklch, var(--color-accent) 12%, var(--color-paper)); }