/* shared/variables.css — Single source of truth for SHIROFES OS design tokens. Imported by shared/styles.css and standalone pages (mc.html, live.html). Keep this file lean: only CSS custom properties, no component styles. */ :root { /* ── Brand ─────────────────────────────────────────────────────── */ --shirofes-red: #E50012; --shirofes-red-dark: #CC0010; --shirofes-red-on-dark: #FF3344; /* v135.264 WCAG — small-text variant. #E50012 on #0c0c1a is 4.00:1 (fails AA 4.5:1 normal text); #FF3344 on #0c0c1a is 5.36:1 (passes AA). Use for any red text below 18pt / 14pt-bold. */ --shirofes-black: #0c0c1a; --shirofes-black-alt: #1a1a32; --shirofes-white: #FFFFFF; /* ── Text ──────────────────────────────────────────────────────── */ --text-primary: #FFFFFF; --text-secondary: #b8b8d0; --text-tertiary: #8888a8; --text-accent: #d0d0e8; /* ── Surfaces & borders ────────────────────────────────────────── */ --border-color: #2a2a4a; --border: var(--border-color); --bg-primary: var(--shirofes-black-alt); --bg-secondary: rgba(255,255,255,0.06); /* ── Semantic ──────────────────────────────────────────────────── */ --success: #22C55E; --warning: #F59E0B; --error: #EF4444; --info: #3B82F6; /* ── Genre chip palette (v111) ───────────────────────────────────── Used by dj.html and anywhere we want to tag a participant / matchup with its dance style. Keep colors distinct and readable against the dark cards (--shirofes-black / --shirofes-black-alt). Eight first-class chips cover the current entry-form options (HIPHOP / POPPIN' / LOCKIN' / WAACKIN' / HOUSE / BREAKIN' / FREESTYLE) + Kids. --genre-unknown styles その他 write-ins (Krump, Voguing, etc.) as a neutral gray chip showing the raw submitted text. allstyle / djchoice are reserved — not currently rendered per v111 "no meta chips" rule. */ --genre-poppin: #A78BFA; /* violet */ --genre-hiphop: #F59E0B; /* amber */ --genre-house: #60A5FA; /* sky */ --genre-lockin: #FBBF24; /* gold */ --genre-waackin: #F472B6; /* pink */ --genre-breakin: #34D399; /* emerald */ --genre-freestyle: #CBD5E1; /* slate — flexible / any */ --genre-kids: #86EFAC; /* lime */ --genre-allstyle: var(--shirofes-red); --genre-djchoice: var(--shirofes-red); --genre-unknown: var(--text-tertiary); /* ── Spacing & shape ──────────────────────────────────────────── */ --radius-sm: 4px; /* controls, cards, backstage surfaces */ --radius-md: 8px; /* public-facing cards, matchup buttons */ --radius-lg: 16px; /* kiosk scanner viewport, result cards */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.15); --shadow-md: 0 4px 16px rgba(0,0,0,0.25); --shadow-lg: 0 8px 32px rgba(0,0,0,0.3); --transition-fast: 0.15s; --transition-normal: 0.25s; /* ── Typography ──────────────────────────────────────────────────── v113: unified to M PLUS 1p (M+ Fonts project, SIL OFL). Japanese and Latin glyphs from the same family — no more kerning/rhythm mismatch. Swapped from Zen Kaku Gothic New in v113 because Zen Kaku's 900 read too light on stage + bracket surfaces (humanist terminals, open counters). M PLUS 1p 900 has denser strokes and a squarer geometry that reads punchier at distance while keeping unified CJK + Latin baselines. Weight hierarchy (use `font-weight` on the element, not a new family): 300 Light — long-form running copy, de-emphasized captions 400 Regular — default body text, form inputs 500 Medium — subheadings, table headers, chip labels 700 Bold — emphasis in body, active-state controls, nav 900 Black — stage displays, bracket names, big numbers, titles, anything read from a distance Rule of thumb: backstage UI = 400/500/700. Public-facing display surfaces (stage.html, live.html, bracket exports, landing hero) = 700/900. Noto Sans JP kept as secondary fallback while fonts load — the two families have very similar metrics, so FOUT is minimal. Decorative exceptions (e.g. Yuji Boku on landing tagline) stay as per-component overrides, not tokens. */ --font-body: 'M PLUS 1p', 'Noto Sans JP', sans-serif; --font-display: 'M PLUS 1p', 'Noto Sans JP', sans-serif; /* ── Z-index scale (single source of truth) ─────────────────────── Every floating / sticky / overlay element must use one of these. Hardcoded z-index values are a code smell — they create stacking-context wars (see styles.css line ~48 history). Layer rules: - --z-base 0–9 in-flow content, never stacks - --z-subnav 10 in-page filter bars (e.g. day-filter) - --z-header 100 top app header (sticky, page-level) - --z-nav 110 tab bar / sidebar (sticky, sits under header) - --z-banner 200 inline status banners (success/error) - --z-toast 300 transient notifications (top-of-page) - --z-modal 400 dialogs that capture interaction - --z-overlay 500 fullscreen blockers (PIN gate, splash) Anything that needs to escape a parent stacking context must mount on document.body, NOT inside .content. */ --z-base: 1; --z-subnav: 10; --z-header: 100; --z-nav: 110; --z-picker: 105; /* v134.17 — admin event picker bar, between nav and banner */ --z-banner: 200; --z-toast: 300; --z-modal: 400; --z-overlay: 500; /* ── Sticky header heights (v134.17) ─────────────────────────────── Shared heights so every sticky bar can stack cleanly via calc(). Pre-v134.17 these were hardcoded (`top: 60px`, `top: 48px`, etc.), which desynced on mobile (header drops to 52px) and when the admin event picker bar was added. Now: all sticky elements read from these vars, and the mobile media query below updates them in one place. */ --admin-header-h: 60px; /* .app-header */ --admin-nav-h: 40px; /* .admin-nav / .nav-tabs */ --admin-picker-h: 48px; /* #adminEventPickerBar (events-only) */ } @media (max-width: 480px) { :root { --admin-header-h: 52px; /* smaller header on mobile */ --admin-nav-h: 40px; --admin-picker-h: 48px; } } /* ── Motifs (base64 data URIs) ─────────────────────────────────── */ /* sayagata and kasumi patterns are defined in shared/styles.css because they contain large data URIs. Pages that import only variables.css and need patterns should add their own. */