creoui 0.20.1

package/dist/tokens.css

@@ -0,0 +1,798 @@
+/**
+ * Do not edit directly — generated by Style Dictionary from creoui tokens.
+ * Source: tokens/**/*.json (DTCG).
+ *
+ * Default theme: mint-dark (Creo Design System default)
+ * Switch theme via `[data-theme="{id}"]` attribute on any ancestor.
+ * fleetstage 後方互換: `.dark` / `[data-theme="dark"]` = mint-dark、
+ * `[data-theme="light"]` = mint-light。
+ *
+ * NOTE: :root block は category (depth / editor-mode / frame / layout 等)
+ * 別に分割して emit する (Chrome CSS parser の prop-count 閾値回避)。
+ */
+/* === color === */
+:root {
+  --color-surface-scrim: oklch(0 0 0 / 0.4); /** Drawer / side sheet backdrop scrim — theme-agnostic 40% black overlay。 dark theme でも light theme でも統一して暗 backdrop を使う UX 慣習に従う。 中央 modal (dialog) はより重い注意を引くため `scrim-modal` (50%) を使う。 */
+  --color-surface-scrim-modal: oklch(0 0 0 / 0.5); /** Dialog (中央 modal) backdrop scrim — 50% black overlay。 drawer (40%) より強く content を後退させ、 user の注意を modal に集中させる。 dark/light theme 共通。 */
+}
+
+/* === density === */
+:root {
+  --density-default-padding-scale: 1; /** Default density — base spacing そのまま (4 mode の現状値) */
+  --density-default-gap-scale: 1; /** Default density — base gap そのまま */
+  --density-default-min-height-scale: 1; /** Default density — base target そのまま */
+  --density-comfortable-padding-scale: 1.25; /** Comfortable density — base × 1.25、 広い呼吸 (reading mode / hero / onboarding) */
+  --density-comfortable-gap-scale: 1.25; /** Comfortable density — gap も × 1.25 で element 間に余裕 */
+  --density-comfortable-min-height-scale: 1.1; /** Comfortable density — target × 1.1 (tap も focus も少し大きく) */
+  --density-compact-padding-scale: 0.85; /** Compact density — base × 0.85、 dense interface (data table / dashboard / dev tool) */
+  --density-compact-gap-scale: 0.85; /** Compact density — gap も × 0.85 */
+  --density-compact-min-height-scale: 0.95; /** Compact density — target × 0.95 (tap >= 44px は維持、 focus は少し縮) */
+  --density-cozy-padding-scale: 0.7; /** Cozy density — base × 0.7、 最も dense (terminal mode / log viewer / max info-density) */
+  --density-cozy-gap-scale: 0.7; /** Cozy density — gap も × 0.7 */
+  --density-cozy-min-height-scale: 0.85; /** Cozy density — target × 0.85 (a11y minimum 24px は超える) */
+}
+
+/* === depth === */
+:root {
+  --depth-flat: 0; /** Flat — z=0、 base plane (no elevation) */
+  --depth-raised: 0.25rem; /** Raised — subtle hover lift / sidebar active item */
+  --depth-elevated: 0.5rem; /** Elevated — card / hero default forward (5-step rule の中央) */
+  --depth-floating: 1rem; /** Floating — feature card hover / popover / dropdown */
+  --depth-modal: 2rem; /** Modal — overlay / dialog / drawer の前面 (最深 elevation) */
+}
+
+/* === editor-mode === */
+:root {
+  --editor-mode-axis-global: var(--color-brand-secondary); /** TOP 領域 accent — global tools / 視線の起点 (active theme の brand secondary に追従) */
+  --editor-mode-axis-utility: var(--color-text-tertiary); /** BOTTOM 領域 accent — ローカル utility (active theme の text tertiary) */
+  --editor-mode-axis-past: var(--color-semantic-info); /** LEFT 領域 accent — 時系列過去 / 参照 / 元ソース (active theme の semantic info) */
+  --editor-mode-axis-future: var(--color-brand-primary); /** RIGHT 領域 accent — 時系列未来 / ツール / 生成 (active theme の brand primary) */
+  --editor-mode-overlay-backdrop-opacity: 0; /** Editor Layer 最背面の opacity。デフォルト 0 (完全透過) で Content Layer を遮らない */
+  --editor-mode-panel-field-label: var(--color-text-secondary); /** Field label の text 色 (active theme の text secondary) */
+  --editor-mode-panel-field-value: var(--color-text-primary); /** Field value の text 色 (active theme の text primary) */
+  --editor-mode-panel-separator: var(--color-surface-border-subtle); /** Field group の区切り線 (active theme の border subtle) */
+  --editor-mode-panel-field-gap: 0.5rem; /** Field 同士の縦間隔 */
+  --editor-mode-panel-group-gap: 1rem; /** Field group 間の縦間隔 */
+  --editor-mode-region-bg-color: var(--color-surface-bg-base); /** Region 背景の base RGB (active theme に追従) */
+  --editor-mode-region-bg-opacity: 0.92; /** Region 背景の 不透明度 (0.0-1.0)。Content を完全に隠さず薄く透かす */
+  --editor-mode-region-border: var(--color-surface-border); /** Region の輪郭色 (active theme に追従) */
+  --editor-mode-region-padding: 0.75rem; /** Region 内側の padding */
+  --editor-mode-region-top-height: 2.75rem; /** TOP region の固定高さ (Content を大きく隠さないコンパクトサイズ) */
+  --editor-mode-region-bottom-height: 2.75rem; /** BOTTOM region の固定高さ */
+  --editor-mode-region-left-width: 15rem; /** LEFT region の default 幅 (collapsible) */
+  --editor-mode-region-right-width: 17.5rem; /** RIGHT region の default 幅 (tool panel、左より広め) */
+  --editor-mode-selection-outline-hover: var(--color-brand-primary-subtle); /** Editor mode 中の hover outline (ghost highlight、Content を触らず上に描画) */
+  --editor-mode-selection-outline-active: var(--color-brand-primary); /** 選択中の要素 outline (active theme の brand primary) */
+  --editor-mode-selection-outline-width: 0.125rem; /** Selection outline の太さ */
+  --editor-mode-selection-outline-offset: 0.125rem; /** 要素から outline までの offset (要素本体を遮らない) */
+}
+
+/* === focus-ring === */
+:root {
+  --focus-ring-width: 0.125rem; /** Outer ring width — WCAG 2.4.11 minimum 2px contrast border、 thinner だと visible 不足 */
+  --focus-ring-offset: 0.125rem; /** Outline offset — 要素境界から 2px 離す (要素を遮らず ring が呼吸) */
+  --focus-ring-halo-width: 0.25rem; /** Inner halo width — outer ring の補完 subtle bg tint、 ring を 「包む glow」 として演出 */
+  --focus-ring-style: solid; /** Outline style — solid のみ採用 (dashed は精度に欠ける、 double は thicker 設計) */
+}
+
+/* === frame === */
+:root {
+  --frame-perspective-default: 1400px; /** Default perspective — page-level spatial frame (subtle 3D) */
+  --frame-perspective-shallow: 50rem; /** Shallow — closer camera、 dramatic 3D (hero / playground) */
+  --frame-perspective-deep: 2400px; /** Deep — farther camera、 subtle 3D (long-form content / reading) */
+}
+
+/* === layout === */
+:root {
+  --layout-container-xs: 30rem; /** Extra-narrow column — single-line CTA / standalone form / compact dialog body。 mobile portrait の effective text width に近い、 minimal modal stage。 */
+  --layout-container-s: 40rem; /** Narrow column — short form / single-line input collection / compact reading. iPhone 15 Pro Max landscape (932×430) や dense modal と整合。 */
+  --layout-container-m: 48rem; /** Default reading-friendly — 60-80 char line for long-form text. iPad portrait の content viewport と整合。 */
+  --layout-container-l: 1024px; /** Dashboard / table-rich content — multi-column tables / data lists. iPad landscape / 13" laptop の effective viewport。 */
+  --layout-container-xl: 1280px; /** Hero / multi-column layout — landing / marketing / wide app shell。 14" laptop 以上 desktop の comfortable upper bound。 */
+  --layout-gap-tight: var(--spacing-xs); /** Tight gap — icon+label inline, chip group, closely-related siblings */
+  --layout-gap-sibling: var(--spacing-m); /** Default sibling gap — between stacked elements (list items, form fields) */
+  --layout-gap-section: var(--margin-l); /** Section-to-section gap — thematic block break (between content sections) */
+  --layout-gap-page: var(--margin-xl); /** Page-level break — hero / footer separation, landing page major divisions */
+  --layout-grid-col-min-xs: 7.5rem; /** auto-fit grid 最小 column 幅 (xs cells) — chip / avatar grid / icon-only tile。 dense 並びで多数表示が前提の最小単位。 */
+  --layout-grid-col-min-s: 10rem; /** auto-fit grid 最小 column 幅 (s cells) — image thumbnail / icon tile / chip group 等の 密 grid 向け。 */
+  --layout-grid-col-min-m: 13.75rem; /** auto-fit grid 最小 column 幅 (m cells) — card list / preview tile の標準サイズ、 readable summary を含む card に最適。 */
+  --layout-grid-col-min-l: 17.5rem; /** auto-fit grid 最小 column 幅 (l cells) — content card with headline + 1-2 line description + meta、 article preview。 */
+  --layout-grid-col-min-xl: 20rem; /** auto-fit grid 最小 column 幅 (xl cells) — feature card / hero tile、 multi-line description + CTA を含む rich card。 */
+  --layout-target-tap: 2.75rem; /** Minimum tap target — Apple HIG accessibility requirement (modals, buttons on touch devices) */
+  --layout-target-focus: 2rem; /** Minimum focus target — pointer devices / desktop-first (smaller than tap but still comfortable) */
+  --layout-target-hit: 1.5rem; /** Minimum hit target — dense UI (toolbars, inline actions), still WCAG-reasonable with hover affordance */
+}
+
+/* === margin === */
+:root {
+  --margin-xs: 0.5rem; /** Extra-small margin — tight stack (paragraph spacing, inline gap) */
+  --margin-s: 1rem; /** Small margin — standard vertical rhythm between elements */
+  --margin-m: 1.125rem; /** Medium margin — component block separation (default、 spacing.m と揃える) */
+  --margin-l: 2.5rem; /** Large margin — section divider (between thematic blocks) */
+  --margin-xl: 4rem; /** Extra-large margin — major section or hero break (page-level breathing) */
+}
+
+/* === motion === */
+:root {
+  --motion-duration-instant: 80ms; /** Instant — micro feedback (button click flash 等) */
+  --motion-duration-fast: 160ms; /** Fast — small UI transitions (tooltip / hover) */
+  --motion-duration-normal: 220ms; /** Normal — default transition (card lift / nav switch、 5-step 中央) */
+  --motion-duration-slow: 320ms; /** Slow — Frame morph / page transition (perceptible motion) */
+  --motion-duration-lazy: 480ms; /** Lazy — large layout shift / hero reveal (deliberate) */
+  --motion-easing-linear: linear; /** Linear — constant velocity (progress bars 等の cumulative motion) */
+  --motion-easing-in: cubic-bezier(0.4, 0, 1, 1); /** Ease-in — slow start, fast end (退場 animation) */
+  --motion-easing-out: cubic-bezier(0, 0, 0.2, 1); /** Ease-out — fast start, slow end (登場 animation、 Material 3 default) */
+  --motion-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1); /** Ease-in-out — smooth both ends (state change、 standard default) */
+  --motion-easing-spring: cubic-bezier(0.2, 0.8, 0.2, 1); /** Spring — Creo brand bouncy curve (3D Frame morph / lively interactions) */
+  --motion-mapping-hover-duration: var(--motion-duration-fast); /** Hover transition duration — fast (160ms)、 small surface motion で 「変化が現れる」 感 */
+  --motion-mapping-hover-easing: var(--motion-easing-out); /** Hover transition easing — ease-out で 「登場 → 落ち着く」 (Material 3 default) */
+  --motion-mapping-press-duration: var(--motion-duration-instant); /** Press transition duration — instant (80ms) で micro feedback、 押下の即時感 */
+  --motion-mapping-press-easing: var(--motion-easing-in); /** Press transition easing — ease-in で 「押し込み」 (急停止) */
+  --motion-mapping-toggle-duration: var(--motion-duration-normal); /** Toggle transition duration — normal (220ms) で滑らかな state change */
+  --motion-mapping-toggle-easing: var(--motion-easing-in-out); /** Toggle transition easing — in-out で両端滑らか (radio / checkbox / switch / segmented) */
+  --motion-mapping-focus-ring-duration: var(--motion-duration-instant); /** Focus ring transition duration — instant (80ms) で keyboard tab に即応 */
+  --motion-mapping-focus-ring-easing: var(--motion-easing-out); /** Focus ring transition easing — ease-out で「ring が現れる」 */
+  --motion-mapping-dropdown-duration: var(--motion-duration-fast); /** Dropdown / popover / tooltip duration — fast (160ms) で軽快な登場 */
+  --motion-mapping-dropdown-easing: var(--motion-easing-out); /** Dropdown easing — ease-out で 「ふわっと出る」 */
+  --motion-mapping-modal-enter-duration: var(--motion-duration-slow); /** Modal entry duration — slow (320ms) で「落ち着いた登場」 (modal / drawer / dialog) */
+  --motion-mapping-modal-enter-easing: var(--motion-easing-out); /** Modal entry easing — ease-out で fast → slow (前面に現れて止まる) */
+  --motion-mapping-modal-exit-duration: var(--motion-duration-normal); /** Modal exit duration — normal (220ms) で「素早く消える」 */
+  --motion-mapping-modal-exit-easing: var(--motion-easing-in); /** Modal exit easing — ease-in で slow → fast (退場、 引っ込む) */
+  --motion-mapping-page-transition-duration: var(--motion-duration-normal); /** Page route transition duration — normal (220ms) で滑らかな移動 */
+  --motion-mapping-page-transition-easing: var(--motion-easing-in-out); /** Page transition easing — in-out で両端滑らか (route 変化) */
+  --motion-mapping-frame-morph-duration: var(--motion-duration-slow); /** Frame system morph duration — slow (320ms)、 Creo brand identity の「呼吸」 */
+  --motion-mapping-frame-morph-easing: var(--motion-easing-spring); /** Frame morph easing — spring で Creo brand bouncy (3D depth metaphor articulate) */
+  --motion-mapping-skeleton-shimmer-duration: var(--motion-duration-lazy); /** Skeleton shimmer duration — lazy (480ms) で loading の cumulative motion */
+  --motion-mapping-skeleton-shimmer-easing: var(--motion-easing-linear); /** Skeleton shimmer easing — linear で「途切れない流れ」 (loading は時間流動) */
+  --motion-mapping-progress-indeterminate-duration: var(--motion-duration-lazy); /** Progress indeterminate bar duration — lazy (480ms) で end-less cumulative motion */
+  --motion-mapping-progress-indeterminate-easing: var(--motion-easing-linear); /** Progress indeterminate easing — linear で constant velocity (途中 progress 表現) */
+}
+
+/* === radius === */
+:root {
+  --radius-none: 0; /** No rounding — explicit reset (special, outside 5 tier rule) */
+  --radius-xs: 0.25rem; /** Extra-small radius — minimal rounding (chips, tags) */
+  --radius-s: 0.5rem; /** Small radius — subtle rounding (buttons, inputs) */
+  --radius-m: 0.9375rem; /** Medium radius — cards, popovers (soft friendly feel) */
+  --radius-l: 1.375rem; /** Large radius — modals, larger surfaces */
+  --radius-xl: 1.75rem; /** Extra-large radius — hero surfaces */
+  --radius-full: 9999px; /** Fully rounded — pill shapes and circles (special, outside 5 tier rule) */
+}
+
+/* === shadow === */
+:root {
+  --shadow-none: none; /** No shadow */
+  --shadow-s: 0 1px 2px 0 rgba(32, 36, 46, 0.06); /** Small elevation — quiet lift for subtle layers */
+  --shadow-m: 0 4px 6px -1px rgba(32, 36, 46, 0.08), 0 2px 4px -2px rgba(32, 36, 46, 0.06); /** Medium elevation — cards, dropdowns */
+  --shadow-l: 0 10px 15px -3px rgba(32, 36, 46, 0.10), 0 4px 6px -4px rgba(32, 36, 46, 0.08); /** Large elevation — popovers, overlays */
+  --shadow-xl: 0 20px 25px -5px rgba(32, 36, 46, 0.12), 0 8px 10px -6px rgba(32, 36, 46, 0.08); /** Extra-large elevation — modals, focal surfaces */
+}
+
+/* === spacing === */
+:root {
+  --spacing-xs: 0.25rem; /** Extra-small spacing — 4px (base unit) */
+  --spacing-s: 0.5rem; /** Small spacing — 8px */
+  --spacing-m: 1.125rem; /** Medium spacing — 18px (default gap between UI elements) */
+  --spacing-l: 1.5rem; /** Large spacing — 24px */
+  --spacing-xl: 2rem; /** Extra-large spacing — 32px */
+}
+
+/* === typography === */
+:root {
+  --typography-body-lead: var(--typography-size-xl); /** Lead body — opening paragraph / intro (larger, invites reading) */
+  --typography-body-default: var(--typography-size-m); /** Default body — regular paragraph text (最もよく使う) */
+  --typography-body-emphasis: var(--typography-size-m); /** Emphasis body — default size with stronger weight (意味的な強調、size は default と同じ) */
+  --typography-body-helper: var(--typography-size-s); /** Helper text — form helper, status message, secondary info */
+  --typography-body-caption: var(--typography-size-xs); /** Caption — image caption, footnote, meta info (smallest readable body) */
+  --typography-display-xs: 1.5rem; /** Display xs — smallest heading (h4 / section title / card title) */
+  --typography-display-s: 2rem; /** Display s — standard heading (h3 / article title / section headline) */
+  --typography-display-m: 2.75rem; /** Display m — default hero / h2 (Creo aesthetic: 柔らかく強い存在感) */
+  --typography-display-l: 3.5rem; /** Display l — page hero / h1 */
+  --typography-display-xl: 4.5rem; /** Display xl — landing mega headline / promotional hero */
+  --typography-family-sans: 'Creo Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', 'Yu Gothic UI', 'Meiryo UI', Roboto, 'Noto Sans JP', sans-serif; /** Default UI sans-serif family (multi-language: EN/JA/KO, multi-platform: macOS/Win/Linux) */
+  --typography-family-mono: 'JetBrainsMono Nerd Font', 'FiraCode Nerd Font', 'CaskaydiaCove Nerd Font', 'Iosevka Nerd Font', '0xProto Nerd Font', 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Cascadia Mono', 'Fira Code', 'Consolas', 'Yu Gothic UI', monospace; /** Default monospace family for code blocks, tokens, IDs. Top 5 Nerd Fonts (JetBrainsMono / FiraCode / Cascadia / Iosevka / 0xProto) を primary fallback、IBM Plex Mono を corporate fallback。Nerd Font が install 済なら icon glyph も同 stack で使える */
+  --typography-family-mono-legible: 'AtkinsonHyperlegibleMono Nerd Font', 'Atkinson Hyperlegible Mono', 'Hack Nerd Font', 'Hack', 'JetBrainsMono Nerd Font', 'JetBrains Mono', monospace; /** Mono variant for accessibility / high legibility. Atkinson Hyperlegible Mono (Braille Institute) + Hack を主軸。低視力 / 小サイズ / long session で読みやすさ最優先 */
+  --typography-family-mono-retro: 'DepartureMono Nerd Font', 'Departure Mono', 'Gohu Nerd Font', 'GohuFont', '3270 Nerd Font', '3270 Medium', 'Terminus Nerd Font', 'Terminus', 'JetBrainsMono Nerd Font', monospace; /** Mono variant for retro / pixel / lo-fi aesthetic. Departure Mono / GohuFont / 3270 / Terminus の bitmap-like / pixel-perfect な font 群。display heading や theme アクセントで使う */
+  --typography-family-mono-corporate: 'IBM Plex Mono Nerd Font', 'IBM Plex Mono', 'AdwaitaMono Nerd Font', 'Adwaita Mono', 'JetBrainsMono Nerd Font', 'JetBrains Mono', monospace; /** Mono variant for corporate / professional tone. IBM Plex Mono が主軸 (Plex Sans/Serif と family 統一可)、Adwaita Mono が GNOME/Linux native flavor */
+  --typography-family-mono-display: 'ShareTechMono Nerd Font', 'Share Tech Mono', 'VictorMono Nerd Font', 'Victor Mono', 'JetBrainsMono Nerd Font', 'JetBrains Mono', monospace; /** Mono variant for display / heading / cyberpunk aesthetic. Share Tech Mono (CRT terminal feel) や Victor Mono (cursive italic 強調) が主軸。banner / hero / accent 用 */
+  --typography-family-display: 'Creo Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', 'Yu Gothic UI', 'Noto Sans JP', sans-serif; /** Display family — heroes, large marketing headlines (multi-platform) */
+  --typography-family-icon: 'Symbols Nerd Font Mono', 'Symbols Nerd Font', 'JetBrainsMono Nerd Font', 'FiraCode Nerd Font', 'CaskaydiaCove Nerd Font', 'Iosevka Nerd Font', '0xProto Nerd Font', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif; /** Icon family — Nerd Fonts (~10k アイコン: devicons / octicons / font-awesome / material) + OS native emoji fallback。Nerd Font 未 install 環境では emoji / 普通文字に degrade */
+  --typography-family-app: 'JetBrainsMono Nerd Font Mono', 'JetBrainsMono Nerd Font', 'JetBrains Mono', 'PlemolJP', 'Noto Sans JP', monospace; /** App UI mode — chrome 全般 (sidebar / button / dialog / tab)。等幅 + Nerd Font icon、CJK は PlemolJP fallback で完全等幅統一。VP Phase A1 default */
+  --typography-family-read: 'PlemolJP', 'Noto Sans JP', 'JetBrainsMono Nerd Font Mono', monospace; /** Read mode — 読み専用表示 (memory view / chat history / canvas markdown render / log viewer)。PlemolJP の Plex Sans JP + JetBrains Mono Latin で CJK 完全等幅統一 */
+  --typography-family-editor: 'iAWriterDuoS Nerd Font Mono', 'iAWriterDuoS Nerd Font', 'iA Writer Duo S', 'PlemolJP', 'Noto Sans JP', monospace; /** Editor mode (write、default) — textarea / Markdown editor / chat input。iA Writer Duo の Duospace で writer 体験、CJK は PlemolJP */
+  --typography-family-editor-mono: 'iAWriterMonoS', 'iA Writer Mono S', 'PlemolJP', 'Noto Sans JP', monospace; /** Editor mode option — 純粋 mono。iA Writer Mono、コード重視 user 向け */
+  --typography-family-editor-quattro: 'iAWriterQuattroS', 'iA Writer Quattro S', 'PlemolJP', 'Noto Sans JP', sans-serif; /** Editor mode option — semi-proportional。iA Writer Quattro、長文散文 user 向け */
+  --typography-family-terminal: 'JetBrainsMono Nerd Font Mono', 'JetBrainsMono Nerd Font', 'JetBrains Mono', 'PlemolJP', 'Noto Sans JP', monospace; /** Terminal mode — xterm.js (app と同じ stack だが意味的に分離、将来 terminal 専用調整に拡張可) */
+  --typography-icon-xs: 1rem; /** Tiny inline icon — text-flow に並ぶ 1em 相当の補助 mark / favicon / dense list の leading icon。 */
+  --typography-icon-s: 1.5rem; /** Small icon — button / input / chip の leading mark、 toolbar action。 base 16px text と並ぶ comfortable 比率。 */
+  --typography-icon-m: 2.5rem; /** Icon display — list item / inline 強調。 emoji や icon font の visual size、 typography size とは別 scale。 */
+  --typography-icon-l: 4rem; /** Icon display — empty-state default / card header / feature illustration。 */
+  --typography-icon-xl: 6rem; /** Icon display — empty-state large variant / hero illustration / onboarding。 page-level の visual anchor。 */
+  --typography-line-height-tight: 1.25; /** Tight line-height — headings */
+  --typography-line-height-normal: 1.5; /** Normal line-height — default body */
+  --typography-line-height-relaxed: 1.75; /** Relaxed line-height — long-form text, CJK languages */
+  --typography-size-xs: 0.75rem; /** Caption / meta text */
+  --typography-size-s: 0.875rem; /** Small body / helper text */
+  --typography-size-m: 1rem; /** Default body text */
+  --typography-size-l: 1.125rem; /** Large body / subheading */
+  --typography-size-xl: 1.25rem; /** Largest body / small heading (h4) */
+  --typography-title-hero: var(--typography-display-xl); /** Hero title — landing page mega headline (promotional / marketing) */
+  --typography-title-page: var(--typography-display-m); /** Page title — h1 (article title, app screen heading) */
+  --typography-title-section: var(--typography-display-s); /** Section title — h2 (thematic block within a page) */
+  --typography-title-subsection: var(--typography-display-xs); /** Subsection title — h3 (nested group within a section) */
+  --typography-title-card: var(--typography-size-xl); /** Card title — h4 (inline block title, table header, menu label) */
+  --typography-weight-regular: 400; /** Regular body weight */
+  --typography-weight-medium: 500; /** Medium emphasis */
+  --typography-weight-semibold: 600; /** Semi-bold — subheadings, buttons */
+  --typography-weight-bold: 700; /** Bold — headings */
+}
+
+/* === default theme color (mint-dark) === */
+:root {
+  --color-brand-primary: oklch(0.75 0.12 160); /** Brand primary (base) */
+  --color-brand-primary-hover: oklch(0.8 0.13 160); /** Brand primary — hover */
+  --color-brand-primary-active: oklch(0.7 0.11 160); /** Brand primary — active / pressed */
+  --color-brand-primary-subtle: oklch(0.25 0.05 160); /** Brand primary — subtle tint surface */
+  --color-brand-secondary: oklch(0.7 0.12 300); /** Brand secondary (base) */
+  --color-brand-secondary-hover: oklch(0.75 0.13 300); /** Brand secondary — hover */
+  --color-brand-secondary-active: oklch(0.65 0.11 300); /** Brand secondary — active / pressed */
+  --color-brand-secondary-subtle: oklch(0.25 0.05 300); /** Brand secondary — subtle tint surface */
+  --color-semantic-success: oklch(0.7 0.15 145); /** Semantic success (base) */
+  --color-semantic-success-hover: oklch(0.75 0.16 145); /** Semantic success — hover */
+  --color-semantic-success-active: oklch(0.65 0.14 145); /** Semantic success — active */
+  --color-semantic-success-subtle: oklch(0.25 0.06 145); /** Semantic success — subtle surface */
+  --color-semantic-success-text: oklch(0.8 0.12 145); /** Semantic success — text on tinted bg */
+  --color-semantic-warning: oklch(0.75 0.14 85); /** Semantic warning (base) */
+  --color-semantic-warning-hover: oklch(0.8 0.15 85); /** Semantic warning — hover */
+  --color-semantic-warning-active: oklch(0.7 0.13 85); /** Semantic warning — active */
+  --color-semantic-warning-subtle: oklch(0.25 0.06 85); /** Semantic warning — subtle surface */
+  --color-semantic-warning-text: oklch(0.85 0.1 85); /** Semantic warning — text on tinted bg */
+  --color-semantic-error: oklch(0.7 0.18 25); /** Semantic error (base) */
+  --color-semantic-error-hover: oklch(0.75 0.19 25); /** Semantic error — hover */
+  --color-semantic-error-active: oklch(0.65 0.17 25); /** Semantic error — active */
+  --color-semantic-error-subtle: oklch(0.25 0.06 25); /** Semantic error — subtle surface */
+  --color-semantic-error-text: oklch(0.85 0.12 25); /** Semantic error — text on tinted bg */
+  --color-semantic-info: oklch(0.7 0.12 240); /** Semantic info (base) */
+  --color-semantic-info-hover: oklch(0.75 0.13 240); /** Semantic info — hover */
+  --color-semantic-info-active: oklch(0.65 0.11 240); /** Semantic info — active */
+  --color-semantic-info-subtle: oklch(0.25 0.05 240); /** Semantic info — subtle surface */
+  --color-semantic-info-text: oklch(0.85 0.1 240); /** Semantic info — text on tinted bg */
+  --color-surface-bg-base: oklch(0.15 0.02 260); /** Root background — page canvas */
+  --color-surface-bg-subtle: oklch(0.18 0.02 260); /** Subtle background — panels, sections */
+  --color-surface-bg-emphasis: oklch(0.28 0.02 260); /** Emphasized background — highlighted regions */
+  --color-surface-surface: oklch(0.2 0.02 260); /** Card / modal / elevated container surface */
+  --color-surface-border: oklch(0.3 0.02 260); /** Default border / divider */
+  --color-surface-border-subtle: oklch(0.25 0.015 260); /** Subtle border — quiet separators */
+  --color-text-primary: oklch(0.95 0.01 260); /** Primary foreground text */
+  --color-text-secondary: oklch(0.75 0.01 260); /** Secondary text — supporting copy */
+  --color-text-tertiary: oklch(0.6 0.01 260); /** Tertiary text — captions, hints */
+  --color-text-disabled: oklch(0.45 0.01 260); /** Disabled text */
+  --color-text-inverse: oklch(0.15 0.02 260); /** Inverse text — on dark surfaces */
+  --color-shadow-base: oklch(0 0 0 / 0.3); /** Shadow tint — default */
+  --color-shadow-strong: oklch(0 0 0 / 0.5); /** Shadow tint — strong */
+  --color-gradient-hero: linear-gradient(135deg, oklch(0.2 0.04 160) 0%, oklch(0.18 0.03 175) 50%, oklch(0.22 0.05 165) 100%); /** Hero gradient — marketing / splash surfaces */
+  --color-focus-ring-color: oklch(0.85 0.14 160); /** Focus ring color — outer 2px solid ring (mint-dark、 brand 同 hue + luminance UP で AAA contrast 確保) */
+  --color-focus-ring-halo: oklch(0.85 0.14 160 / 0.18); /** Focus halo — inner 4px subtle bg tint、 ring を 「包む glow」 として演出 */
+}
+
+[data-theme="contrast-dark"] {
+  --color-brand-primary: oklch(0.62 0.16 270); /** Brand primary (base) */
+  --color-brand-primary-hover: oklch(0.67 0.17 270); /** Brand primary — hover */
+  --color-brand-primary-active: oklch(0.57 0.15 270); /** Brand primary — active / pressed */
+  --color-brand-primary-subtle: oklch(0.24 0.06 270); /** Brand primary — subtle tint surface */
+  --color-brand-secondary: oklch(0.72 0.18 335); /** Brand secondary (base) */
+  --color-brand-secondary-hover: oklch(0.77 0.19 335); /** Brand secondary — hover */
+  --color-brand-secondary-active: oklch(0.67 0.17 335); /** Brand secondary — active / pressed */
+  --color-brand-secondary-subtle: oklch(0.24 0.06 335); /** Brand secondary — subtle tint surface */
+  --color-semantic-success: oklch(0.7 0.14 160); /** Semantic success (base) */
+  --color-semantic-success-hover: oklch(0.75 0.15 160); /** Semantic success — hover */
+  --color-semantic-success-active: oklch(0.65 0.13 160); /** Semantic success — active */
+  --color-semantic-success-subtle: oklch(0.24 0.05 160); /** Semantic success — subtle surface */
+  --color-semantic-success-text: oklch(0.82 0.1 160); /** Semantic success — text on tinted bg */
+  --color-semantic-warning: oklch(0.75 0.13 85); /** Semantic warning (base) */
+  --color-semantic-warning-hover: oklch(0.8 0.14 85); /** Semantic warning — hover */
+  --color-semantic-warning-active: oklch(0.7 0.12 85); /** Semantic warning — active */
+  --color-semantic-warning-subtle: oklch(0.24 0.05 85); /** Semantic warning — subtle surface */
+  --color-semantic-warning-text: oklch(0.85 0.1 85); /** Semantic warning — text on tinted bg */
+  --color-semantic-error: oklch(0.68 0.17 15); /** Semantic error (base) */
+  --color-semantic-error-hover: oklch(0.73 0.18 15); /** Semantic error — hover */
+  --color-semantic-error-active: oklch(0.63 0.16 15); /** Semantic error — active */
+  --color-semantic-error-subtle: oklch(0.24 0.06 15); /** Semantic error — subtle surface */
+  --color-semantic-error-text: oklch(0.83 0.12 15); /** Semantic error — text on tinted bg */
+  --color-semantic-info: oklch(0.8 0.1 195); /** Semantic info (base) */
+  --color-semantic-info-hover: oklch(0.85 0.11 195); /** Semantic info — hover */
+  --color-semantic-info-active: oklch(0.75 0.09 195); /** Semantic info — active */
+  --color-semantic-info-subtle: oklch(0.24 0.04 195); /** Semantic info — subtle surface */
+  --color-semantic-info-text: oklch(0.88 0.08 195); /** Semantic info — text on tinted bg */
+  --color-surface-bg-base: oklch(0.16 0.06 280); /** Root background — page canvas */
+  --color-surface-bg-subtle: oklch(0.19 0.06 280); /** Subtle background — panels, sections */
+  --color-surface-bg-emphasis: oklch(0.28 0.05 280); /** Emphasized background — highlighted regions */
+  --color-surface-surface: oklch(0.2 0.06 280); /** Card / modal / elevated container surface */
+  --color-surface-border: oklch(0.32 0.04 280); /** Default border / divider */
+  --color-surface-border-subtle: oklch(0.26 0.03 280); /** Subtle border — quiet separators */
+  --color-text-primary: oklch(0.95 0.01 280); /** Primary foreground text */
+  --color-text-secondary: oklch(0.75 0.01 280); /** Secondary text — supporting copy */
+  --color-text-tertiary: oklch(0.58 0.01 280); /** Tertiary text — captions, hints */
+  --color-text-disabled: oklch(0.42 0.01 280); /** Disabled text */
+  --color-text-inverse: oklch(0.95 0.01 280); /** Inverse text — on dark surfaces */
+  --color-shadow-base: oklch(0 0 0 / 0.4); /** Shadow tint — default */
+  --color-shadow-strong: oklch(0 0 0 / 0.6); /** Shadow tint — strong */
+  --color-focus-ring-color: oklch(0.78 0.20 270); /** Focus ring color — outer 2px solid ring (contrast-dark、 high chroma で paradox identity を保持しつつ luminance UP で AAA contrast) */
+  --color-focus-ring-halo: oklch(0.78 0.20 270 / 0.20); /** Focus halo — inner 4px subtle bg tint (alpha 0.20 で contrast theme assertive) */
+  --color-gradient-hero: linear-gradient(135deg, oklch(0.2 0.08 280) 0%, oklch(0.18 0.06 300) 50%, oklch(0.22 0.08 335) 100%); /** Hero gradient — marketing / splash surfaces */
+}
+
+[data-theme="contrast-light"] {
+  --color-brand-primary: oklch(0.52 0.18 270); /** Brand primary (base) */
+  --color-brand-primary-hover: oklch(0.47 0.19 270); /** Brand primary — hover */
+  --color-brand-primary-active: oklch(0.42 0.2 270); /** Brand primary — active / pressed */
+  --color-brand-primary-subtle: oklch(0.94 0.05 270); /** Brand primary — subtle tint surface */
+  --color-brand-secondary: oklch(0.62 0.2 335); /** Brand secondary (base) */
+  --color-brand-secondary-hover: oklch(0.57 0.21 335); /** Brand secondary — hover */
+  --color-brand-secondary-active: oklch(0.52 0.22 335); /** Brand secondary — active / pressed */
+  --color-brand-secondary-subtle: oklch(0.95 0.05 335); /** Brand secondary — subtle tint surface */
+  --color-semantic-success: oklch(0.6 0.16 160); /** Semantic success (base) */
+  --color-semantic-success-hover: oklch(0.55 0.17 160); /** Semantic success — hover */
+  --color-semantic-success-active: oklch(0.5 0.18 160); /** Semantic success — active */
+  --color-semantic-success-subtle: oklch(0.95 0.04 160); /** Semantic success — subtle surface */
+  --color-semantic-success-text: oklch(0.35 0.12 160); /** Semantic success — text on tinted bg */
+  --color-semantic-warning: oklch(0.78 0.15 85); /** Semantic warning (base) */
+  --color-semantic-warning-hover: oklch(0.73 0.16 85); /** Semantic warning — hover */
+  --color-semantic-warning-active: oklch(0.68 0.17 85); /** Semantic warning — active */
+  --color-semantic-warning-subtle: oklch(0.96 0.05 85); /** Semantic warning — subtle surface */
+  --color-semantic-warning-text: oklch(0.4 0.12 85); /** Semantic warning — text on tinted bg */
+  --color-semantic-error: oklch(0.6 0.2 15); /** Semantic error (base) */
+  --color-semantic-error-hover: oklch(0.55 0.21 15); /** Semantic error — hover */
+  --color-semantic-error-active: oklch(0.5 0.22 15); /** Semantic error — active */
+  --color-semantic-error-subtle: oklch(0.95 0.04 15); /** Semantic error — subtle surface */
+  --color-semantic-error-text: oklch(0.4 0.15 15); /** Semantic error — text on tinted bg */
+  --color-semantic-info: oklch(0.6 0.12 195); /** Semantic info (base) */
+  --color-semantic-info-hover: oklch(0.55 0.13 195); /** Semantic info — hover */
+  --color-semantic-info-active: oklch(0.5 0.14 195); /** Semantic info — active */
+  --color-semantic-info-subtle: oklch(0.95 0.04 195); /** Semantic info — subtle surface */
+  --color-semantic-info-text: oklch(0.35 0.1 195); /** Semantic info — text on tinted bg */
+  --color-surface-bg-base: oklch(0.98 0.008 280); /** Root background — page canvas */
+  --color-surface-bg-subtle: oklch(0.96 0.01 280); /** Subtle background — panels, sections */
+  --color-surface-bg-emphasis: oklch(0.88 0.015 280); /** Emphasized background — highlighted regions */
+  --color-surface-surface: oklch(1 0 0); /** Card / modal / elevated container surface */
+  --color-surface-border: oklch(0.86 0.015 280); /** Default border / divider */
+  --color-surface-border-subtle: oklch(0.91 0.01 280); /** Subtle border — quiet separators */
+  --color-text-primary: oklch(0.18 0.02 280); /** Primary foreground text */
+  --color-text-secondary: oklch(0.38 0.02 280); /** Secondary text — supporting copy */
+  --color-text-tertiary: oklch(0.52 0.01 280); /** Tertiary text — captions, hints */
+  --color-text-disabled: oklch(0.68 0.01 280); /** Disabled text */
+  --color-text-inverse: oklch(0.98 0 0); /** Inverse text — on dark surfaces */
+  --color-shadow-base: oklch(0.2 0.03 280 / 0.1); /** Shadow tint — default */
+  --color-shadow-strong: oklch(0.2 0.03 280 / 0.2); /** Shadow tint — strong */
+  --color-focus-ring-color: oklch(0.40 0.22 270); /** Focus ring color — outer 2px solid ring (contrast-light、 high chroma + luminance DOWN で AAA contrast on light bg) */
+  --color-focus-ring-halo: oklch(0.40 0.22 270 / 0.20); /** Focus halo — inner 4px subtle bg tint (alpha 0.20 で contrast theme assertive) */
+  --color-gradient-hero: linear-gradient(135deg, oklch(0.94 0.04 270) 0%, oklch(0.96 0.03 300) 50%, oklch(0.92 0.05 335) 100%); /** Hero gradient — marketing / splash surfaces */
+}
+
+[data-theme="mint-dark"] {
+  --color-brand-primary: oklch(0.75 0.12 160); /** Brand primary (base) */
+  --color-brand-primary-hover: oklch(0.8 0.13 160); /** Brand primary — hover */
+  --color-brand-primary-active: oklch(0.7 0.11 160); /** Brand primary — active / pressed */
+  --color-brand-primary-subtle: oklch(0.25 0.05 160); /** Brand primary — subtle tint surface */
+  --color-brand-secondary: oklch(0.7 0.12 300); /** Brand secondary (base) */
+  --color-brand-secondary-hover: oklch(0.75 0.13 300); /** Brand secondary — hover */
+  --color-brand-secondary-active: oklch(0.65 0.11 300); /** Brand secondary — active / pressed */
+  --color-brand-secondary-subtle: oklch(0.25 0.05 300); /** Brand secondary — subtle tint surface */
+  --color-semantic-success: oklch(0.7 0.15 145); /** Semantic success (base) */
+  --color-semantic-success-hover: oklch(0.75 0.16 145); /** Semantic success — hover */
+  --color-semantic-success-active: oklch(0.65 0.14 145); /** Semantic success — active */
+  --color-semantic-success-subtle: oklch(0.25 0.06 145); /** Semantic success — subtle surface */
+  --color-semantic-success-text: oklch(0.8 0.12 145); /** Semantic success — text on tinted bg */
+  --color-semantic-warning: oklch(0.75 0.14 85); /** Semantic warning (base) */
+  --color-semantic-warning-hover: oklch(0.8 0.15 85); /** Semantic warning — hover */
+  --color-semantic-warning-active: oklch(0.7 0.13 85); /** Semantic warning — active */
+  --color-semantic-warning-subtle: oklch(0.25 0.06 85); /** Semantic warning — subtle surface */
+  --color-semantic-warning-text: oklch(0.85 0.1 85); /** Semantic warning — text on tinted bg */
+  --color-semantic-error: oklch(0.7 0.18 25); /** Semantic error (base) */
+  --color-semantic-error-hover: oklch(0.75 0.19 25); /** Semantic error — hover */
+  --color-semantic-error-active: oklch(0.65 0.17 25); /** Semantic error — active */
+  --color-semantic-error-subtle: oklch(0.25 0.06 25); /** Semantic error — subtle surface */
+  --color-semantic-error-text: oklch(0.85 0.12 25); /** Semantic error — text on tinted bg */
+  --color-semantic-info: oklch(0.7 0.12 240); /** Semantic info (base) */
+  --color-semantic-info-hover: oklch(0.75 0.13 240); /** Semantic info — hover */
+  --color-semantic-info-active: oklch(0.65 0.11 240); /** Semantic info — active */
+  --color-semantic-info-subtle: oklch(0.25 0.05 240); /** Semantic info — subtle surface */
+  --color-semantic-info-text: oklch(0.85 0.1 240); /** Semantic info — text on tinted bg */
+  --color-surface-bg-base: oklch(0.15 0.02 260); /** Root background — page canvas */
+  --color-surface-bg-subtle: oklch(0.18 0.02 260); /** Subtle background — panels, sections */
+  --color-surface-bg-emphasis: oklch(0.28 0.02 260); /** Emphasized background — highlighted regions */
+  --color-surface-surface: oklch(0.2 0.02 260); /** Card / modal / elevated container surface */
+  --color-surface-border: oklch(0.3 0.02 260); /** Default border / divider */
+  --color-surface-border-subtle: oklch(0.25 0.015 260); /** Subtle border — quiet separators */
+  --color-text-primary: oklch(0.95 0.01 260); /** Primary foreground text */
+  --color-text-secondary: oklch(0.75 0.01 260); /** Secondary text — supporting copy */
+  --color-text-tertiary: oklch(0.6 0.01 260); /** Tertiary text — captions, hints */
+  --color-text-disabled: oklch(0.45 0.01 260); /** Disabled text */
+  --color-text-inverse: oklch(0.15 0.02 260); /** Inverse text — on dark surfaces */
+  --color-shadow-base: oklch(0 0 0 / 0.3); /** Shadow tint — default */
+  --color-shadow-strong: oklch(0 0 0 / 0.5); /** Shadow tint — strong */
+  --color-gradient-hero: linear-gradient(135deg, oklch(0.2 0.04 160) 0%, oklch(0.18 0.03 175) 50%, oklch(0.22 0.05 165) 100%); /** Hero gradient — marketing / splash surfaces */
+  --color-focus-ring-color: oklch(0.85 0.14 160); /** Focus ring color — outer 2px solid ring (mint-dark、 brand 同 hue + luminance UP で AAA contrast 確保) */
+  --color-focus-ring-halo: oklch(0.85 0.14 160 / 0.18); /** Focus halo — inner 4px subtle bg tint、 ring を 「包む glow」 として演出 */
+}
+
+[data-theme="mint-light"] {
+  --color-brand-primary: oklch(0.85 0.14 160); /** Brand primary (base) */
+  --color-brand-primary-hover: oklch(0.8 0.15 160); /** Brand primary — hover */
+  --color-brand-primary-active: oklch(0.75 0.16 160); /** Brand primary — active / pressed */
+  --color-brand-primary-subtle: oklch(0.95 0.05 160); /** Brand primary — subtle tint surface */
+  --color-brand-secondary: oklch(0.65 0.15 300); /** Brand secondary (base) */
+  --color-brand-secondary-hover: oklch(0.6 0.16 300); /** Brand secondary — hover */
+  --color-brand-secondary-active: oklch(0.55 0.17 300); /** Brand secondary — active / pressed */
+  --color-brand-secondary-subtle: oklch(0.95 0.05 300); /** Brand secondary — subtle tint surface */
+  --color-semantic-success: oklch(0.75 0.18 145); /** Semantic success (base) */
+  --color-semantic-success-hover: oklch(0.7 0.19 145); /** Semantic success — hover */
+  --color-semantic-success-active: oklch(0.65 0.2 145); /** Semantic success — active */
+  --color-semantic-success-subtle: oklch(0.95 0.05 145); /** Semantic success — subtle surface */
+  --color-semantic-success-text: oklch(0.35 0.12 145); /** Semantic success — text on tinted bg */
+  --color-semantic-warning: oklch(0.8 0.16 85); /** Semantic warning (base) */
+  --color-semantic-warning-hover: oklch(0.75 0.17 85); /** Semantic warning — hover */
+  --color-semantic-warning-active: oklch(0.7 0.18 85); /** Semantic warning — active */
+  --color-semantic-warning-subtle: oklch(0.95 0.06 85); /** Semantic warning — subtle surface */
+  --color-semantic-warning-text: oklch(0.4 0.12 85); /** Semantic warning — text on tinted bg */
+  --color-semantic-error: oklch(0.65 0.2 25); /** Semantic error (base) */
+  --color-semantic-error-hover: oklch(0.6 0.21 25); /** Semantic error — hover */
+  --color-semantic-error-active: oklch(0.55 0.22 25); /** Semantic error — active */
+  --color-semantic-error-subtle: oklch(0.95 0.05 25); /** Semantic error — subtle surface */
+  --color-semantic-error-text: oklch(0.4 0.15 25); /** Semantic error — text on tinted bg */
+  --color-semantic-info: oklch(0.7 0.15 240); /** Semantic info (base) */
+  --color-semantic-info-hover: oklch(0.65 0.16 240); /** Semantic info — hover */
+  --color-semantic-info-active: oklch(0.6 0.17 240); /** Semantic info — active */
+  --color-semantic-info-subtle: oklch(0.95 0.04 240); /** Semantic info — subtle surface */
+  --color-semantic-info-text: oklch(0.4 0.12 240); /** Semantic info — text on tinted bg */
+  --color-surface-bg-base: oklch(0.99 0 0); /** Root background — page canvas */
+  --color-surface-bg-subtle: oklch(0.97 0.005 260); /** Subtle background — panels, sections */
+  --color-surface-bg-emphasis: oklch(0.9 0.01 260); /** Emphasized background — highlighted regions */
+  --color-surface-surface: oklch(1 0 0); /** Card / modal / elevated container surface */
+  --color-surface-border: oklch(0.88 0.01 260); /** Default border / divider */
+  --color-surface-border-subtle: oklch(0.92 0.005 260); /** Subtle border — quiet separators */
+  --color-text-primary: oklch(0.2 0.02 260); /** Primary foreground text */
+  --color-text-secondary: oklch(0.4 0.02 260); /** Secondary text — supporting copy */
+  --color-text-tertiary: oklch(0.55 0.01 260); /** Tertiary text — captions, hints */
+  --color-text-disabled: oklch(0.7 0.01 260); /** Disabled text */
+  --color-text-inverse: oklch(0.98 0 0); /** Inverse text — on dark surfaces */
+  --color-shadow-base: oklch(0.2 0.02 260 / 0.08); /** Shadow tint — default */
+  --color-shadow-strong: oklch(0.2 0.02 260 / 0.15); /** Shadow tint — strong */
+  --color-focus-ring-color: oklch(0.45 0.16 160); /** Focus ring color — outer 2px solid ring (mint-light、 brand 同 hue + luminance DOWN で AAA contrast on light bg) */
+  --color-focus-ring-halo: oklch(0.45 0.16 160 / 0.18); /** Focus halo — inner 4px subtle bg tint、 ring を 「包む glow」 として演出 */
+  --color-gradient-hero: linear-gradient(135deg, oklch(0.92 0.08 160) 0%, oklch(0.94 0.06 175) 50%, oklch(0.9 0.1 165) 100%); /** Hero gradient — marketing / splash surfaces */
+}
+
+[data-theme="oldschool-dark"] {
+  --color-brand-primary: oklch(0.68 0.12 145); /** Brand primary (base) */
+  --color-brand-primary-hover: oklch(0.73 0.13 145); /** Brand primary — hover */
+  --color-brand-primary-active: oklch(0.63 0.11 145); /** Brand primary — active / pressed */
+  --color-brand-primary-subtle: oklch(0.24 0.04 145); /** Brand primary — subtle tint surface */
+  --color-brand-secondary: oklch(0.75 0.16 55); /** Brand secondary (base) */
+  --color-brand-secondary-hover: oklch(0.8 0.17 55); /** Brand secondary — hover */
+  --color-brand-secondary-active: oklch(0.7 0.15 55); /** Brand secondary — active / pressed */
+  --color-brand-secondary-subtle: oklch(0.24 0.05 55); /** Brand secondary — subtle tint surface */
+  --color-semantic-success: oklch(0.68 0.12 140); /** Semantic success (base) */
+  --color-semantic-success-hover: oklch(0.73 0.13 140); /** Semantic success — hover */
+  --color-semantic-success-active: oklch(0.63 0.11 140); /** Semantic success — active */
+  --color-semantic-success-subtle: oklch(0.24 0.04 140); /** Semantic success — subtle surface */
+  --color-semantic-success-text: oklch(0.8 0.1 140); /** Semantic success — text on tinted bg */
+  --color-semantic-warning: oklch(0.78 0.13 75); /** Semantic warning (base) */
+  --color-semantic-warning-hover: oklch(0.83 0.14 75); /** Semantic warning — hover */
+  --color-semantic-warning-active: oklch(0.73 0.12 75); /** Semantic warning — active */
+  --color-semantic-warning-subtle: oklch(0.24 0.05 75); /** Semantic warning — subtle surface */
+  --color-semantic-warning-text: oklch(0.85 0.1 75); /** Semantic warning — text on tinted bg */
+  --color-semantic-error: oklch(0.68 0.16 20); /** Semantic error (base) */
+  --color-semantic-error-hover: oklch(0.73 0.17 20); /** Semantic error — hover */
+  --color-semantic-error-active: oklch(0.63 0.15 20); /** Semantic error — active */
+  --color-semantic-error-subtle: oklch(0.24 0.05 20); /** Semantic error — subtle surface */
+  --color-semantic-error-text: oklch(0.83 0.12 20); /** Semantic error — text on tinted bg */
+  --color-semantic-info: oklch(0.7 0.1 220); /** Semantic info (base) */
+  --color-semantic-info-hover: oklch(0.75 0.11 220); /** Semantic info — hover */
+  --color-semantic-info-active: oklch(0.65 0.09 220); /** Semantic info — active */
+  --color-semantic-info-subtle: oklch(0.24 0.04 220); /** Semantic info — subtle surface */
+  --color-semantic-info-text: oklch(0.82 0.08 220); /** Semantic info — text on tinted bg */
+  --color-surface-bg-base: oklch(0.16 0.02 80); /** Root background — page canvas */
+  --color-surface-bg-subtle: oklch(0.19 0.02 80); /** Subtle background — panels, sections */
+  --color-surface-bg-emphasis: oklch(0.28 0.02 80); /** Emphasized background — highlighted regions */
+  --color-surface-surface: oklch(0.2 0.02 80); /** Card / modal / elevated container surface */
+  --color-surface-border: oklch(0.32 0.02 80); /** Default border / divider */
+  --color-surface-border-subtle: oklch(0.26 0.015 80); /** Subtle border — quiet separators */
+  --color-text-primary: oklch(0.92 0.01 80); /** Primary foreground text */
+  --color-text-secondary: oklch(0.72 0.01 80); /** Secondary text — supporting copy */
+  --color-text-tertiary: oklch(0.55 0.01 80); /** Tertiary text — captions, hints */
+  --color-text-disabled: oklch(0.42 0.01 80); /** Disabled text */
+  --color-text-inverse: oklch(0.15 0.02 80); /** Inverse text — on dark surfaces */
+  --color-shadow-base: oklch(0 0 0 / 0.35); /** Shadow tint — default */
+  --color-shadow-strong: oklch(0 0 0 / 0.55); /** Shadow tint — strong */
+  --color-focus-ring-color: oklch(0.82 0.14 145); /** Focus ring color — outer 2px solid ring (oldschool-dark、 olive hue + luminance UP で AAA contrast) */
+  --color-focus-ring-halo: oklch(0.82 0.14 145 / 0.18); /** Focus halo — inner 4px subtle bg tint、 retro/corporate identity 保持 */
+  --color-gradient-hero: linear-gradient(135deg, oklch(0.2 0.03 80) 0%, oklch(0.18 0.02 70) 50%, oklch(0.22 0.04 90) 100%); /** Hero gradient — marketing / splash surfaces */
+}
+
+[data-theme="oldschool-light"] {
+  --color-brand-primary: oklch(0.55 0.14 145); /** Brand primary (base) */
+  --color-brand-primary-hover: oklch(0.5 0.15 145); /** Brand primary — hover */
+  --color-brand-primary-active: oklch(0.45 0.16 145); /** Brand primary — active / pressed */
+  --color-brand-primary-subtle: oklch(0.94 0.04 145); /** Brand primary — subtle tint surface */
+  --color-brand-secondary: oklch(0.7 0.18 55); /** Brand secondary (base) */
+  --color-brand-secondary-hover: oklch(0.65 0.19 55); /** Brand secondary — hover */
+  --color-brand-secondary-active: oklch(0.6 0.2 55); /** Brand secondary — active / pressed */
+  --color-brand-secondary-subtle: oklch(0.95 0.05 55); /** Brand secondary — subtle tint surface */
+  --color-semantic-success: oklch(0.6 0.14 140); /** Semantic success (base) */
+  --color-semantic-success-hover: oklch(0.55 0.15 140); /** Semantic success — hover */
+  --color-semantic-success-active: oklch(0.5 0.16 140); /** Semantic success — active */
+  --color-semantic-success-subtle: oklch(0.94 0.04 140); /** Semantic success — subtle surface */
+  --color-semantic-success-text: oklch(0.35 0.1 140); /** Semantic success — text on tinted bg */
+  --color-semantic-warning: oklch(0.78 0.14 75); /** Semantic warning (base) */
+  --color-semantic-warning-hover: oklch(0.73 0.15 75); /** Semantic warning — hover */
+  --color-semantic-warning-active: oklch(0.68 0.16 75); /** Semantic warning — active */
+  --color-semantic-warning-subtle: oklch(0.96 0.05 75); /** Semantic warning — subtle surface */
+  --color-semantic-warning-text: oklch(0.42 0.1 75); /** Semantic warning — text on tinted bg */
+  --color-semantic-error: oklch(0.62 0.18 20); /** Semantic error (base) */
+  --color-semantic-error-hover: oklch(0.57 0.19 20); /** Semantic error — hover */
+  --color-semantic-error-active: oklch(0.52 0.2 20); /** Semantic error — active */
+  --color-semantic-error-subtle: oklch(0.95 0.04 20); /** Semantic error — subtle surface */
+  --color-semantic-error-text: oklch(0.4 0.13 20); /** Semantic error — text on tinted bg */
+  --color-semantic-info: oklch(0.64 0.11 220); /** Semantic info (base) */
+  --color-semantic-info-hover: oklch(0.59 0.12 220); /** Semantic info — hover */
+  --color-semantic-info-active: oklch(0.54 0.13 220); /** Semantic info — active */
+  --color-semantic-info-subtle: oklch(0.95 0.03 220); /** Semantic info — subtle surface */
+  --color-semantic-info-text: oklch(0.38 0.1 220); /** Semantic info — text on tinted bg */
+  --color-surface-bg-base: oklch(0.98 0.02 100); /** Root background — page canvas */
+  --color-surface-bg-subtle: oklch(0.96 0.03 100); /** Subtle background — panels, sections */
+  --color-surface-bg-emphasis: oklch(0.88 0.04 100); /** Emphasized background — highlighted regions */
+  --color-surface-surface: oklch(0.99 0.01 100); /** Card / modal / elevated container surface */
+  --color-surface-border: oklch(0.86 0.02 90); /** Default border / divider */
+  --color-surface-border-subtle: oklch(0.91 0.015 90); /** Subtle border — quiet separators */
+  --color-text-primary: oklch(0.22 0.02 80); /** Primary foreground text */
+  --color-text-secondary: oklch(0.42 0.02 80); /** Secondary text — supporting copy */
+  --color-text-tertiary: oklch(0.55 0.01 80); /** Tertiary text — captions, hints */
+  --color-text-disabled: oklch(0.7 0.01 80); /** Disabled text */
+  --color-text-inverse: oklch(0.98 0 0); /** Inverse text — on dark surfaces */
+  --color-shadow-base: oklch(0.25 0.02 80 / 0.1); /** Shadow tint — default */
+  --color-shadow-strong: oklch(0.25 0.02 80 / 0.2); /** Shadow tint — strong */
+  --color-focus-ring-color: oklch(0.38 0.16 145); /** Focus ring color — outer 2px solid ring (oldschool-light、 olive hue + luminance DOWN で AAA contrast on paper-like bg) */
+  --color-focus-ring-halo: oklch(0.38 0.16 145 / 0.18); /** Focus halo — inner 4px subtle bg tint、 retro/corporate identity 保持 */
+  --color-gradient-hero: linear-gradient(135deg, oklch(0.94 0.05 100) 0%, oklch(0.92 0.04 90) 50%, oklch(0.9 0.06 110) 100%); /** Hero gradient — marketing / splash surfaces */
+}
+
+[data-theme="sora-dark"] {
+  --color-brand-primary: oklch(0.7 0.1 230); /** Brand primary (base) */
+  --color-brand-primary-hover: oklch(0.75 0.11 230); /** Brand primary — hover */
+  --color-brand-primary-active: oklch(0.65 0.09 230); /** Brand primary — active / pressed */
+  --color-brand-primary-subtle: oklch(0.22 0.04 230); /** Brand primary — subtle tint surface */
+  --color-brand-secondary: oklch(0.72 0.12 50); /** Brand secondary (base) */
+  --color-brand-secondary-hover: oklch(0.77 0.13 50); /** Brand secondary — hover */
+  --color-brand-secondary-active: oklch(0.67 0.11 50); /** Brand secondary — active / pressed */
+  --color-brand-secondary-subtle: oklch(0.22 0.04 50); /** Brand secondary — subtle tint surface */
+  --color-semantic-success: oklch(0.68 0.14 155); /** Semantic success (base) */
+  --color-semantic-success-hover: oklch(0.73 0.15 155); /** Semantic success — hover */
+  --color-semantic-success-active: oklch(0.63 0.13 155); /** Semantic success — active */
+  --color-semantic-success-subtle: oklch(0.22 0.05 155); /** Semantic success — subtle surface */
+  --color-semantic-success-text: oklch(0.78 0.11 155); /** Semantic success — text on tinted bg */
+  --color-semantic-warning: oklch(0.73 0.12 70); /** Semantic warning (base) */
+  --color-semantic-warning-hover: oklch(0.78 0.13 70); /** Semantic warning — hover */
+  --color-semantic-warning-active: oklch(0.68 0.11 70); /** Semantic warning — active */
+  --color-semantic-warning-subtle: oklch(0.22 0.05 70); /** Semantic warning — subtle surface */
+  --color-semantic-warning-text: oklch(0.83 0.09 70); /** Semantic warning — text on tinted bg */
+  --color-semantic-error: oklch(0.68 0.16 15); /** Semantic error (base) */
+  --color-semantic-error-hover: oklch(0.73 0.17 15); /** Semantic error — hover */
+  --color-semantic-error-active: oklch(0.63 0.15 15); /** Semantic error — active */
+  --color-semantic-error-subtle: oklch(0.22 0.05 15); /** Semantic error — subtle surface */
+  --color-semantic-error-text: oklch(0.83 0.11 15); /** Semantic error — text on tinted bg */
+  --color-semantic-info: oklch(0.68 0.1 250); /** Semantic info (base) */
+  --color-semantic-info-hover: oklch(0.73 0.11 250); /** Semantic info — hover */
+  --color-semantic-info-active: oklch(0.63 0.09 250); /** Semantic info — active */
+  --color-semantic-info-subtle: oklch(0.22 0.04 250); /** Semantic info — subtle surface */
+  --color-semantic-info-text: oklch(0.83 0.08 250); /** Semantic info — text on tinted bg */
+  --color-surface-bg-base: oklch(0.12 0.025 240); /** Root background — page canvas */
+  --color-surface-bg-subtle: oklch(0.15 0.025 240); /** Subtle background — panels, sections */
+  --color-surface-bg-emphasis: oklch(0.25 0.025 240); /** Emphasized background — highlighted regions */
+  --color-surface-surface: oklch(0.17 0.025 240); /** Card / modal / elevated container surface */
+  --color-surface-border: oklch(0.28 0.02 240); /** Default border / divider */
+  --color-surface-border-subtle: oklch(0.23 0.015 240); /** Subtle border — quiet separators */
+  --color-text-primary: oklch(0.94 0.01 240); /** Primary foreground text */
+  --color-text-secondary: oklch(0.73 0.01 240); /** Secondary text — supporting copy */
+  --color-text-tertiary: oklch(0.58 0.01 240); /** Tertiary text — captions, hints */
+  --color-text-disabled: oklch(0.43 0.01 240); /** Disabled text */
+  --color-text-inverse: oklch(0.92 0.01 240); /** Inverse text — on dark surfaces */
+  --color-shadow-base: oklch(0 0 0 / 0.35); /** Shadow tint — default */
+  --color-shadow-strong: oklch(0 0 0 / 0.55); /** Shadow tint — strong */
+  --color-focus-ring-color: oklch(0.82 0.13 230); /** Focus ring color — outer 2px solid ring (sora-dark、 brand 同 hue + luminance UP で AAA contrast) */
+  --color-focus-ring-halo: oklch(0.82 0.13 230 / 0.18); /** Focus halo — inner 4px subtle bg tint、 ring を 「包む glow」 として演出 */
+  --color-gradient-hero: linear-gradient(135deg, oklch(0.15 0.04 240) 0%, oklch(0.13 0.03 250) 50%, oklch(0.18 0.05 230) 100%); /** Hero gradient — marketing / splash surfaces */
+}
+
+[data-theme="sora-light"] {
+  --color-brand-primary: oklch(0.75 0.12 230); /** Brand primary (base) */
+  --color-brand-primary-hover: oklch(0.7 0.13 230); /** Brand primary — hover */
+  --color-brand-primary-active: oklch(0.65 0.14 230); /** Brand primary — active / pressed */
+  --color-brand-primary-subtle: oklch(0.95 0.04 230); /** Brand primary — subtle tint surface */
+  --color-brand-secondary: oklch(0.75 0.15 50); /** Brand secondary (base) */
+  --color-brand-secondary-hover: oklch(0.7 0.16 50); /** Brand secondary — hover */
+  --color-brand-secondary-active: oklch(0.65 0.17 50); /** Brand secondary — active / pressed */
+  --color-brand-secondary-subtle: oklch(0.95 0.05 50); /** Brand secondary — subtle tint surface */
+  --color-semantic-success: oklch(0.72 0.16 155); /** Semantic success (base) */
+  --color-semantic-success-hover: oklch(0.67 0.17 155); /** Semantic success — hover */
+  --color-semantic-success-active: oklch(0.62 0.18 155); /** Semantic success — active */
+  --color-semantic-success-subtle: oklch(0.95 0.04 155); /** Semantic success — subtle surface */
+  --color-semantic-success-text: oklch(0.38 0.1 155); /** Semantic success — text on tinted bg */
+  --color-semantic-warning: oklch(0.82 0.14 70); /** Semantic warning (base) */
+  --color-semantic-warning-hover: oklch(0.77 0.15 70); /** Semantic warning — hover */
+  --color-semantic-warning-active: oklch(0.72 0.16 70); /** Semantic warning — active */
+  --color-semantic-warning-subtle: oklch(0.96 0.05 70); /** Semantic warning — subtle surface */
+  --color-semantic-warning-text: oklch(0.42 0.11 70); /** Semantic warning — text on tinted bg */
+  --color-semantic-error: oklch(0.65 0.18 15); /** Semantic error (base) */
+  --color-semantic-error-hover: oklch(0.6 0.19 15); /** Semantic error — hover */
+  --color-semantic-error-active: oklch(0.55 0.2 15); /** Semantic error — active */
+  --color-semantic-error-subtle: oklch(0.95 0.04 15); /** Semantic error — subtle surface */
+  --color-semantic-error-text: oklch(0.4 0.13 15); /** Semantic error — text on tinted bg */
+  --color-semantic-info: oklch(0.68 0.13 250); /** Semantic info (base) */
+  --color-semantic-info-hover: oklch(0.63 0.14 250); /** Semantic info — hover */
+  --color-semantic-info-active: oklch(0.58 0.15 250); /** Semantic info — active */
+  --color-semantic-info-subtle: oklch(0.95 0.03 250); /** Semantic info — subtle surface */
+  --color-semantic-info-text: oklch(0.38 0.11 250); /** Semantic info — text on tinted bg */
+  --color-surface-bg-base: oklch(0.98 0.005 230); /** Root background — page canvas */
+  --color-surface-bg-subtle: oklch(0.96 0.008 230); /** Subtle background — panels, sections */
+  --color-surface-bg-emphasis: oklch(0.88 0.015 230); /** Emphasized background — highlighted regions */
+  --color-surface-surface: oklch(1 0 0); /** Card / modal / elevated container surface */
+  --color-surface-border: oklch(0.86 0.012 230); /** Default border / divider */
+  --color-surface-border-subtle: oklch(0.91 0.008 230); /** Subtle border — quiet separators */
+  --color-text-primary: oklch(0.18 0.02 240); /** Primary foreground text */
+  --color-text-secondary: oklch(0.38 0.02 240); /** Secondary text — supporting copy */
+  --color-text-tertiary: oklch(0.52 0.01 240); /** Tertiary text — captions, hints */
+  --color-text-disabled: oklch(0.68 0.01 240); /** Disabled text */
+  --color-text-inverse: oklch(0.98 0 0); /** Inverse text — on dark surfaces */
+  --color-shadow-base: oklch(0.2 0.02 240 / 0.1); /** Shadow tint — default */
+  --color-shadow-strong: oklch(0.2 0.02 240 / 0.18); /** Shadow tint — strong */
+  --color-focus-ring-color: oklch(0.42 0.16 230); /** Focus ring color — outer 2px solid ring (sora-light、 brand 同 hue + luminance DOWN で AAA contrast on light bg) */
+  --color-focus-ring-halo: oklch(0.42 0.16 230 / 0.18); /** Focus halo — inner 4px subtle bg tint、 ring を 「包む glow」 として演出 */
+  --color-gradient-hero: linear-gradient(135deg, oklch(0.9 0.06 230) 0%, oklch(0.92 0.04 245) 50%, oklch(0.88 0.08 220) 100%); /** Hero gradient — marketing / splash surfaces */
+}
+
+/* fleetstage / legacy 後方互換 */
+.dark,
+[data-theme="dark"] {
+  --color-brand-primary: oklch(0.75 0.12 160); /** Brand primary (base) */
+  --color-brand-primary-hover: oklch(0.8 0.13 160); /** Brand primary — hover */
+  --color-brand-primary-active: oklch(0.7 0.11 160); /** Brand primary — active / pressed */
+  --color-brand-primary-subtle: oklch(0.25 0.05 160); /** Brand primary — subtle tint surface */
+  --color-brand-secondary: oklch(0.7 0.12 300); /** Brand secondary (base) */
+  --color-brand-secondary-hover: oklch(0.75 0.13 300); /** Brand secondary — hover */
+  --color-brand-secondary-active: oklch(0.65 0.11 300); /** Brand secondary — active / pressed */
+  --color-brand-secondary-subtle: oklch(0.25 0.05 300); /** Brand secondary — subtle tint surface */
+  --color-semantic-success: oklch(0.7 0.15 145); /** Semantic success (base) */
+  --color-semantic-success-hover: oklch(0.75 0.16 145); /** Semantic success — hover */
+  --color-semantic-success-active: oklch(0.65 0.14 145); /** Semantic success — active */
+  --color-semantic-success-subtle: oklch(0.25 0.06 145); /** Semantic success — subtle surface */
+  --color-semantic-success-text: oklch(0.8 0.12 145); /** Semantic success — text on tinted bg */
+  --color-semantic-warning: oklch(0.75 0.14 85); /** Semantic warning (base) */
+  --color-semantic-warning-hover: oklch(0.8 0.15 85); /** Semantic warning — hover */
+  --color-semantic-warning-active: oklch(0.7 0.13 85); /** Semantic warning — active */
+  --color-semantic-warning-subtle: oklch(0.25 0.06 85); /** Semantic warning — subtle surface */
+  --color-semantic-warning-text: oklch(0.85 0.1 85); /** Semantic warning — text on tinted bg */
+  --color-semantic-error: oklch(0.7 0.18 25); /** Semantic error (base) */
+  --color-semantic-error-hover: oklch(0.75 0.19 25); /** Semantic error — hover */
+  --color-semantic-error-active: oklch(0.65 0.17 25); /** Semantic error — active */
+  --color-semantic-error-subtle: oklch(0.25 0.06 25); /** Semantic error — subtle surface */
+  --color-semantic-error-text: oklch(0.85 0.12 25); /** Semantic error — text on tinted bg */
+  --color-semantic-info: oklch(0.7 0.12 240); /** Semantic info (base) */
+  --color-semantic-info-hover: oklch(0.75 0.13 240); /** Semantic info — hover */
+  --color-semantic-info-active: oklch(0.65 0.11 240); /** Semantic info — active */
+  --color-semantic-info-subtle: oklch(0.25 0.05 240); /** Semantic info — subtle surface */
+  --color-semantic-info-text: oklch(0.85 0.1 240); /** Semantic info — text on tinted bg */
+  --color-surface-bg-base: oklch(0.15 0.02 260); /** Root background — page canvas */
+  --color-surface-bg-subtle: oklch(0.18 0.02 260); /** Subtle background — panels, sections */
+  --color-surface-bg-emphasis: oklch(0.28 0.02 260); /** Emphasized background — highlighted regions */
+  --color-surface-surface: oklch(0.2 0.02 260); /** Card / modal / elevated container surface */
+  --color-surface-border: oklch(0.3 0.02 260); /** Default border / divider */
+  --color-surface-border-subtle: oklch(0.25 0.015 260); /** Subtle border — quiet separators */
+  --color-text-primary: oklch(0.95 0.01 260); /** Primary foreground text */
+  --color-text-secondary: oklch(0.75 0.01 260); /** Secondary text — supporting copy */
+  --color-text-tertiary: oklch(0.6 0.01 260); /** Tertiary text — captions, hints */
+  --color-text-disabled: oklch(0.45 0.01 260); /** Disabled text */
+  --color-text-inverse: oklch(0.15 0.02 260); /** Inverse text — on dark surfaces */
+  --color-shadow-base: oklch(0 0 0 / 0.3); /** Shadow tint — default */
+  --color-shadow-strong: oklch(0 0 0 / 0.5); /** Shadow tint — strong */
+  --color-gradient-hero: linear-gradient(135deg, oklch(0.2 0.04 160) 0%, oklch(0.18 0.03 175) 50%, oklch(0.22 0.05 165) 100%); /** Hero gradient — marketing / splash surfaces */
+  --color-focus-ring-color: oklch(0.85 0.14 160); /** Focus ring color — outer 2px solid ring (mint-dark、 brand 同 hue + luminance UP で AAA contrast 確保) */
+  --color-focus-ring-halo: oklch(0.85 0.14 160 / 0.18); /** Focus halo — inner 4px subtle bg tint、 ring を 「包む glow」 として演出 */
+}
+
+[data-theme="light"] {
+  --color-brand-primary: oklch(0.85 0.14 160); /** Brand primary (base) */
+  --color-brand-primary-hover: oklch(0.8 0.15 160); /** Brand primary — hover */
+  --color-brand-primary-active: oklch(0.75 0.16 160); /** Brand primary — active / pressed */
+  --color-brand-primary-subtle: oklch(0.95 0.05 160); /** Brand primary — subtle tint surface */
+  --color-brand-secondary: oklch(0.65 0.15 300); /** Brand secondary (base) */
+  --color-brand-secondary-hover: oklch(0.6 0.16 300); /** Brand secondary — hover */
+  --color-brand-secondary-active: oklch(0.55 0.17 300); /** Brand secondary — active / pressed */
+  --color-brand-secondary-subtle: oklch(0.95 0.05 300); /** Brand secondary — subtle tint surface */
+  --color-semantic-success: oklch(0.75 0.18 145); /** Semantic success (base) */
+  --color-semantic-success-hover: oklch(0.7 0.19 145); /** Semantic success — hover */
+  --color-semantic-success-active: oklch(0.65 0.2 145); /** Semantic success — active */
+  --color-semantic-success-subtle: oklch(0.95 0.05 145); /** Semantic success — subtle surface */
+  --color-semantic-success-text: oklch(0.35 0.12 145); /** Semantic success — text on tinted bg */
+  --color-semantic-warning: oklch(0.8 0.16 85); /** Semantic warning (base) */
+  --color-semantic-warning-hover: oklch(0.75 0.17 85); /** Semantic warning — hover */
+  --color-semantic-warning-active: oklch(0.7 0.18 85); /** Semantic warning — active */
+  --color-semantic-warning-subtle: oklch(0.95 0.06 85); /** Semantic warning — subtle surface */
+  --color-semantic-warning-text: oklch(0.4 0.12 85); /** Semantic warning — text on tinted bg */
+  --color-semantic-error: oklch(0.65 0.2 25); /** Semantic error (base) */
+  --color-semantic-error-hover: oklch(0.6 0.21 25); /** Semantic error — hover */
+  --color-semantic-error-active: oklch(0.55 0.22 25); /** Semantic error — active */
+  --color-semantic-error-subtle: oklch(0.95 0.05 25); /** Semantic error — subtle surface */
+  --color-semantic-error-text: oklch(0.4 0.15 25); /** Semantic error — text on tinted bg */
+  --color-semantic-info: oklch(0.7 0.15 240); /** Semantic info (base) */
+  --color-semantic-info-hover: oklch(0.65 0.16 240); /** Semantic info — hover */
+  --color-semantic-info-active: oklch(0.6 0.17 240); /** Semantic info — active */
+  --color-semantic-info-subtle: oklch(0.95 0.04 240); /** Semantic info — subtle surface */
+  --color-semantic-info-text: oklch(0.4 0.12 240); /** Semantic info — text on tinted bg */
+  --color-surface-bg-base: oklch(0.99 0 0); /** Root background — page canvas */
+  --color-surface-bg-subtle: oklch(0.97 0.005 260); /** Subtle background — panels, sections */
+  --color-surface-bg-emphasis: oklch(0.9 0.01 260); /** Emphasized background — highlighted regions */
+  --color-surface-surface: oklch(1 0 0); /** Card / modal / elevated container surface */
+  --color-surface-border: oklch(0.88 0.01 260); /** Default border / divider */
+  --color-surface-border-subtle: oklch(0.92 0.005 260); /** Subtle border — quiet separators */
+  --color-text-primary: oklch(0.2 0.02 260); /** Primary foreground text */
+  --color-text-secondary: oklch(0.4 0.02 260); /** Secondary text — supporting copy */
+  --color-text-tertiary: oklch(0.55 0.01 260); /** Tertiary text — captions, hints */
+  --color-text-disabled: oklch(0.7 0.01 260); /** Disabled text */
+  --color-text-inverse: oklch(0.98 0 0); /** Inverse text — on dark surfaces */
+  --color-shadow-base: oklch(0.2 0.02 260 / 0.08); /** Shadow tint — default */
+  --color-shadow-strong: oklch(0.2 0.02 260 / 0.15); /** Shadow tint — strong */
+  --color-focus-ring-color: oklch(0.45 0.16 160); /** Focus ring color — outer 2px solid ring (mint-light、 brand 同 hue + luminance DOWN で AAA contrast on light bg) */
+  --color-focus-ring-halo: oklch(0.45 0.16 160 / 0.18); /** Focus halo — inner 4px subtle bg tint、 ring を 「包む glow」 として演出 */
+  --color-gradient-hero: linear-gradient(135deg, oklch(0.92 0.08 160) 0%, oklch(0.94 0.06 175) 50%, oklch(0.9 0.1 165) 100%); /** Hero gradient — marketing / splash surfaces */
+}
+
+/* system が light preference で [data-theme] 未指定なら mint-light に逆転 */
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]):not(.dark):not([data-theme="mint-dark"]) {
+    --color-brand-primary: oklch(0.85 0.14 160); /** Brand primary (base) */
+    --color-brand-primary-hover: oklch(0.8 0.15 160); /** Brand primary — hover */
+    --color-brand-primary-active: oklch(0.75 0.16 160); /** Brand primary — active / pressed */
+    --color-brand-primary-subtle: oklch(0.95 0.05 160); /** Brand primary — subtle tint surface */
+    --color-brand-secondary: oklch(0.65 0.15 300); /** Brand secondary (base) */
+    --color-brand-secondary-hover: oklch(0.6 0.16 300); /** Brand secondary — hover */
+    --color-brand-secondary-active: oklch(0.55 0.17 300); /** Brand secondary — active / pressed */
+    --color-brand-secondary-subtle: oklch(0.95 0.05 300); /** Brand secondary — subtle tint surface */
+    --color-semantic-success: oklch(0.75 0.18 145); /** Semantic success (base) */
+    --color-semantic-success-hover: oklch(0.7 0.19 145); /** Semantic success — hover */
+    --color-semantic-success-active: oklch(0.65 0.2 145); /** Semantic success — active */
+    --color-semantic-success-subtle: oklch(0.95 0.05 145); /** Semantic success — subtle surface */
+    --color-semantic-success-text: oklch(0.35 0.12 145); /** Semantic success — text on tinted bg */
+    --color-semantic-warning: oklch(0.8 0.16 85); /** Semantic warning (base) */
+    --color-semantic-warning-hover: oklch(0.75 0.17 85); /** Semantic warning — hover */
+    --color-semantic-warning-active: oklch(0.7 0.18 85); /** Semantic warning — active */
+    --color-semantic-warning-subtle: oklch(0.95 0.06 85); /** Semantic warning — subtle surface */
+    --color-semantic-warning-text: oklch(0.4 0.12 85); /** Semantic warning — text on tinted bg */
+    --color-semantic-error: oklch(0.65 0.2 25); /** Semantic error (base) */
+    --color-semantic-error-hover: oklch(0.6 0.21 25); /** Semantic error — hover */
+    --color-semantic-error-active: oklch(0.55 0.22 25); /** Semantic error — active */
+    --color-semantic-error-subtle: oklch(0.95 0.05 25); /** Semantic error — subtle surface */
+    --color-semantic-error-text: oklch(0.4 0.15 25); /** Semantic error — text on tinted bg */
+    --color-semantic-info: oklch(0.7 0.15 240); /** Semantic info (base) */
+    --color-semantic-info-hover: oklch(0.65 0.16 240); /** Semantic info — hover */
+    --color-semantic-info-active: oklch(0.6 0.17 240); /** Semantic info — active */
+    --color-semantic-info-subtle: oklch(0.95 0.04 240); /** Semantic info — subtle surface */
+    --color-semantic-info-text: oklch(0.4 0.12 240); /** Semantic info — text on tinted bg */
+    --color-surface-bg-base: oklch(0.99 0 0); /** Root background — page canvas */
+    --color-surface-bg-subtle: oklch(0.97 0.005 260); /** Subtle background — panels, sections */
+    --color-surface-bg-emphasis: oklch(0.9 0.01 260); /** Emphasized background — highlighted regions */
+    --color-surface-surface: oklch(1 0 0); /** Card / modal / elevated container surface */
+    --color-surface-border: oklch(0.88 0.01 260); /** Default border / divider */
+    --color-surface-border-subtle: oklch(0.92 0.005 260); /** Subtle border — quiet separators */
+    --color-text-primary: oklch(0.2 0.02 260); /** Primary foreground text */
+    --color-text-secondary: oklch(0.4 0.02 260); /** Secondary text — supporting copy */
+    --color-text-tertiary: oklch(0.55 0.01 260); /** Tertiary text — captions, hints */
+    --color-text-disabled: oklch(0.7 0.01 260); /** Disabled text */
+    --color-text-inverse: oklch(0.98 0 0); /** Inverse text — on dark surfaces */
+    --color-shadow-base: oklch(0.2 0.02 260 / 0.08); /** Shadow tint — default */
+    --color-shadow-strong: oklch(0.2 0.02 260 / 0.15); /** Shadow tint — strong */
+    --color-focus-ring-color: oklch(0.45 0.16 160); /** Focus ring color — outer 2px solid ring (mint-light、 brand 同 hue + luminance DOWN で AAA contrast on light bg) */
+    --color-focus-ring-halo: oklch(0.45 0.16 160 / 0.18); /** Focus halo — inner 4px subtle bg tint、 ring を 「包む glow」 として演出 */
+    --color-gradient-hero: linear-gradient(135deg, oklch(0.92 0.08 160) 0%, oklch(0.94 0.06 175) 50%, oklch(0.9 0.1 165) 100%); /** Hero gradient — marketing / splash surfaces */
+  }
+}