/* 共有トークン — tokens.css 定義したものは必ず参照する。未使用定義は置かない。 ブランド色・フォントは各 HTML の @theme（TW ユーティリティ用）と同値に保つこと。 paper / tiffany の alpha は段階セット（欠番も残す）。未使用フォントトークンは置かない。 例外: tour は航路シェル用に --font-display / --font-mono / --font-sans をページ側で上書き可。 CSS からは var(--color-*) / var(--font-*) / var(--arcade-*) / var(--paper-a*) / var(--tiffany-a*) を参照。 スペーシングは Tailwind ユーティリティを正とし、未使用の spacing トークンは置かない。 */ :root { /* brand — sync with @theme in index / arcade / 404 / tour --color-danger はフォームエラー等の CSS 専用（TW @theme には載せない） */ --color-ink: #05070a; --color-paper: #e9e6dc; --color-grey: #C8C5BC; --color-yellow: #F4C531; --color-tiffany: #28B6BE; --color-purple: #6A3FBA; --color-neon: #C5F23A; --color-surface: #0a0e12; --color-tiffany-bright: #7ee8ef; --color-danger: #ff8f8f; /* GET TICKET 共通グラデ（neon 基調・左が沈み／右が明るめ） */ --grad-ticket-cta: linear-gradient( 135deg, color-mix(in srgb, var(--color-neon) 78%, var(--color-ink)) 0%, var(--color-neon) 52%, color-mix(in srgb, var(--color-neon) 72%, var(--color-paper)) 100% ); --grad-ticket-cta-hover: linear-gradient( 135deg, color-mix(in srgb, var(--color-paper) 82%, var(--color-ink)) 0%, color-mix(in srgb, var(--color-paper) 88%, var(--color-neon)) 45%, var(--color-paper) 100% ); /* FLOWING GRADIENT TYPE（無料バッジ / happylow キャプション） */ --grad-flow-type: linear-gradient( 90deg, var(--color-tiffany), var(--color-purple), var(--color-yellow), var(--color-tiffany) ); /* paper alpha — color-mix from --color-paper */ --paper-a02: color-mix(in srgb, var(--color-paper) 2%, transparent); --paper-a03: color-mix(in srgb, var(--color-paper) 3%, transparent); --paper-a04: color-mix(in srgb, var(--color-paper) 4%, transparent); --paper-a05: color-mix(in srgb, var(--color-paper) 5%, transparent); --paper-a06: color-mix(in srgb, var(--color-paper) 6%, transparent); --paper-a09: color-mix(in srgb, var(--color-paper) 9%, transparent); --paper-a10: color-mix(in srgb, var(--color-paper) 10%, transparent); --paper-a12: color-mix(in srgb, var(--color-paper) 12%, transparent); --paper-a14: color-mix(in srgb, var(--color-paper) 14%, transparent); --paper-a15: color-mix(in srgb, var(--color-paper) 15%, transparent); --paper-a16: color-mix(in srgb, var(--color-paper) 16%, transparent); --paper-a18: color-mix(in srgb, var(--color-paper) 18%, transparent); --paper-a20: color-mix(in srgb, var(--color-paper) 20%, transparent); --paper-a22: color-mix(in srgb, var(--color-paper) 22%, transparent); --paper-a25: color-mix(in srgb, var(--color-paper) 25%, transparent); --paper-a28: color-mix(in srgb, var(--color-paper) 28%, transparent); --paper-a35: color-mix(in srgb, var(--color-paper) 35%, transparent); --paper-a40: color-mix(in srgb, var(--color-paper) 40%, transparent); --paper-a42: color-mix(in srgb, var(--color-paper) 42%, transparent); --paper-a45: color-mix(in srgb, var(--color-paper) 45%, transparent); --paper-a50: color-mix(in srgb, var(--color-paper) 50%, transparent); --paper-a55: color-mix(in srgb, var(--color-paper) 55%, transparent); --paper-a58: color-mix(in srgb, var(--color-paper) 58%, transparent); --paper-a60: color-mix(in srgb, var(--color-paper) 60%, transparent); --paper-a62: color-mix(in srgb, var(--color-paper) 62%, transparent); --paper-a70: color-mix(in srgb, var(--color-paper) 70%, transparent); --paper-a75: color-mix(in srgb, var(--color-paper) 75%, transparent); --paper-a80: color-mix(in srgb, var(--color-paper) 80%, transparent); --paper-a85: color-mix(in srgb, var(--color-paper) 85%, transparent); --paper-a90: color-mix(in srgb, var(--color-paper) 90%, transparent); --paper-a92: color-mix(in srgb, var(--color-paper) 92%, transparent); --paper-a95: color-mix(in srgb, var(--color-paper) 95%, transparent); /* tiffany alpha — color-mix from --color-tiffany */ --tiffany-a04: color-mix(in srgb, var(--color-tiffany) 4%, transparent); --tiffany-a06: color-mix(in srgb, var(--color-tiffany) 6%, transparent); --tiffany-a08: color-mix(in srgb, var(--color-tiffany) 8%, transparent); --tiffany-a10: color-mix(in srgb, var(--color-tiffany) 10%, transparent); --tiffany-a12: color-mix(in srgb, var(--color-tiffany) 12%, transparent); --tiffany-a14: color-mix(in srgb, var(--color-tiffany) 14%, transparent); --tiffany-a15: color-mix(in srgb, var(--color-tiffany) 15%, transparent); --tiffany-a16: color-mix(in srgb, var(--color-tiffany) 16%, transparent); --tiffany-a18: color-mix(in srgb, var(--color-tiffany) 18%, transparent); --tiffany-a20: color-mix(in srgb, var(--color-tiffany) 20%, transparent); --tiffany-a22: color-mix(in srgb, var(--color-tiffany) 22%, transparent); --tiffany-a28: color-mix(in srgb, var(--color-tiffany) 28%, transparent); --tiffany-a32: color-mix(in srgb, var(--color-tiffany) 32%, transparent); --tiffany-a35: color-mix(in srgb, var(--color-tiffany) 35%, transparent); --tiffany-a45: color-mix(in srgb, var(--color-tiffany) 45%, transparent); --tiffany-a50: color-mix(in srgb, var(--color-tiffany) 50%, transparent); --tiffany-a52: color-mix(in srgb, var(--color-tiffany) 52%, transparent); --tiffany-a55: color-mix(in srgb, var(--color-tiffany) 55%, transparent); --tiffany-a60: color-mix(in srgb, var(--color-tiffany) 60%, transparent); --tiffany-a65: color-mix(in srgb, var(--color-tiffany) 65%, transparent); --tiffany-a72: color-mix(in srgb, var(--color-tiffany) 72%, transparent); --tiffany-a75: color-mix(in srgb, var(--color-tiffany) 75%, transparent); --tiffany-a80: color-mix(in srgb, var(--color-tiffany) 80%, transparent); --tiffany-a85: color-mix(in srgb, var(--color-tiffany) 85%, transparent); --tiffany-a88: color-mix(in srgb, var(--color-tiffany) 88%, transparent); --tiffany-a90: color-mix(in srgb, var(--color-tiffany) 90%, transparent); --tiffany-a95: color-mix(in srgb, var(--color-tiffany) 95%, transparent); /* arcade UI（meteor / takibi / leaderboard / shell 共通） */ --arcade-bg: #0d1024; --arcade-panel: #14172e; --arcade-line: #2a2f52; --arcade-muted: #8a90b8; --arcade-text: #e8eaf6; --arcade-accent: #5dcaa5; --arcade-accent-bg: #0f6e56; --arcade-accent-fg: #e1f5ee; --arcade-takibi: #FF5A1F; --arcade-takibi-ink: #0B0B0D; --arcade-takibi-grey: #F2F4F6; /* fonts — sync with @theme（コア3は全ページ共通） Latin 専用ファミリーの後に var(--font-sans) を置き、日本語は常に M PLUS 1 へフォールバック */ --font-sans: "M PLUS 1", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; --font-sans-jp: "M PLUS 1", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; --font-display: "Anton", var(--font-sans); --font-mono: "Space Mono", ui-monospace, var(--font-sans); --font-oxanium: Oxanium, var(--font-sans); --font-poppins: Poppins, var(--font-sans); --font-script: Pacifico, var(--font-sans); --font-jost: Jost, var(--font-sans); --font-raleway: Raleway, var(--font-sans); --font-orbitron: Orbitron, var(--font-sans); --font-audiowide: Audiowide, var(--font-sans); --font-rock-salt: "Rock Salt", var(--font-sans); --font-walter: "Walter Turncoat", var(--font-sans); --font-impact: Impact, Haettenschweiler, "Arial Narrow Bold", var(--font-sans); --font-game-mono: "Courier New", ui-monospace, var(--font-sans); /* layout（sticky nav とアンカー余白を同じ基準で連動） */ --nav-bar-height: 2.875rem; --scroll-margin-nav: calc(var(--nav-bar-height) + 0.5rem); /* typography（CSS で実参照） */ --tracking-label: 0.14em; --text-ui-md: 0.6875rem; --text-ui-sm: 0.625rem; }