/* ============================================================ c90_ModernTheme.css — Modern light-theme overlay (dev only) Loaded LAST in (after every page's own CSS) so equal- specificity rules win by source order. Overrides ONLY visual properties: color / background / border / border-radius / box-shadow / font / transition / outline. NEVER touch layout (display / grid-template / position / width / height / margin / padding) on shared containers — page CSS depends on it. EXCEPTION: Section C2 below is an intentional, dev-only normalization of the #divTop top-bar (one unified height + single-row layout) so the header is consistent across login / dashboard / admin and stops the dashboard Language box wrapping on mobile. Scope: dev.music-manager.jp admin + dashboard + login + analyzer pages. The analyzer page (u46html_analyzer.php) renders inside this same shell (issue #49); its own visuals are minimally themed via cu46_analyzer.css (body.mmp-analyzer scope), not pixel parity with the retired a01-a03 dark design. ============================================================ */ /* ---- A. Tokens — 3-layer graph: Primitive → Semantic → Component ---- Foundation = デジタル庁 (色/型/余白/角丸ラダー/Elevation/a11y); Surface = Apple Liquid Glass (chrome のガラス層); 値はプロトタイプ (ui-prototype.html :root) から原則導出。変数「名」は c91/c92/c93/c96 + 各 page-CSS 互換のため維持(= 実装戦術)、ただし「値」は全面再設計。旧クレイ値(soft-purple accent / off-ladder card radius / rounded-gothic face / overshoot spring ease)は破棄。 */ :root{ /* ============================================================ Primitive — デジタル庁 Blue ramp (真実の源) ============================================================ */ --da-blue-50: #e8f1fe; --da-blue-600: #3460fb; --da-blue-700: #264af4; --da-blue-800: #0031d8; --da-blue-900: #0017c1; --da-blue-1000: #00118f; --da-blue-1100: #000071; /* Primitive — デジタル庁 Gray ramp */ --da-gray-50: #f2f2f2; --da-gray-536: #767676; /* 白上 AA 最薄 */ --da-gray-700: #4d4d4d; --da-gray-800: #333333; --da-gray-900: #1a1a1a; /* ============================================================ Primitive — issue #27 purple/navy re-skin (ADR-0004)。旧デジタル庁 Blue ramp は残置(参照元)、下の Semantic 層をこの値へ張り替える。 ============================================================ */ --mm-primary: #7748EB; /* purple primary (白文字 >=4.5:1) */ --mm-primary-deep: #5A30CF; /* pressed / deep text */ --mm-primary-tint: #EFEAFD; /* selection / hover wash */ --mm-navy: #18004F; /* band / footer anchor */ --mm-func-blue: #2456D6; /* functional blue fill */ --mm-func-blue-deep: #1D47B8; /* functional blue hover / text */ --mm-teal: #0E8074; /* functional teal */ --mm-dark: #3F4147; /* neutral dark fill */ --mm-banner: linear-gradient(100deg,#18004F,#2C0F86,#4A24C4); /* ============================================================ Semantic — accent (issue #27: purple primary + navy chrome) ============================================================ */ --mm-accent: var(--mm-primary); /* #7748EB */ --mm-accent-hover: var(--mm-primary-deep); /* #5A30CF */ --mm-accent-active: #4A24C4; /* deepest press */ --mm-accent-deep: var(--mm-navy); /* admin chrome — navy */ --mm-accent-deep-h: #2C0F86; /* navy band hover */ /* Semantic — surfaces (不透明コンテンツ面はニュートラル) */ --mm-page-bg: #F5F5FA; /* flat page fill */ --mm-page-bg-2: #EFEFF6; /* legacy 2nd stop (flat now) */ --mm-surface: #ffffff; --mm-surface-sunken:#f6f8fc; /* inner panel / sticky head */ --mm-surface-alt: #fafbfe; /* table zebra */ --mm-card-bg: var(--mm-surface); /* card 面 = 不透明白 */ --mm-surface-2: var(--mm-surface-sunken); /* inputs / alt rows */ --mm-surface-hover: var(--mm-primary-tint); /* row hover wash (purple-tinted) */ --mm-border: #E6E6F0; /* hairline */ --mm-border-strong: #D9D9E8; /* hairline-strong */ --mm-divider: rgba(20,30,60,.10); /* hairlines */ --mm-hairline: var(--mm-border); --mm-hairline-strong: var(--mm-border-strong); /* Semantic — text (デジタル庁 Gray) */ --mm-text: #22223A; /* primary text */ --mm-text-soft: #696981; /* secondary UI (AA on white) */ --mm-text-aux: #767676; /* gray-536 — large / aux (AA on white) */ --mm-text-3: var(--mm-text-aux); /* legacy alias */ --mm-gray: #c7ccd9; /* neutral chip fill base */ --mm-cyan: var(--mm-accent); /* legacy alias → accent */ /* derived surface/border aliases (consumed by §N dashboard + meta) */ --mm-tint: var(--mm-primary-tint); /* hover/selection wash */ --mm-input-border: #D9D9E8; /* resting form-field outline */ /* ============================================================ Component — radius (Apple concentric ladder; off-ladder card radius 破棄) ============================================================ */ --mm-radius-sm: 9px; /* inputs / small buttons */ --mm-radius: 12px; /* inner panels */ --mm-radius-lg: 14px; /* cards */ --mm-radius-xl: 24px; /* large containers */ --mm-radius-pill: 9999px; /* chips / toggles / capsules */ --mm-topbar-h: 64px; /* unified #divTop height (Section C2 / 2b fixed topbar) */ --mm-nav-height: 52px; /* legacy nav-row chrome (kept for fallbacks) */ /* Component — BV shell dims (2b fixed sidenav + topbar; プロト準拠) */ --mm-sidenav: 208px; /* fixed sidenav width (desktop) */ --mm-rail: 72px; /* collapsed icon rail (<=1024) */ --mm-content-x: 236px; /* sidenav 208 + 28 gutter — content left inset */ --mm-content-y: 96px; /* topbar 64 + 32 gutter — content top inset */ /* Component — spacing (8px 基底) */ --mm-space-1: 4px; --mm-space-2: 8px; --mm-space-3: 16px; --mm-space-4: 24px; --mm-space-5: 32px; --mm-space-6: 48px; --mm-space-7: 64px; /* ============================================================ Motion — Apple smooth + restrained flex (clay spring 破棄) ============================================================ */ --mm-ease: cubic-bezier(0.16,1,0.3,1); /* smooth, no overshoot */ --mm-ease-smooth: cubic-bezier(0.16,1,0.3,1); --mm-ease-flex: cubic-bezier(0.34,1.12,0.64,1); /* press feedback only */ --mm-dur: 300ms; --mm-dur-fast: 180ms; --mm-transition: var(--mm-dur) var(--mm-ease); /* ============================================================ Elevation — neutral soft drops (NOT clay; no inset specular) ============================================================ */ --mm-elev-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04); --mm-elev-2: 0 2px 8px rgba(24,0,79,.05); --mm-elev-4: 0 8px 24px rgba(15,23,42,.09); --mm-elev-8: 0 18px 48px rgba(15,23,42,.13); /* legacy shadow aliases mapped onto the neutral elevation scale */ --mm-shadow: var(--mm-elev-2); --mm-shadow-hover: var(--mm-elev-4); --mm-shadow-pressed: inset 0 2px 6px rgba(15,23,42,.14); --mm-shadow-sm: var(--mm-elev-1); /* primary button — accent glass: soft drop + faint inner top sheen */ --mm-btn-primary-shadow: var(--mm-elev-2), inset 0 1px 0 rgba(255,255,255,.28); /* ============================================================ Glass — chrome only (Apple 2層: highlight rim + soft drop) ============================================================ */ --mm-glass-bg: rgba(255,255,255,.62); --mm-glass-blur: 12px; --mm-glass-rim: inset 0 1px 0 rgba(255,255,255,.9); /* lensing 近似: 明るい上/左リム + 暗い下/右 */ --mm-glass-lens: inset 0 1px 0 rgba(255,255,255,.92), inset 1px 0 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(20,30,60,.06), inset -1px 0 0 rgba(20,30,60,.05); /* ============================================================ Type families — Noto Sans JP (丸ゴシック廃止) ============================================================ */ --mm-font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; --mm-font-num: "Noto Sans Mono", ui-monospace, monospace; /* type rhythm (Stage A) — applied to text leaves only, never to layout containers, so page-CSS box-model is untouched */ --mm-lh: 1.6; /* comfortable body / card text */ --mm-lh-tight: 1.35; /* dense rows, small screens */ --mm-track: .01em; /* subtle body tracking */ --mm-track-cap: .04em; /* table headers / pills */ /* ============================================================ Semantic — status (デジタル庁 dual-tone)。色は「強調」専用、ステータスは中立面+色文字+アイコンで(色だけに依存しない)。旧 action-hue 名(orange/green/blue/yellow/red/pink)は互換維持。 ============================================================ */ --mm-success: #259d63; --mm-success-strong: #197a4b; --mm-error: #ec0000; --mm-error-strong: #ce0000; --mm-warning: #b78f00; --mm-warning-strong: #927200; --mm-info: var(--mm-accent); --mm-orange: var(--mm-warning); --mm-orange-h: var(--mm-warning-strong); --mm-green: var(--mm-success); --mm-green-h: var(--mm-success-strong); --mm-blue: var(--mm-func-blue); --mm-blue-h: var(--mm-func-blue-deep); --mm-yellow: var(--mm-warning); --mm-yellow-h: var(--mm-warning-strong); --mm-red: var(--mm-error); --mm-pink: #c0186b; /* accessible TEXT-on-light variants of the action hues (AA >=4.5:1). Use where the hue is the text color, not a fill (line buttons, links). */ --mm-orange-text: var(--mm-warning-strong); --mm-green-text: var(--mm-success-strong); --mm-blue-text: var(--mm-primary-deep); /* deep-text links → purple-deep */ /* pale-fill / dark-ink pairs for the filled Orange/Yellow/Green buttons (issue #61). Literal hex, NOT overridden under [data-theme="dark"] — the fill must stay legible even where the surrounding UI goes dark, so these are theme-fixed (identical contrast in both modes). */ --mm-warning-fill: #F7D97A; --mm-warning-fill-h: #EFC94E; --mm-warning-ink: #3D2E00; --mm-success-fill: #B9EAC8; --mm-success-fill-h: #9ADCB0; --mm-success-ink: #0C3D1E; } /* ============================================================ Sealed dark theme — values present, light ships (data-theme で封印)。 ============================================================ */ [data-theme="dark"]{ --mm-text: #f2f2f2; --mm-text-soft: #d7dbe6; --mm-text-aux: #a3a9ba; --mm-text-3: var(--mm-text-aux); --mm-surface: #14161d; --mm-surface-sunken: #0f1117; --mm-surface-alt: #181b24; --mm-card-bg: var(--mm-surface); --mm-surface-2: var(--mm-surface-sunken); --mm-page-bg: #0f1117; --mm-page-bg-2: #14161d; --mm-border: rgba(255,255,255,.10); --mm-border-strong: rgba(255,255,255,.16); --mm-divider: rgba(255,255,255,.10); --mm-hairline: var(--mm-border); --mm-hairline-strong: var(--mm-border-strong); --mm-glass-bg: rgba(20,24,34,.58); --mm-glass-rim: inset 0 1px 0 rgba(255,255,255,.14); } /* ---- B. Base / typography (element level, lowest specificity) ---- */ body{ background-color: var(--mm-page-bg); color: var(--mm-text); font-family: var(--mm-font); -webkit-font-smoothing: antialiased; /* crisper text, no layout effect */ -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a{ transition: color var(--mm-transition); } button{ font-family: inherit; transition: background-color var(--mm-transition), border-color var(--mm-transition), box-shadow var(--mm-transition), transform var(--mm-transition); } /* dashboard brand mark (issue #61) is a