/* tokens.css — プラットフォーム全体のデザイントークン。 Phase 1: 全 14 アプリ + auth_gateway がこのファイルを読み込む。 各アプリ CSS の :root はまだ削除しない（変数二重定義は無害、後勝ち上書きで互換維持）。 ダークモード対応 (Dark Mode Phase D1): - light のすべての色は `:root` で集中定義 - `[data-theme="dark"]` で grayscale / surface / semantic-soft をまとめて上書き - navy chrome (topbar / sidebar / breadcrumb) は両モード共通の navy のまま - サーバ側の cookie middleware が 属性を初期値設定し、 base.html 先頭の inline FOUC script が prefers-color-scheme を反映して最終決定 */ :root { /* === Brand === */ --primary: #2563eb; --primary-hover: #1d4ed8; --primary-soft: #dbeafe; /* === Grayscale === */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* === Navy (header / sidebar / breadcrumb) === */ --navy-900: #0f1d3a; --navy-800: #162344; --navy-700: #1e3a5f; --navy-text: #94a3b8; --navy-text-bright: #e2e8f0; --navy-accent: #60a5fa; --navy-border: #1e3a5f; /* === Semantic === */ --success: #16a34a; --success-soft: #f0fdf4; --warning: #d97706; --warning-soft: #fffbeb; --danger: #dc2626; --danger-soft: #fef2f2; --info: #0284c7; --info-soft: #f0f9ff; /* === CPU vendor === */ --intel: #0071c5; --amd: #ed1c24; /* === Spacing scale (4 / 8 / 12 / 16 / 20 / 24 / 32 / 48) === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; /* === Radius === */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; /* === Shadow === --shadow / --shadow-lg は 9+ アプリの実値に合わせている。 style.css (auth_gateway) と app11.css (license_analyzer) は微妙に異なる値で 上書きするため必要に応じて :root override を残す。 */ --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow: 0 1px 3px rgba(0,0,0,.1); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 4px 12px rgba(0,0,0,.12); /* === Typography === */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; /* === Layout sizes === */ --header-h: 84px; --sidebar-w: 200px; /* === Surface tokens (Dark Mode Phase D1) === カード・パネル背景・本文色を抽象化し、[data-theme="dark"] で一括反転。 light のデフォルト値は従来のハードコード (#fff, gray-900 等) と等価なので light モードでは視覚回帰ゼロ。 */ --surface: #fff; /* card / panel background */ --surface-elevated: #fff; /* elevated cards (with --shadow-lg) */ --surface-sunken: var(--gray-50); /* page background (matches body) */ --text: var(--gray-900); /* primary body text */ --text-muted: var(--gray-500); /* secondary / metadata text */ --text-faint: var(--gray-400); /* tertiary / disabled text */ --border-subtle: var(--gray-200); /* card / form borders */ --border-strong: var(--gray-300); /* divider / emphasis borders */ } /* === Dark mode overrides === にだけ適用される。grayscale を slate-tinted に反転し、 surface / text / border / semantic-soft を再定義する。 navy chrome (--navy-*) は両モードで共通なので上書きしない。 */ [data-theme="dark"] { /* Inverted grayscale (slate-tinted, Tailwind slate-50..900 風) */ --gray-50: #1e293b; --gray-100: #334155; --gray-200: #475569; --gray-300: #64748b; --gray-400: #94a3b8; --gray-500: #cbd5e1; --gray-600: #d1d5db; --gray-700: #e2e8f0; --gray-800: #f1f5f9; --gray-900: #f8fafc; /* Surfaces */ --surface: #1e293b; /* slate-800 */ --surface-elevated: #283449; /* slightly lifted */ --surface-sunken: #0f172a; /* slate-900 — page background */ --text: #f1f5f9; --text-muted: #94a3b8; --text-faint: #64748b; --border-subtle: #334155; --border-strong: #475569; /* Semantic-soft backgrounds (deep tones for dark surfaces) */ --primary-soft: #1e3a8a; /* deep blue */ --success-soft: #14532d; /* deep green */ --warning-soft: #78350f; /* deep amber */ --danger-soft: #7f1d1d; /* deep red */ --info-soft: #075985; /* deep cyan */ /* Shadow alpha bumped — dark surfaces need more contrast */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 4px 12px rgba(0,0,0,.5); --shadow-lg: 0 4px 16px rgba(0,0,0,.6); }