/* ==========================================================================
Puroresu Project — Design Tokens (theme-invariant primitives)
--------------------------------------------------------------------------
STATUS: staged, not yet linked by any template.
Load order (when adopted): this file must load BEFORE styles.css and every
archive-*.css / section stylesheet, e.g.
Contract
- Theme-dependent semantic colors (--bg-*, --text-*, --accent-*, --*-rgb,
--border-*, --shadow-*) stay in the theme blocks of styles.css
(:root/showa-light, modern-showa, archival-dark/dark). This file only
holds values that do not change with theme.
- Names marked [mirror] already exist in styles.css :root (lines ~696–780)
or archive-drawer-ui.css :root with IDENTICAL values. While both exist,
the later-loaded styles.css definition wins, so this file is a no-op
until the duplicates are removed there during migration.
- Every NEW value was chosen to exactly match the most frequent hardcoded
value it replaces (see the migration report), so phase-1 replacement is
pixel-identical. Near-duplicate values are snapped in a later, visually
verified phase.
- Root font-size is the browser default (16px), but users can change the
browser font size, which rescales rem and not px. rem tokens therefore
replace rem literals and px ("chrome") tokens replace px literals; the
two families are never swapped for each other.
- Timeline image presentation values (imageFocus, cardImageFocus, etc.)
are protected data and are intentionally NOT tokenized here.
========================================================================== */
:root {
/* ------------------------------------------------------------------------
1. Color primitives (theme-invariant)
Use for chrome that is deliberately fixed regardless of theme (drawer
controls, share confirmations, video/hero overlays). For themed surfaces
and text, keep using the semantic theme tokens.
------------------------------------------------------------------------ */
/* Neutrals: black → ink */
--color-black: #000000; /* 112 live uses */
--color-black-rgb: 0, 0, 0;
--color-ink-950: #050505; /* 68 — near-black surface */
--color-ink-950-rgb: 5, 5, 5;
--color-ink-940: #070706; /* archive hero background (--archive-hero-bg) */
--color-ink-900: #111111; /* 24 — also --control-text-active / --chip-text-active */
--color-ink-900-rgb: 17, 17, 17;
--color-ink-850: #151515; /* snap target for #141414 #171717 #191919 */
--color-ink-800: #222222; /* 47 */
--color-ink-800-rgb: 34, 34, 34;
--color-ink-700: #333333; /* 28 */
--color-ink-600: #444444;
--color-ink-500: #555555;
/* Neutrals: warm stone (muted text / pills on dark) */
--color-stone-500: #888178; /* drawer pill */
--color-stone-400: #bbb7af;
--color-stone-300: #c8c4bd; /* 13 */
--color-stone-200: #d7d3cb;
/* Neutrals: warm whites / papers */
--color-white: #ffffff; /* 110 */
--color-white-rgb: 255, 255, 255;
--color-paper: #f4f1e9; /* 56 — canonical warm white for drawer chrome */
--color-paper-rgb: 244, 241, 233;
--color-paper-cool: #f5f5f0; /* 23 hex + ~90 rgba(245,245,240,a) */
--color-paper-cool-rgb: 245, 245, 240;
--color-paper-warm: #f4efe5; /* 20 hex + rgba(244,239,229,a) */
--color-paper-warm-rgb: 244, 239, 229;
--color-paper-soft: #f6f1e7; /* mobile header / watchlist */
--color-cream: #f5ead6; /* 25 */
--color-parchment: #e8e3d9; /* = archival-dark --text-primary */
--color-parchment-rgb: 232, 227, 217;
--color-umber: #17130f; /* = archival-dark --bg-card / showa-light --text-primary */
--color-umber-rgb: 23, 19, 15;
/* Reds (restrained accent family) */
--color-red-400: #e33131; /* = --accent-red-strong (dark) */
--color-red-signal: #e22328; /* loading line, filter drawer */
--color-red-500: #d62828; /* = --accent-red (dark) */
--color-red-500-rgb: 214, 40, 40;
--color-red-rose: #d43b49; /* watchlist destructive */
--color-red-600: #c1121f; /* = --org-ajpw */
--color-red-wine: #a92a35; /* mobile filter / watchlist */
--color-red-700: #a6111b;
--color-red-800: #9f1111; /* = --accent-red-dark */
/* Golds (Vault ratings, featured accents) */
--color-gold-300: #d6a83b; /* = --accent-gold (dark) */
--color-gold-400: #c5aa62;
--color-gold-500: #b99a4b;
/* Feedback: share / copy confirmation (archive-drawer-ui.css, vault, styles) */
--color-success-bg: #276749; /* 13 */
--color-success-border: #9ae6b4; /* 14 */
--color-success-text: #f7fff9; /* 12 */
--color-ink-400: #666666;
/* Drawer & control chrome (exact values from the shared archive-*.css files;
near-duplicates such as #141413 / #171717 / #191919 are P4 snap candidates) */
--chrome-sheet-ink: #141413; /* profile sheet --sheet-ink */
--chrome-header-surface: #171717; /* mobile archive header + mobile filter controls */
--chrome-filter-surface: #191919; /* filter drawer option + footer */
--chrome-filter-text: #e8e5de;
--chrome-selected-surface: #282222;/* selected mobile filter control */
--chrome-pager-surface: #52504c;
--chrome-pager-muted: #aaa69f;
--chrome-pager-text: #ece8df;
/* Fixed alpha scrims (shared across modal/drawer/hero overlays) */
--scrim-24: rgba(0, 0, 0, 0.24);
--scrim-42: rgba(0, 0, 0, 0.42); /* 29 */
--scrim-62: rgba(0, 0, 0, 0.62); /* 21 */
--scrim-72: rgba(0, 0, 0, 0.72); /* 20 — also --modal-shadowbox-backdrop base */
--scrim-78: rgba(0, 0, 0, 0.78);
/* ------------------------------------------------------------------------
2. Typography
Semantic responsive sizes (--type-*) remain in styles.css because they
change inside media queries. These fixed steps replace literal
font-size values; each step equals the most frequent literal near it.
------------------------------------------------------------------------ */
--font-size-1: 0.62rem; /* ~9.9px — absorbs .65 .66 later */
--font-size-2: 0.68rem; /* ~10.9px — 36 uses; absorbs .7 */
--font-size-3: 0.72rem; /* ~11.5px — 43 uses; absorbs .74 */
--font-size-4: 0.78rem; /* ~12.5px — 69 uses (most common); absorbs .75 .76 .8 */
--font-size-5: 0.82rem; /* ~13.1px — 53 uses; absorbs .84 .85 */
--font-size-6: 0.86rem; /* ~13.8px — 23 uses; absorbs .88 */
--font-size-7: 0.9rem; /* 14.4px — 38 uses; absorbs .92 */
--font-size-8: 0.95rem; /* 15.2px — 22 uses; absorbs .94 .96 .98 */
--font-size-9: 1rem; /* 16px — 28 uses */
--font-size-10: 1.1rem; /* 17.6px — absorbs 1.05 1.08 1.12 1.15 */
--font-size-11: 1.25rem; /* 20px — 21 uses; absorbs 1.22 1.28 */
--font-size-12: 1.45rem; /* 23.2px — absorbs 1.35 */
--font-size-13: 2rem; /* 32px */
/* Fixed-pixel drawer/chrome labels (do not scale with type tokens) */
--font-size-chrome-xs: 11px;
--font-size-chrome-sm: 12px; /* share toast, badges, meta */
--font-size-chrome-md: 13px; /* mobile header / filter control labels */
--font-size-chrome-base: 16px;
--font-size-chrome-input: var(--font-size-chrome-base); /* search inputs — ≥16px prevents iOS focus zoom */
--font-size-chrome-lg: 18px;
--font-size-chrome-title: 32px; /* mobile archive header title */
--icon-size-chrome-md: 20px; /* share / search / clear icons */
--icon-size-chrome-lg: 24px; /* modal pager arrows */
/* Icon sizes [mirror] — exact replacements for 16px/20px/24px/2rem icon font-size */
--icon-size-xs: 0.875rem;
--icon-size-sm: 1rem;
--icon-size-md: 1.25rem;
--icon-size-lg: 1.5rem;
--icon-size-xl: 2rem;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 800;
/* ------------------------------------------------------------------------
3. Spacing (2px grid, rem-based)
[mirror] --space-1 … --space-12. New half-steps and large steps fill the
gaps. Off-grid literals (.35 .45 .55 .65 .85 .9 1.35 …) snap to the
nearest step in the visual-verification phase.
------------------------------------------------------------------------ */
--space-px: 1px;
--space-0-5: 0.125rem; /* 2px */
--space-1: 0.25rem; /* 4px [mirror] */
--space-1-5: 0.375rem; /* 6px */
--space-2: 0.5rem; /* 8px [mirror] */
--space-2-5: 0.625rem; /* 10px */
--space-3: 0.75rem; /* 12px [mirror] */
--space-3-5: 0.875rem; /* 14px */
--space-4: 1rem; /* 16px [mirror] */
--space-5: 1.25rem; /* 20px [mirror] */
--space-6: 1.5rem; /* 24px [mirror] */
--space-7: 1.75rem; /* 28px */
--space-8: 2rem; /* 32px [mirror] */
--space-9: 2.25rem; /* 36px */
--space-10: 2.5rem; /* 40px [mirror] */
--space-11: 2.75rem; /* 44px */
--space-12: 3rem; /* 48px [mirror] */
--space-14: 3.5rem; /* 56px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-28: 7rem; /* 112px */
/* Chrome spacing (px — drawers, sheets, mobile header; fixed by design) */
--space-chrome-1: 4px;
--space-chrome-1-5: 6px;
--space-chrome-2: 8px;
--space-chrome-2-5: 10px;
--space-chrome-3: 12px;
--space-chrome-4: 16px;
--space-chrome-4-5: 18px;
--space-chrome-5: 20px;
--space-chrome-6: 24px;
--space-chrome-7: 28px;
/* ------------------------------------------------------------------------
4. Radius
------------------------------------------------------------------------ */
--radius-none: 0; /* [mirror] */
--radius-2xs: 3px;
--radius-xs: 0.25rem; /* 4px [mirror] */
--radius-sm: 0.375rem; /* 6px [mirror] */
--radius-md: 0.5rem; /* 8px [mirror] — 33 literal `8px` */
--radius-xl: 0.75rem; /* 12px */
--radius-lg: 0.85rem; /* [mirror] — kept for modal cards */
--radius-2xl: 1rem; /* 16px */
--radius-sheet: 24px; /* px by design; = --archive-drawer-radius */
--radius-3xl: 2rem; /* 32px */
--radius-pill: 999px; /* [mirror] */
--radius-round: 50%;
/* Corner-radius system (Nov 2026): the three values every component uses.
Rules and examples: css/radius.css header and DESIGN_SYSTEM.md "Corner radius".
Note: --radius-lg (0.85rem) is larger than --radius-xl (0.75rem); these are
legacy names, do not use them for new work. */
--radius-surface: 24px; /* floating surfaces: cards, panes, rails, toolbars, sheets, modals */
--radius-inset: 16px; /* containers inside a surface; compact tiles */
--radius-control: 8px; /* buttons, inputs, chips, tabs, toggles */
/* ------------------------------------------------------------------------
5. Motion
Durations/easings are split so transitions can mix them. The
--motion-* shorthands are [mirror] values recomposed from these parts.
JS sync: archive-drawer-ui.js `motion.duration` (260) and `motion.easing`
must equal --duration-drawer / --ease-drawer; `toastDuration` (2600)
equals --duration-toast-hold; `toastMotion` (180) equals --duration-base.
------------------------------------------------------------------------ */
--duration-instant: 0ms;
--duration-quick: 120ms;
--duration-fast: 160ms; /* 117 uses */
--duration-base: 180ms; /* 147 uses (most common); archive toast */
--duration-standard: 220ms; /* 32 */
--duration-drawer: 260ms; /* 28; profile/archive drawer */
--duration-sheet: 320ms;
--duration-slow: 420ms; /* 13 */
--duration-hero: 460ms; /* archive hero collapse */
--duration-toast-hold: 2600ms;
--ease-standard: ease; /* 422 uses */
--ease-linear: linear;
--ease-out: ease-out;
--ease-in-out: ease-in-out;
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* 15 */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* 8; archive hero */
--ease-drawer: cubic-bezier(0.2, 0.75, 0.25, 1); /* = archive-drawer-ui.js */
--ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
--ease-vault: cubic-bezier(0.2, 0.86, 0.18, 1);
--ease-accelerate: cubic-bezier(0.55, 0.06, 0.68, 0.19);
--motion-fast: var(--duration-fast) var(--ease-standard); /* [mirror] 160ms ease */
--motion-standard: var(--duration-standard) var(--ease-standard); /* [mirror] 220ms ease */
--motion-sheet: var(--duration-sheet) var(--ease-sheet); /* [mirror] */
--motion-drawer: var(--duration-drawer) var(--ease-drawer);
/* ------------------------------------------------------------------------
6. Layers (z-index)
Values reproduce the CURRENT effective stacking exactly, so mapping
literals to these names changes nothing. Once every z-index references a
token, the ladder can be compressed by editing only this section.
One-off values sit on a tier via calc(), e.g. calc(var(--z-detail-modal) + 2).
Several tiers below 1000 are shared by unrelated page components that
happen to use the same number; the name records the dominant use.
JS: script.js sets detailScrollbar.style.zIndex to "5010" / "120"
(= --z-detail-modal-controls / --z-detail-scrollbar).
------------------------------------------------------------------------ */
/* 6a. Local stacking inside a component (no global meaning) */
--z-below: -1;
--z-base: 0;
--z-raised: 1;
--z-raised-2: 2;
--z-raised-3: 3;
--z-raised-4: 4;
--z-float: 5; /* share button over media; 6–9 = calc(--z-float + n) */
--z-float-top: 10;
/* 6b. Page layer */
--z-page-pane: 20; /* timeline detail pane */
--z-status: 25; /* mobile status strips */
--z-sticky: 30; /* archive toolbars, sticky headers */
--z-panel: 45; /* vault-room floating panels */
--z-publication-spine: 50;
--z-page-menu: 60; /* match filter menu, vault-room sheet overlay */
--z-panel-raised: 70; /* vault-room panels, keyboard tooltip */
--z-page-lightbox: 90; /* video-games shadowbox / screenshot lightbox */
--z-nav: 100; /* .site-nav (desktop) */
--z-pane-stroke: 100; /* timeline pane bottom stroke */
--z-vault-watchlist-docked: 100; /* watchlist pane in push/docked mode */
--z-detail-scrollbar: 120; /* custom detail-pane scrollbar (desktop) */
--z-return-control: 180; /* "Back to …" selection return, lineage sticky */
--z-preferences: 200;
--z-sticky-collapsed: 210; /* collapsed hero/tab bars */
--z-hero: 220;
--z-page-tooltip: 240; /* lineage info tooltip */
--z-nav-dropdown: 260;
--z-page-drawer: 270; /* lineage filter panel / detail */
--z-filter-dropdown: 400; /* archive filter dropdown panel (desktop) */
--z-float-dock: 480; /* home about float */
--z-header: 500; /* [mirror] */
--z-nav-backdrop: 610;
--z-nav-drawer: 620;
--z-side-panel: 650; /* vault-room detail panel */
--z-nav-toggle: 650; /* nav toggle while drawer open — same value as side panel */
--z-updates-backdrop: 670;
--z-updates-panel: 680;
--z-share-toast-page: 710; /* .wrestler-share-toast (base rule) */
--z-dropdown: 1000; /* [mirror] */
--z-map-modal: 1000; /* Tokyo venue map modal — shares the dropdown tier */
--z-map-modal-host: 1100; /* venues shell while map modal open */
--z-overlay: 1150; /* [mirror] */
--z-drawer: 1160; /* [mirror] voice mobile modal */
--z-share-toast: 1200; /* .wrestler-share-toast (later rule) */
--z-modal: 2000; /* [mirror] timeline photo lightbox */
/* 6c. Shared archive overlay stack (Wrestlers / Venues / Masks / Timeline / Voices) */
--z-detail-modal-backdrop: 4999;
--z-detail-modal: 5000; /* tablet detail modal */
--z-orientation-guard: 5000;
--z-detail-modal-controls: 5010; /* close / share / scrollbar inside modal */
--z-modal-elevated: 6000; /* vault-room lightbox + report modal */
--z-tooltip: 9999;
--z-voices-modal-backdrop: 10000; /* voices shell while modal open */
--z-voices-modal: 10001;
--z-detail-modal-top: 10010; /* compatibility bridge level (see archive-drawer-ui.css) */
--z-card-proxy: 10020; /* card→modal photo hand-off proxy, pager */
--z-filter-backdrop: 12000;
--z-loading-indicator: 12000; /* archive-loading line inside the header */
--z-filter-sheet: 12010;
--z-filter-layer: 12020;
--z-profile-sheet: 13000; /* overridden by --z-archive-drawer on the same element */
--z-archive-drawer: 65000; /* mobile profile sheet / archive drawer (effective) */
--z-toast: 80000; /* watchlist notice */
--z-toast-drag: 80001; /* watchlist row being dragged */
/* 6d. Vault page stack (vault-streaming.css / vault-watchlist.css) */
--z-vault-mobile-toolbar: 19000;
--z-vault-header: 20000;
--z-vault-watchlist-backdrop: 40000;
--z-vault-watchlist: 40001;
--z-vault-hero: 50000;
--z-vault-hero-controls: 50010;
--z-vault-filter-sheet: 50020;
--z-vault-header-raised: 60000; /* header while nav/filter open; share overlay */
--z-vault-share-toast: 60010;
/* ------------------------------------------------------------------------
7. Drawer geometry (shared by archive-drawer-ui.css + archive-profile-sheet.css)
archive-drawer-ui.css should alias its --archive-drawer-* names to these.
------------------------------------------------------------------------ */
--drawer-gutter: 22px; /* was 15px; 22px lets ~10px of the next profile card peek (Nov 2026 UX audit) */
--drawer-top-gap: max(10px, env(safe-area-inset-top, 0px));
--drawer-handle-width: 80px;
--drawer-handle-height: 48px;
--drawer-pill-width: 42px;
--drawer-pill-height: 4px;
--drawer-content-padding: 20px;
--drawer-control-inset: 12px;
--drawer-control-size: 40px;
--drawer-card-gap: 12px; /* read by archive-profile-sheet.js via parseFloat — keep px */
--drawer-pill-color: var(--color-stone-500);
/* ------------------------------------------------------------------------
8. Breakpoints — reference only (custom properties cannot be used in
@media). Canonical set shared with script.js matchMedia queries:
phone ≤ 560px | sheet ≤ 768px | compact ≤ 1120px | desktop ≥ 1121px
watchlist dock ≥ 1180px
Legacy one-offs to retire: 480 600 640 700 760 820 900 1024.
------------------------------------------------------------------------ */
}