/** * IDOL TOKYO NEO * Design System Variables (Figma Design Tokens & 8px Grid) * World View: Crystal Clear Sky Blue, Luminous Wings & Neo Stage */ :root { /* ---------------------------------------------------------------------- 1. COLOR TOKENS (Light World: クリスタルホワイト & ディープクリスタルネイビー) ---------------------------------------------------------------------- */ --bg-base: #FFFFFF; /* ピュアホワイト */ --bg-surface: #F8FAFC; /* 極薄いブルーグレー（カード背景等） */ --bg-surface-elevated: #F1F5F9; /* ホバー時・モーダル背景 */ --bg-ice-100: #E0F2FE; /* アイスブルー（淡） */ --bg-ice-200: #BAE6FD; /* アイスブルー（明） */ --bg-ice-300: #7DD3FC; /* スカイアクア（爽快） */ --bg-glass-white: rgba(255, 255, 255, 0.65); /* 半透明グラスモーフィズム背景 */ --bg-glass-card: rgba(255, 255, 255, 0.85); /* カード用すりガラス */ --bg-glass-cyan: rgba(224, 242, 254, 0.7); /* 水色すりガラス */ /* メインタイポグラフィカラー (#043156 基軸・高視認性＆高級感) */ --text-main: #043156; /* ディープクリスタルネイビー（メイン文字色） */ --text-navy: #064070; /* 濃藍ネイビー（見出し・サブヘッダー用） */ --text-muted: #537593; /* スレートブルーグレー（サブテキスト・補足情報用） */ --text-ice: #E0F2FE; /* ダーク空間用アイステキスト */ --text-link-hover: #0284C7; /* ホバー時リンク用（爽快なスカイブルー） */ /* Accent & Brand Colors */ --accent-main: #0284C7; /* ブランドアクアブルー */ --accent-bg: #FFFFFF; /* ボタンなどの背景用（白） */ --accent-text: #043156; /* ボタンなどの文字色 */ --accent-main-rgb: 2, 132, 199; /* RGB値 (アニメーション・透過用) */ --accent-main-light: rgba(2, 132, 199, 0.08); --accent-main-watermark: rgba(4, 49, 86, 0.04); /* Neo Idol Sky Color Tokens (シャニマス風・爽快透明感) */ --accent-ice: #A5F3FC; /* クリスタルアイスブルー */ --accent-ice-rgb: 165, 243, 252; /* アイスブルーRGB */ --accent-ice-light: rgba(165, 243, 252, 0.25); --accent-ice-glow: rgba(56, 189, 248, 0.45); --accent-cyan: #38BDF8; /* スカイシアン */ --accent-cyan-deep: #0284C7; /* ディープシアン */ /* 白みと透明感を高めたシアー・クリスタルグラデーション定義 */ --grad-btn-primary: linear-gradient(135deg, #C7ECFE 0%, #EBF6FE 45%, #FDEBED 100%); --grad-btn-primary-hover: linear-gradient(135deg, #A8E1FD 0%, #CBEBFE 45%, #FEDCE0 100%); --grad-btn-sky: linear-gradient(135deg, rgba(235, 246, 254, 0.96) 0%, rgba(254, 245, 246, 0.94) 100%); --grad-btn-sky-hover: linear-gradient(135deg, #BAE6FD 0%, #7DD3FC 100%); --grad-badge-live: linear-gradient(135deg, #C7ECFE 0%, #FDEBED 100%); --accent-pink: #FF4B82; /* タイマー・重要強調用ネオンピンク */ --accent-pink-rgb: 255, 75, 130; /* ネオンピンクRGB */ --accent-pink-light: rgba(255, 75, 130, 0.15); --accent-pink-glow: rgba(255, 75, 130, 0.4); --accent-gold: #FEF08A; /* プレミアムゴールド */ --accent-gold-rgb: 254, 240, 138; --accent-gold-light: rgba(254, 240, 138, 0.2); /* ---------------------------------------------------------------------- 2. DARK SECTION ACCENT OVERRIDES (ディープネイビー ライブステージ空間用) ---------------------------------------------------------------------- */ --dark-bg-start: #0C192C; /* ライブ空間グラデーション始点（ディープミッドナイト） */ --dark-bg-end: #132238; /* ライブ空間グラデーション終点（ディープネイビー） */ --dark-surface: rgba(255, 255, 255, 0.06); /* ライブ空間グラスモーフィズム */ --dark-surface-elevated: rgba(255, 255, 255, 0.1); --dark-accent: #A5F3FC; /* ダーク背景用のアイスブルーアクセント */ --dark-accent-text: #043156; /* ダーク背景用アクセント上の文字色 */ --dark-accent-light: rgba(165, 243, 252, 0.15); --dark-border: rgba(165, 243, 252, 0.25); /* ネオン風ボーダー */ /* Live Stage Spotlight & Light Effects */ --spotlight-white-rgb: 255, 255, 255; /* 純白スポットライト */ --spotlight-aqua-rgb: 125, 211, 252; /* アクアブルースポットライト (#7DD3FC) */ --spotlight-pink-rgb: 255, 75, 130; /* ネオンピンクスポットライト (#FF4B82) */ --spotlight-rgb: 125, 211, 252; /* デフォルト照射RGB */ /* Warning & Utility Colors */ --accent-red: #FF4B82; --accent-red-light: rgba(255, 75, 130, 0.15); --border-thin: #E2E8F0; /* 1px境界線 */ --border-accent: rgba(2, 132, 199, 0.2); /* アクセントボーダー */ --border-ice: rgba(165, 243, 252, 0.4); /* アイスネオンボーダー */ --border-glass: rgba(255, 255, 255, 0.8);/* グラス境界線 */ --star-color: #E0F2FE; /* 星・パーティクルの色 */ --star-glow: rgba(165, 243, 252, 0.5); /* ---------------------------------------------------------------------- 3. TYPOGRAPHY (Jost & Native High-Quality Japanese Fonts) ---------------------------------------------------------------------- */ --font-en: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-num: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-jp: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'Noto Sans JP', Meiryo, sans-serif; --font-mincho: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', '游明朝', 'Noto Serif JP', serif; /* ---------------------------------------------------------------------- 4. SPACING (Strict 8px Grid - No Decimals) ---------------------------------------------------------------------- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-80: 80px; --space-96: 96px; --space-120: 120px; /* ---------------------------------------------------------------------- 5. RADIUS & LAYOUT (1600px / 768px / 390px 準拠) ---------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px; --radius-none: 0px; --container-max: 1200px; --header-height: 80px; /* ---------------------------------------------------------------------- 6. ANIMATION & SHADOWS & Z-INDEX ---------------------------------------------------------------------- */ --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); --shadow-card: 0 10px 30px rgba(4, 49, 86, 0.06); --shadow-hover: 0 16px 36px rgba(2, 132, 199, 0.15); --shadow-elevated: 0 20px 44px rgba(4, 49, 86, 0.12); --shadow-neon-ice: 0 0 20px rgba(56, 189, 248, 0.35); --shadow-btn-grad: 0 4px 16px rgba(56, 189, 248, 0.25); --shadow-neon-pink: 0 0 20px rgba(255, 75, 130, 0.4); --z-header: 100; --z-floating: 90; --z-modal: 1000; }