/* Design System Tokens — メログラフィ / Phase 2 設計より自動生成 */ /* * 7 token groups × 計 70 tokens * 1. color (20) * 2. type (15) * 3. space (8) * 4. shadow (11) ※ shadow + gradient * 5. radius (6) * 6. motion (11) * 7. z (6) */ :root { /* === color === */ --ds-color-gold: #F5D061; /* 既存 --gold。25箇所以上の基幹色 */ --ds-color-gold-aged: #C8A24A; /* 沈んだ金。印章/seal/古い銘板 8箇所 */ --ds-color-accent-arcane: #7C3AED; /* 魔導purple。42箇所 */ --ds-color-accent-cyan: #06B6D4; /* HUD/cyber-cyan 35箇所 */ --ds-color-accent-pink: #F472B6; /* 召喚pink 28箇所 */ --ds-color-danger: #ff5b6d; --ds-color-bg: #07080F; --ds-color-bg-deep: #03040A; --ds-color-panel: #0E1020; --ds-color-panel-2: #131634; --ds-color-border: #1E2240; --ds-color-border-strong: #2A2F5C; --ds-color-text: #E2E8F0; --ds-color-text-muted: #94A3B8; --ds-color-text-faint: #64748B; --ds-color-paper: #E7D9BA; --ds-color-parchment: #DAC59C; --ds-color-ink: #15111A; --ds-color-seal: #B65555; --ds-color-arcane: #6E4BC4; /* --arcane。落ち着いた魔導purple */ /* === type === */ --ds-font-jp: 'Shippori Mincho B1','Shippori Mincho','Hiragino Mincho ProN',serif; --ds-font-label: 'Cormorant SC','Cinzel',serif; /* 魔導書ポップの肝 */ --ds-font-num: 'Cinzel','Cormorant Garamond',serif; --ds-font-logo: 'Orbitron','Zen Kaku Gothic New',sans-serif; --ds-font-ui: 'Zen Kaku Gothic New',sans-serif; --ds-font-size-label: 11px; --ds-font-size-sm: 13px; --ds-font-size-body: 15px; --ds-font-size-button: 18px; --ds-font-size-h2: 22px; --ds-font-size-h1: 32px; --ds-letter-spacing-tight: 0.04em; --ds-letter-spacing-normal: 0.06em; --ds-letter-spacing-wide: 0.18em; --ds-letter-spacing-display: 0.32em; /* === space === */ --ds-space-xxs: 2px; --ds-space-xs: 4px; --ds-space-sm: 8px; --ds-space-md: 16px; --ds-space-lg: 24px; --ds-space-xl: 32px; --ds-space-xxl: 48px; --ds-gap-cards: 28px; /* === shadow (shadow + gradient) === */ --ds-shadow-glow-arcane: 0 0 32px rgba(124,58,237,.45); --ds-shadow-glow-cyan: 0 0 32px rgba(6,182,212,.40); --ds-shadow-glow-pink: 0 0 32px rgba(244,114,182,.40); --ds-shadow-glow-gold: 0 0 24px rgba(245,208,97,.35); --ds-shadow-soft: 0 4px 16px rgba(0,0,0,.35); --ds-shadow-mid: 0 8px 24px rgba(0,0,0,.45); --ds-shadow-strong: 0 12px 32px rgba(0,0,0,.6); --ds-shadow-inset-paper: inset 0 2px 8px rgba(0,0,0,.25); --ds-gradient-magic: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%); --ds-gradient-summon: linear-gradient(135deg, #F472B6 0%, #7C3AED 100%); --ds-gradient-gold-bar: linear-gradient(90deg, transparent, var(--ds-color-gold), transparent); /* === radius === */ --ds-radius-xs: 2px; --ds-radius-sm: 4px; --ds-radius-md: 8px; --ds-radius-lg: 16px; --ds-radius-pill: 999px; --ds-radius-circle: 50%; /* === motion === */ --ds-motion-fast: 0.2s; --ds-motion-normal: 0.5s; --ds-motion-slow: 1.2s; --ds-motion-cinematic: 3s; --ds-easing-out: cubic-bezier(0.16, 1, 0.3, 1); --ds-easing-cubic: cubic-bezier(.2,.7,.3,1); --ds-easing-bounce: cubic-bezier(.68,-.55,.27,1.55); --ds-tw-speed: 45ms; --ds-spin-slow: 30s; --ds-spin-fast: 12s; --ds-spin-rev: 18s; /* === z === */ --ds-z-base: 1; --ds-z-hud: 50; --ds-z-overlay: 100; --ds-z-modal: 300; --ds-z-toast: 500; --ds-z-debug: 999999; /* === grimoire-pop tokens (master 改善吸収: 墨×金グレーズ 統一トーン) === */ /* RGB 形式 (rgba() 合成用) */ --ds-color-gold-rgb: 245, 208, 97; --ds-color-gold-aged-rgb: 200, 162, 74; --ds-color-seal-rgb: 182, 85, 85; /* グリモア基底ボタン (墨×薄い金グレーズ) */ --ds-color-grimoire-bg-top: rgba(245, 208, 97, 0.06); --ds-color-grimoire-bg-bottom: rgba(7, 8, 15, 0.55); --ds-gradient-button-base: linear-gradient(180deg, var(--ds-color-grimoire-bg-top) 0%, var(--ds-color-grimoire-bg-bottom) 100%); --ds-border-button-fine: 1px solid rgba(200, 162, 74, 0.32); --ds-border-button-fine-color: rgba(200, 162, 74, 0.32); /* 金箔押印 primary (放射状ハイライト + 金グラデ) */ --ds-color-grimoire-primary-ink: #3A1E02; --ds-color-grimoire-primary-edge: #C8A24A; --ds-color-grimoire-primary-top: #F5D061; --ds-color-grimoire-primary-mid: #D9A93F; --ds-color-grimoire-primary-bottom: #B07C2E; --ds-gradient-button-primary: radial-gradient(ellipse 80% 60% at 32% 24%, rgba(255, 235, 180, 0.55) 0%, transparent 60%), linear-gradient(180deg, var(--ds-color-grimoire-primary-top) 0%, var(--ds-color-grimoire-primary-mid) 45%, var(--ds-color-grimoire-primary-bottom) 100%); --ds-shadow-button-primary: 0 6px 18px rgba(176, 124, 46, 0.45), 0 0 28px rgba(245, 208, 97, 0.18); --ds-shadow-button-primary-inset: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(140, 90, 30, 0.4); --ds-shadow-button-primary-hover: 0 10px 26px rgba(176, 124, 46, 0.55), 0 0 40px rgba(245, 208, 97, 0.32); /* 羊皮紙ghost */ --ds-color-ghost-border: rgba(245, 239, 222, 0.18); --ds-color-ghost-border-hover: rgba(245, 208, 97, 0.5); --ds-color-ghost-bg-hover: rgba(245, 208, 97, 0.04); /* 暖色テキスト */ --ds-color-text-warm: #F4ECDF; --ds-color-text-soft: #C8BEA9; /* 封蝋 wax-large */ --ds-color-wax-hi: #d97a72; --ds-color-wax-lo: #8c3a3a; --ds-color-wax-edge: rgba(120, 30, 30, 0.6); --ds-gradient-wax-large: radial-gradient(circle at 38% 32%, var(--ds-color-wax-hi) 0%, var(--ds-color-seal) 44%, var(--ds-color-wax-lo) 100%); --ds-shadow-wax-large-inset: inset 0 2px 4px rgba(255, 255, 255, 0.35), inset 0 -6px 12px rgba(0, 0, 0, 0.4); --ds-color-wax-label-fg: rgba(255, 232, 228, 0.82); --ds-color-wax-name-fg: #fff5f2; /* REC / STOP 円形ボタン */ --ds-gradient-button-record: linear-gradient(180deg, #8B6230 0%, #4A2810 100%); --ds-gradient-button-stop: linear-gradient(180deg, #A03828 0%, #5A1A12 100%); --ds-color-button-record-edge: rgba(200, 162, 74, 0.8); --ds-color-button-stop-edge: rgba(220, 140, 80, 0.9); --ds-color-button-record-fg: #F0E5C5; --ds-shadow-button-record: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 22px rgba(245, 208, 97, 0.35), inset 0 1px 2px rgba(245, 208, 97, 0.35), inset 0 -3px 8px rgba(20, 10, 0, 0.6); --ds-shadow-button-stop: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 22px rgba(220, 80, 60, 0.55), inset 0 1px 2px rgba(245, 208, 97, 0.3), inset 0 -3px 8px rgba(40, 10, 0, 0.6); /* SIZE トグル (S/M/L) */ --ds-color-size-toggle-bg: rgba(245, 229, 197, 0.45); --ds-color-size-toggle-border: rgba(110, 78, 28, 0.5); --ds-color-size-toggle-fg: #3a1e02; --ds-gradient-size-toggle-selected: linear-gradient(180deg, rgba(245, 208, 97, 0.45) 0%, rgba(176, 124, 46, 0.5) 100%); --ds-color-size-toggle-selected-edge: #6e4e1c; /* paper-bg カード (grimoire_page) */ --ds-image-grimoire-page: url("final_images/game_assets/ui/grimoire_page_t.webp"); --ds-shadow-paper-drop: drop-shadow(0 14px 36px rgba(0, 0, 0, 0.55)); /* callout (mic-callout) */ --ds-color-callout-bg-top: rgba(245, 208, 97, 0.06); --ds-color-callout-bg-bottom: rgba(245, 208, 97, 0.02); --ds-gradient-callout-base: linear-gradient(180deg, var(--ds-color-callout-bg-top), var(--ds-color-callout-bg-bottom)); --ds-color-callout-advice-border: rgba(245, 208, 97, 0.4); --ds-color-callout-advice-fg: #F5D061; --ds-gradient-callout-advice: linear-gradient(180deg, rgba(245, 208, 97, 0.10), rgba(245, 208, 97, 0.03)); /* action-bar (result-actionbar) */ --ds-color-action-link-underline: rgba(148, 163, 184, 0.45); --ds-color-action-share-border: rgba(244, 114, 182, 0.55); /* dashed ghost (skip / 配線) */ --ds-color-gold-soft: rgba(245, 208, 97, 0.5); --ds-color-ghost-dashed-fg: rgba(245, 208, 97, 0.6); --ds-color-ghost-dashed-fg-hover: rgba(245, 208, 97, 0.85); /* ============================================================ * Phase 2 追加トークン — primitives/composites で var(--ds-*, fallback) で * 参照されていたが tokens.css に未定義だったもの。 * ============================================================ */ /* --- semantic color: テキスト --- */ --ds-color-text-on-dark: var(--ds-color-paper); --ds-color-on-gold: var(--ds-color-ink); --ds-color-on-danger: var(--ds-color-paper); --ds-color-on-wax: var(--ds-color-paper); --ds-color-link: var(--ds-color-gold); --ds-color-focus: var(--ds-color-gold); --ds-color-overlay: rgba(0,0,0,0.6); /* --- semantic color: badge --- */ --ds-color-badge-dark-bg: var(--ds-color-panel); --ds-color-badge-dark-border: var(--ds-color-border); --ds-color-badge-dark-fg: var(--ds-color-text-on-dark); /* --- semantic color: chip --- */ --ds-color-chip-bg: transparent; --ds-color-chip-border: var(--ds-color-gold-soft); --ds-color-chip-fg: var(--ds-color-text-on-dark); --ds-color-chip-selected-bg: var(--ds-color-gold); --ds-color-chip-selected-fg: var(--ds-color-ink); /* --- semantic color: pill --- */ --ds-color-pill-bg: transparent; --ds-color-pill-border: var(--ds-color-gold-soft); --ds-color-pill-fg: var(--ds-color-text-on-dark); --ds-color-pill-hover-bg: rgba(0,0,0,0); --ds-color-pill-selected-bg: var(--ds-color-gold); --ds-color-pill-selected-fg: var(--ds-color-ink); /* --- semantic color: input --- */ --ds-color-input-bg: var(--ds-color-panel); --ds-color-input-border: var(--ds-color-border); /* --- semantic color: danger --- */ --ds-color-danger-bg: var(--ds-color-danger); --ds-color-danger-border: var(--ds-color-danger); /* --- semantic color: share --- */ --ds-color-share-bg: var(--ds-color-panel); --ds-color-share-border: var(--ds-color-border); --ds-color-share-fg: var(--ds-color-text-on-dark); /* --- semantic color: progress / spinner --- */ --ds-color-progress-track: var(--ds-color-panel); --ds-color-progress-border: var(--ds-color-border); --ds-color-spinner-track: var(--ds-color-border); --ds-spinner-color: var(--ds-color-gold); /* --- semantic color: paper --- */ --ds-color-paper-border: transparent; --ds-color-paper-edge: var(--ds-color-gold-soft); --ds-color-paper-highlight: transparent; /* --- semantic color: gold / gradient stops --- */ --ds-color-gold-border: var(--ds-color-gold); --ds-color-gold-1: #D9A93F; --ds-color-gold-2: #B07C2E; /* --- semantic color: magic / summon gradient stops --- */ --ds-color-magic-1: #7C3AED; --ds-color-magic-2: #06B6D4; --ds-color-summon-2: #7C3AED; /* --- composites 追加 color --- */ --ds-color-gold-dim: rgba(201,168,90,.5); --ds-color-ink-dark: #2a1f12; --ds-color-ink-dim: rgba(244,236,216,.7); --ds-color-rose: #d97a7a; --ds-color-silver: #d8d4cc; /* --- override hooks (component inline override 用デフォルト) --- */ --ds-card-hue: var(--ds-color-border); --ds-progress-h: 8px; --ds-wax-size: 28px; --ds-rune-bracket-size: 14px; /* --- type 追加 --- */ --ds-font-body: system-ui, sans-serif; --ds-font-display: 'Cormorant SC', 'Noto Serif JP', serif; --ds-font-md: 1.05rem; --ds-font-sm: .9rem; --ds-font-xs: .75rem; --ds-font-xxl: 2rem; /* --- space 追加 (numeric alias) --- */ --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-8: 32px; --ds-container-md: 960px; /* --- shadow 追加 --- */ --ds-shadow-gold: 0 4px 14px rgba(0,0,0,0.3); --ds-shadow-modal: 0 24px 60px rgba(0,0,0,0.6); --ds-shadow-plate: 0 4px 12px rgba(0,0,0,0.35); --ds-shadow-script: var(--ds-shadow-inset-paper); --ds-shadow-scroll: var(--ds-shadow-inset-paper); --ds-shadow-selected: 0 0 0 2px var(--ds-color-gold-soft); --ds-shadow-summon-card: 0 10px 24px rgba(0,0,0,0.5); --ds-shadow-wax: 0 2px 4px rgba(0,0,0,0.4); /* --- gradient 追加 --- */ --ds-gradient-gold: linear-gradient(135deg, var(--ds-color-gold-1), var(--ds-color-gold-2)); --ds-gradient-plate: linear-gradient(180deg, var(--ds-color-gold-1), var(--ds-color-gold-2)); --ds-gradient-summon-card: linear-gradient(160deg, var(--ds-color-panel), var(--ds-color-summon-2)); --ds-gradient-wax: radial-gradient(circle at 30% 30%, var(--ds-color-wax-hi), var(--ds-color-wax-lo)); /* --- motion 追加 --- */ --ds-motion-base: 240ms; --ds-motion-spin: 0.9s; --ds-drift: 0px; } /* prefers-reduced-motion: モーション系を一括で抑制 */ @media (prefers-reduced-motion: reduce) { :root { --ds-motion-fast: 0.01s; --ds-motion-normal: 0.01s; --ds-motion-slow: 0.01s; --ds-motion-cinematic: 0.01s; --ds-tw-speed: 0s; --ds-spin-slow: 0s; --ds-spin-fast: 0s; --ds-spin-rev: 0s; } } /* * NOTE: このファイルは tokens 専用。 * primitives (button/card/badge 等) や composites (modal/HUD 等) の class 定義は別ファイルに置く。 */