@cakejp/design-system 0.3.0

package/src/preset.css

@@ -0,0 +1,288 @@
+/* ============================================
+ * Cake.jp Design System — Preset
+ * ============================================
+ *
+ * 消費者側の CSS にこの 1 行を追加するだけで、
+ * トークン・タイポグラフィ・テーマ設定が全て有効になる。
+ *
+ * 使い方:
+ *   @import "tailwindcss";
+ *   @import "@cakejp/design-system/preset";
+ *
+ * これで以下が有効になる:
+ *   - Primitive カラートークン（--Primitive-*）
+ *   - Semantic カラートークン（--Text-*, --Surface-*, --Border-* 等）
+ *   - ダークモード自動切替（.dark クラス）
+ *   - typo-* タイポグラフィユーティリティ
+ *   - shadcn bridge トークン（--primary, --foreground 等）
+ *   - Tailwind 標準色 → Cake.jp マッピング（bg-red-600 等）
+ *   - シャドウ・角丸トークン
+ *   - アニメーションユーティリティ
+ * ============================================ */
+
+/* --- Layer 1: Primitive Colors --- */
+@import "./styles/primitive.css";
+
+/* --- Layer 2: Semantic Colors (+ dark mode) --- */
+@import "./styles/semantic.css";
+
+/* --- Layer 3: Typography Utilities --- */
+@import "./styles/typography.css";
+
+/* --- Dark mode variant --- */
+@custom-variant dark (&:is(.dark *));
+
+/* --- Theme: Tailwind integration --- */
+@theme inline {
+  /* Radius */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+
+  /* shadcn → Tailwind color bridge */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Tailwind 標準色 → Cake.jp Primitive マッピング */
+  --color-red-50: var(--Primitive-Sun-50);
+  --color-red-100: var(--Primitive-Sun-100);
+  --color-red-200: var(--Primitive-Sun-200);
+  --color-red-300: var(--Primitive-Sun-300);
+  --color-red-400: var(--Primitive-Sun-400);
+  --color-red-500: var(--Primitive-Sun-500);
+  --color-red-600: var(--Primitive-Sun-600);
+  --color-red-700: var(--Primitive-Sun-700);
+  --color-red-800: var(--Primitive-Sun-800);
+  --color-red-900: var(--Primitive-Sun-900);
+
+  --color-orange-50: var(--Primitive-Orange-50);
+  --color-orange-100: var(--Primitive-Orange-100);
+  --color-orange-200: var(--Primitive-Orange-200);
+  --color-orange-300: var(--Primitive-Orange-300);
+  --color-orange-400: var(--Primitive-Orange-400);
+  --color-orange-500: var(--Primitive-Orange-500);
+  --color-orange-600: var(--Primitive-Orange-600);
+  --color-orange-700: var(--Primitive-Orange-700);
+  --color-orange-800: var(--Primitive-Orange-800);
+  --color-orange-900: var(--Primitive-Orange-900);
+
+  --color-amber-50: var(--Primitive-Wood-50);
+  --color-amber-100: var(--Primitive-Wood-100);
+  --color-amber-200: var(--Primitive-Wood-200);
+  --color-amber-300: var(--Primitive-Wood-300);
+  --color-amber-400: var(--Primitive-Wood-400);
+  --color-amber-500: var(--Primitive-Wood-500);
+  --color-amber-600: var(--Primitive-Wood-600);
+  --color-amber-700: var(--Primitive-Wood-700);
+  --color-amber-800: var(--Primitive-Wood-800);
+  --color-amber-900: var(--Primitive-Wood-900);
+
+  --color-green-50: var(--Primitive-Forest-50);
+  --color-green-100: var(--Primitive-Forest-100);
+  --color-green-200: var(--Primitive-Forest-200);
+  --color-green-300: var(--Primitive-Forest-300);
+  --color-green-400: var(--Primitive-Forest-400);
+  --color-green-500: var(--Primitive-Forest-500);
+  --color-green-600: var(--Primitive-Forest-600);
+  --color-green-700: var(--Primitive-Forest-700);
+  --color-green-800: var(--Primitive-Forest-800);
+  --color-green-900: var(--Primitive-Forest-900);
+
+  --color-teal-50: var(--Primitive-Teal-50);
+  --color-teal-100: var(--Primitive-Teal-100);
+  --color-teal-200: var(--Primitive-Teal-200);
+  --color-teal-300: var(--Primitive-Teal-300);
+  --color-teal-400: var(--Primitive-Teal-400);
+  --color-teal-500: var(--Primitive-Teal-500);
+  --color-teal-600: var(--Primitive-Teal-600);
+  --color-teal-700: var(--Primitive-Teal-700);
+  --color-teal-800: var(--Primitive-Teal-800);
+  --color-teal-900: var(--Primitive-Teal-900);
+
+  --color-blue-50: var(--Primitive-Sea-50);
+  --color-blue-100: var(--Primitive-Sea-100);
+  --color-blue-200: var(--Primitive-Sea-200);
+  --color-blue-300: var(--Primitive-Sea-300);
+  --color-blue-400: var(--Primitive-Sea-400);
+  --color-blue-500: var(--Primitive-Sea-500);
+  --color-blue-600: var(--Primitive-Sea-600);
+  --color-blue-700: var(--Primitive-Sea-700);
+  --color-blue-800: var(--Primitive-Sea-800);
+  --color-blue-900: var(--Primitive-Sea-900);
+
+  --color-pink-50: var(--Primitive-Berry-50);
+  --color-pink-100: var(--Primitive-Berry-100);
+  --color-pink-200: var(--Primitive-Berry-200);
+  --color-pink-300: var(--Primitive-Berry-300);
+  --color-pink-400: var(--Primitive-Berry-400);
+  --color-pink-500: var(--Primitive-Berry-500);
+  --color-pink-600: var(--Primitive-Berry-600);
+  --color-pink-700: var(--Primitive-Berry-700);
+  --color-pink-800: var(--Primitive-Berry-800);
+  --color-pink-900: var(--Primitive-Berry-900);
+
+  --color-gray-50: var(--Primitive-Gray-50);
+  --color-gray-100: var(--Primitive-Gray-100);
+  --color-gray-200: var(--Primitive-Gray-200);
+  --color-gray-300: var(--Primitive-Gray-300);
+  --color-gray-400: var(--Primitive-Gray-400);
+  --color-gray-500: var(--Primitive-Gray-500);
+  --color-gray-600: var(--Primitive-Gray-600);
+  --color-gray-700: var(--Primitive-Gray-700);
+  --color-gray-800: var(--Primitive-Gray-800);
+  --color-gray-900: var(--Primitive-Gray-900);
+
+  /* Shadow tokens */
+  --shadow-md: 0px 7px 7px 0px rgba(0, 0, 0, 0.07), 0px 2px 16px 0px rgba(0, 0, 0, 0.12);
+  --shadow-lg: 0px 12px 32px -4px rgba(24, 39, 75, 0.12), 0px 8px 16px -6px rgba(24, 39, 75, 0.12), 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
+  --shadow-menu: var(--shadow-md);
+  --shadow-tooltip: 0px 8px 8px -4px rgba(24, 39, 75, 0.08), 0px 4px 6px -4px rgba(24, 39, 75, 0.12);
+  --shadow-dialog: var(--shadow-lg);
+  --shadow-modal: var(--shadow-lg);
+  --shadow-overlay: 0 24px 80px rgba(24, 39, 75, 0.16);  /* ドロワー・フルスクリーンパネル */
+
+  /* Gradient tokens */
+  --Gradient-Warm-Footer: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 244, 236, 0.96));
+  --Gradient-Warm-Drawer: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 244, 236, 0.98));
+}
+
+/* --- Bridge: Semantic → shadcn tokens --- */
+:root {
+  /* Spacing tokens from tokens.json scale */
+  --spacing-1: 0.25rem;   /* 4px - scale 1 */
+  --spacing-2: 0.5rem;    /* 8px - scale 2 */
+  --spacing-3: 0.75rem;   /* 12px - scale 3 */
+  --spacing-4: 1rem;      /* 16px - scale 4 */
+  --spacing-5: 1.25rem;   /* 20px - interpolated */
+  --spacing-6: 1.5rem;    /* 24px - scale 6 */
+
+  --radius: 0.625rem;
+
+  --background: var(--Surface-Primary);
+  --foreground: var(--Text-High-Emphasis);
+  --card: var(--Surface-Secondary);
+  --card-foreground: var(--Text-High-Emphasis);
+  --popover: var(--Surface-Primary);
+  --popover-foreground: var(--Text-High-Emphasis);
+  --primary: var(--Brand-Cake-Orange);
+  --primary-foreground: var(--Text-on-Inverse);
+  --secondary: var(--Surface-Secondary);
+  --secondary-foreground: var(--Text-Medium-Emphasis);
+  --muted: var(--Surface-Tertiary);
+  --muted-foreground: var(--Text-Low-Emphasis);
+  --accent: var(--Surface-Secondary);
+  --accent-foreground: var(--Text-High-Emphasis);
+  --destructive: var(--Object-Caution);
+  --border: var(--Border-Medium-Emphasis);
+  --input: var(--Border-Medium-Emphasis);
+  --ring: var(--Focus-High-Emphasis);
+
+  --chart-1: var(--Primitive-Sea-600);
+  --chart-2: var(--Primitive-Berry-600);
+  --chart-3: var(--Primitive-Teal-600);
+  --chart-4: var(--Primitive-Wood-600);
+  --chart-5: var(--Primitive-Forest-600);
+
+  --sidebar: var(--Surface-Primary);
+  --sidebar-foreground: var(--Text-High-Emphasis);
+  --sidebar-primary: var(--Brand-Cake-Orange);
+  --sidebar-primary-foreground: var(--Text-on-Inverse);
+  --sidebar-accent: var(--Object-Accent-Primary);
+  --sidebar-accent-foreground: var(--Object-High-Emphasis-on-Inverse);
+  --sidebar-border: var(--Border-Low-Emphasis);
+  --sidebar-ring: var(--Overlay-Medium);
+}
+
+.dark {
+  --background: var(--Surface-Primary);
+  --foreground: var(--Text-High-Emphasis);
+  --card: var(--Surface-Secondary);
+  --card-foreground: var(--Text-High-Emphasis);
+  --popover: var(--Surface-Primary);
+  --popover-foreground: var(--Text-High-Emphasis);
+  --primary: var(--Brand-Cake-Orange);
+  --primary-foreground: var(--Text-on-Inverse);
+  --secondary: var(--Surface-Tertiary);
+  --secondary-foreground: var(--Text-Medium-Emphasis);
+  --muted: var(--Surface-Tertiary);
+  --muted-foreground: var(--Text-Low-Emphasis);
+  --accent: var(--Surface-Secondary);
+  --accent-foreground: var(--Text-High-Emphasis);
+  --destructive: var(--Object-Caution);
+  --border: var(--Border-Medium-Emphasis);
+  --input: var(--Border-Medium-Emphasis);
+  --ring: var(--Focus-High-Emphasis);
+  --chart-1: var(--Primitive-Sea-600);
+  --chart-2: var(--Primitive-Berry-600);
+  --chart-3: var(--Primitive-Teal-600);
+  --chart-4: var(--Primitive-Wood-600);
+  --chart-5: var(--Primitive-Forest-600);
+  --sidebar: var(--Surface-Primary);
+  --sidebar-foreground: var(--Text-High-Emphasis);
+  --sidebar-primary: var(--Brand-Cake-Orange);
+  --sidebar-primary-foreground: var(--Text-on-Inverse);
+  --sidebar-accent: var(--Object-Accent-Primary);
+  --sidebar-accent-foreground: var(--Object-High-Emphasis-on-Inverse);
+  --sidebar-border: var(--Border-Low-Emphasis);
+  --sidebar-ring: var(--Overlay-Medium);
+}
+
+/* --- Animations --- */
+@keyframes slide-in-right {
+  from { transform: translateX(30%); opacity: 0; }
+  to   { transform: translateX(0);   opacity: 1; }
+}
+@keyframes slide-in-left {
+  from { transform: translateX(-30%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+}
+
+@utility animate-slide-in-right {
+  animation: slide-in-right 200ms ease-out;
+}
+@utility animate-slide-in-left {
+  animation: slide-in-left 200ms ease-out;
+}
+
+/* --- Base layer --- */
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/styles/primitive.css

@@ -0,0 +1,139 @@
+/**
+ * Cake.jp Design System カラーパレット
+ *
+ * Figma Plugin: Export Variables (CSS/SCSS/Tailwind) を使い、CSS HEXコードでエクスポート。
+ * https://www.figma.com/community/plugin/1382804904426179542/export-variables-css-scss-tailwind
+ */
+@theme {
+  /* Orange */
+  --Primitive-Orange-50: #FFECD9FF;
+  --Primitive-Orange-100: #FFD4B2FF;
+  --Primitive-Orange-200: #FFBA84FF;
+  --Primitive-Orange-300: #FFA66BFF;
+  --Primitive-Orange-400: #FF8E4CFF;
+  --Primitive-Orange-500: #F97732FF;
+  --Primitive-Orange-600: #F16311FF;
+  --Primitive-Orange-700: #E04B00FF; /* primary */
+  --Primitive-Orange-800: #BD3200FF;
+  --Primitive-Orange-900: #A62700FF;
+
+  /* Gray */
+  --Primitive-Gray-50: #FBF9F8FF;
+  --Primitive-Gray-100: #F4F2F1FF;
+  --Primitive-Gray-200: #EBE9E8FF;
+  --Primitive-Gray-300: #DBD9D8FF;
+  --Primitive-Gray-400: #B7B5B4FF;
+  --Primitive-Gray-500: #979594FF;
+  --Primitive-Gray-600: #787675FF;
+  --Primitive-Gray-700: #575352FF;
+  --Primitive-Gray-800: #3A3736FF;
+  --Primitive-Gray-900: #1C1A1AFF;
+
+  /* Forest */
+  --Primitive-Forest-50: #E6F5ECFF;
+  --Primitive-Forest-100: #C2E5D1FF;
+  --Primitive-Forest-200: #9BD4B5FF;
+  --Primitive-Forest-300: #71C598FF;
+  --Primitive-Forest-400: #51B883FF;
+  --Primitive-Forest-500: #2CAC6EFF;
+  --Primitive-Forest-600: #259D63FF;
+  --Primitive-Forest-700: #1D8B56FF;
+  --Primitive-Forest-800: #197A4BFF; /* primary */
+  --Primitive-Forest-900: #115A36FF;
+
+  /* Sun */
+  --Primitive-Sun-50: #FFE7E6FF;
+  --Primitive-Sun-100: #FFC8B8FF;
+  --Primitive-Sun-200: #FFA28BFF;
+  --Primitive-Sun-300: #FF7B5CFF;
+  --Primitive-Sun-400: #FF5838FF;
+  --Primitive-Sun-500: #FF4B36FF;
+  --Primitive-Sun-600: #FF220DFF;
+  --Primitive-Sun-700: #FA1606FF;
+  --Primitive-Sun-800: #EC0000FF; /* primary */
+  --Primitive-Sun-900: #D50000FF;
+
+  /* Teal */
+  --Primitive-Teal-50: #F0FCF8FF;
+  --Primitive-Teal-100: #D0F6E9FF;
+  --Primitive-Teal-200: #ACEED8FF;
+  --Primitive-Teal-300: #81E6C4FF;
+  --Primitive-Teal-400: #59D9AEFF;
+  --Primitive-Teal-500: #51C79FFF;
+  --Primitive-Teal-600: #49B18EFF;
+  --Primitive-Teal-700: #3E987AFF;
+  --Primitive-Teal-800: #317860FF; /* primary */
+  --Primitive-Teal-900: #1D4739FF;
+
+  /* Sea */
+  --Primitive-Sea-50: #E8F1FEFF;
+  --Primitive-Sea-100: #C5D7FBFF;
+  --Primitive-Sea-200: #9DB7F9FF;
+  --Primitive-Sea-300: #7096F8FF;
+  --Primitive-Sea-400: #4979F5FF;
+  --Primitive-Sea-500: #295FF3FF;
+  --Primitive-Sea-600: #003EE5FF; /* primary */
+  --Primitive-Sea-700: #0031D8FF;
+  --Primitive-Sea-800: #0024CEFF;
+  --Primitive-Sea-900: #0017B6FF;
+
+  /* Wood */
+  --Primitive-Wood-50: #F8F1E0FF;
+  --Primitive-Wood-100: #EFDBB1FF;
+  --Primitive-Wood-200: #E5C47FFF;
+  --Primitive-Wood-300: #DCAC4DFF;
+  --Primitive-Wood-400: #D69C2BFF;
+  --Primitive-Wood-500: #D18D0FFF;
+  --Primitive-Wood-600: #CD820AFF;
+  --Primitive-Wood-700: #C87504FF;
+  --Primitive-Wood-800: #C16800FF; /* primary */
+  --Primitive-Wood-900: #B65200FF;
+
+  /* Berry */
+  --Primitive-Berry-50: #FBD4E0FF;
+  --Primitive-Berry-100: #F7B1C8FF;
+  --Primitive-Berry-200: #F491B2FF;
+  --Primitive-Berry-300: #F1749EFF;
+  --Primitive-Berry-400: #EE598BFF;
+  --Primitive-Berry-500: #EC407AFF;
+  --Primitive-Berry-600: #EA296AFF;
+  --Primitive-Berry-700: #E5175CFF; /* primary */
+  --Primitive-Berry-800: #B5175CFF;
+  --Primitive-Berry-900: #9E103FFF;
+
+  /* Black */
+  --Primitive-Black-2-1000: #000000FF;
+}
+
+/*
+ * Alpha 変数は :root に直接定義する。
+ * semantic.css で参照されていないシェードが Tailwind CSS v4 の
+ * tree-shaking で除去されるのを防ぐため。
+ */
+:root {
+  /* Gray alpha */
+  --Primitive-Gray-alpha-50: #0000000D;
+  --Primitive-Gray-alpha-100: #0000001A;
+  --Primitive-Gray-alpha-200: #00000033;
+  --Primitive-Gray-alpha-300: #0000004D;
+  --Primitive-Gray-alpha-400: #00000066;
+  --Primitive-Gray-alpha-500: #00000080;
+  --Primitive-Gray-alpha-600: #00000099;
+  --Primitive-Gray-alpha-700: #000000B2;
+  --Primitive-Gray-alpha-800: #000000CC;
+  --Primitive-Gray-alpha-900: #000000E5;
+  --Primitive-Gray-alpha-1000: #000000FF;
+
+  /* White alpha */
+  --Primitive-White-alpha-50: #FFFFFF0D;
+  --Primitive-White-alpha-100: #FFFFFF1A;
+  --Primitive-White-alpha-200: #FFFFFF33;
+  --Primitive-White-alpha-300: #FFFFFF4D;
+  --Primitive-White-alpha-400: #FFFFFF66;
+  --Primitive-White-alpha-500: #FFFFFF80;
+  --Primitive-White-alpha-600: #FFFFFF99;
+  --Primitive-White-alpha-700: #FFFFFFB2;
+  --Primitive-White-alpha-800: #FFFFFFCC;
+  --Primitive-White-alpha-900: #FFFFFFE5;
+  --Primitive-White-alpha-1000: #FFFFFFFF;
+}

package/src/styles/semantic.css

@@ -0,0 +1,203 @@
+/**
+ * Cake.jp Design System セマンティックカラー
+ *
+ * Primitive を参照して割り当て。
+ * Surface / Text / Object / Hover / Active / Border / Brand / Overlay
+ *
+ * Light / Dark の両モードを定義。
+ * Figma Variables の Light.tokens.json / Dark.tokens.json と完全一致。
+ */
+@theme inline {
+  /* ============================================
+   * Light Mode（デフォルト）
+   * ============================================ */
+
+  /* Surface */
+  --Surface-Primary: var(--Primitive-White-alpha-1000);
+  --Surface-Secondary: var(--Primitive-Gray-50);
+  --Surface-Tertiary: var(--Primitive-Gray-100);
+  --Surface-Caution: var(--Primitive-Sun-800);
+  --Surface-Caution-Light: var(--Primitive-Sun-50);
+  --Surface-Accent-Primary: var(--Primitive-Orange-700);
+  --Surface-Accent-Primary-Light: var(--Primitive-Orange-50);
+  --Surface-Success: var(--Primitive-Forest-600);
+  --Surface-Warning: var(--Primitive-Wood-50);
+  --Surface-Info: var(--Primitive-Sea-600);
+  --Surface-Info-Light: var(--Primitive-Sea-50);
+
+  /* Text */
+  --Text-High-Emphasis: var(--Primitive-Gray-900);
+  --Text-Medium-Emphasis: var(--Primitive-Gray-700);
+  --Text-Low-Emphasis: var(--Primitive-Gray-600);
+  --Text-Disable: var(--Primitive-Gray-400);
+  --Text-Accent-Primary: var(--Brand-Cake-Orange);
+  --Text-Accent-Secondary: var(--Primitive-Orange-200);
+  --Text-on-Inverse: var(--Primitive-White-alpha-1000);
+  --Text-Success: var(--Primitive-Forest-600);
+  --Text-Caution: var(--Primitive-Sun-800);
+  --Text-Warning: var(--Primitive-Wood-800);
+  --Text-Info: var(--Primitive-Sea-600);
+
+  /* Object */
+  --Object-Favorite: var(--Brand-Cake-Orange);
+  --Object-Accent-Primary: var(--Brand-Cake-Orange);
+  --Object-Accent-Primary-Light: var(--Brand-Cake-Orange-Ultra-Light);
+  --Object-High-Emphasis: var(--Primitive-Gray-900);
+  --Object-Medium-Emphasis: var(--Primitive-Gray-700);
+  --Object-Low-Emphasis: var(--Primitive-Gray-600);
+  --Object-Disable: var(--Primitive-Gray-400);
+  --Object-High-Emphasis-on-Inverse: var(--Primitive-White-alpha-1000);
+  --Object-Caution: var(--Primitive-Sun-800);
+  --Object-Warning: var(--Primitive-Wood-800);
+  --Object-Success: var(--Primitive-Forest-600);
+  --Object-Info: var(--Primitive-Sea-600);
+
+  /* Hover / Active */
+  --Hover-Primary-Button: var(--Primitive-Orange-800);
+  --Hover-Secondary-Button: var(--Primitive-Orange-100);
+  --Hover-Tertiary-Button: var(--Primitive-Gray-200);
+  --Hover-Text-Button: var(--Primitive-Gray-200);
+  --Hover-Caution-Button: var(--Primitive-Sun-100);
+  --Active-Primary-Button: var(--Primitive-Orange-800);
+  --Active-Secondary-Button: var(--Primitive-Orange-100);
+  --Active-Tertiary-Button: var(--Primitive-Gray-200);
+  --Active-Text-Button: var(--Primitive-Gray-100);
+  --Active-Caution-Button: var(--Primitive-Sun-100);
+
+  /* Border */
+  --Border-High-Emphasis: var(--Primitive-Gray-700);
+  --Border-Medium-Emphasis: var(--Primitive-Gray-300);
+  --Border-Low-Emphasis: var(--Primitive-Gray-50);
+  --Border-Accent-Primary: var(--Brand-Cake-Orange);
+  --Border-Favorite: var(--Brand-Cake-Orange);
+  --Border-Caution: var(--Surface-Caution);
+  --Border-Info: var(--Primitive-Sea-600);
+
+  /* Brand */
+  --Brand-Cake-Orange: var(--Primitive-Orange-700);
+  --Brand-Cake-Orange-Light: var(--Primitive-Orange-100);
+  --Brand-Cake-Orange-Ultra-Light: var(--Primitive-Orange-50);
+
+  /* Overlay */
+  --Overlay-Dark: var(--Primitive-Gray-alpha-800);
+  --Overlay-Medium: var(--Primitive-Gray-alpha-600);
+  --Overlay-Light: var(--Primitive-Gray-alpha-200);
+  --Overlay-Scrim: rgba(17, 17, 17, 0.28);          /* モーダル・ドロワーのスクリム */
+
+  /* Glass surfaces（半透明白背景） */
+  --Surface-Glass: var(--Primitive-White-alpha-800);         /* rgba(255,255,255,0.8) */
+  --Surface-Glass-Soft: rgba(255, 255, 255, 0.76);           /* ドロワーナビ背景 */
+  --Surface-Glass-Faint: var(--Primitive-White-alpha-700);   /* rgba(255,255,255,0.698≈0.7) */
+  --Surface-Brand-Ghost: rgba(255, 236, 217, 0.7);           /* Orange-50 at 70%。閉じるボタン等 */
+
+  /* Border alphas */
+  --Border-Hairline: rgba(28, 26, 26, 0.08);       /* Gray-900 8%。微細ボーダー */
+  --Border-Brand-Subtle: rgba(224, 75, 0, 0.16);   /* Brand-Orange 16%。SNSリンクボーダー等 */
+
+  /* Caution / Focus */
+  --Caution-Base: var(--Primitive-Sun-800);
+  --Caution-Light: var(--Primitive-Sun-200);
+  --Caution-Ultra-Light: var(--Primitive-Sun-50);
+  --Focus-High-Emphasis: #0C9E66FF;
+
+  /* Third-Party */
+  --Third-Party-Youtube: #FF0000FF;
+  --Third-Party-Facebook: #1877F2FF;
+  --Third-Party-Twitter: #1DA1F2FF;
+  --Third-Party-Instagram-Pink: #F20076FF;
+  --Third-Party-Amazon: #FAD676FF;
+  --Third-Party-LINE: #06C755FF;
+  --Third-Party-Apple: #000000FF;
+  --Third-Party-X: #000000FF;
+}
+
+/* ============================================
+ * Dark Mode
+ * .dark クラスがルートに付いたとき、セマンティックトークン自体を切り替える。
+ * Figma Dark.tokens.json と完全一致。
+ * ============================================ */
+.dark {
+  /* Surface */
+  --Surface-Primary: var(--Primitive-Gray-alpha-900);
+  --Surface-Secondary: var(--Primitive-White-alpha-100);
+  --Surface-Tertiary: var(--Primitive-White-alpha-200);
+  --Surface-Caution: var(--Primitive-Sun-800);
+  --Surface-Caution-Light: var(--Primitive-Sun-50);
+  --Surface-Accent-Primary: var(--Primitive-Orange-700);
+  --Surface-Accent-Primary-Light: #E04B0026; /* Brand-Orange at ~15% alpha — ダーク背景で濁らないよう調整 */
+  --Surface-Success: var(--Primitive-Forest-600);
+  --Surface-Warning: var(--Primitive-Wood-50);
+  --Surface-Info: var(--Primitive-Sea-600);
+  --Surface-Info-Light: var(--Primitive-Sea-50);
+
+  /* Text */
+  --Text-High-Emphasis: var(--Primitive-White-alpha-1000);
+  --Text-Medium-Emphasis: var(--Primitive-White-alpha-800);
+  --Text-Low-Emphasis: var(--Primitive-White-alpha-600);
+  --Text-Disable: var(--Primitive-White-alpha-300);
+  --Text-Accent-Primary: var(--Primitive-Orange-600);
+  --Text-Accent-Secondary: var(--Primitive-Orange-100);
+  --Text-on-Inverse: var(--Primitive-White-alpha-1000); /* ブランドカラー背景上で使用するため白を維持 */
+  --Text-Success: var(--Primitive-Forest-600);
+  --Text-Caution: var(--Primitive-Sun-400);
+  --Text-Warning: var(--Primitive-Wood-800);
+  --Text-Info: var(--Primitive-Sea-400);
+
+  /* Object */
+  --Object-Favorite: var(--Primitive-Orange-600);
+  --Object-Accent-Primary: var(--Primitive-Orange-600);
+  --Object-Accent-Primary-Light: var(--Brand-Cake-Orange-Ultra-Light);
+  --Object-High-Emphasis: var(--Primitive-White-alpha-1000);
+  --Object-Medium-Emphasis: var(--Primitive-White-alpha-800);
+  --Object-Low-Emphasis: var(--Primitive-White-alpha-600);
+  --Object-Disable: var(--Primitive-White-alpha-400);
+  --Object-High-Emphasis-on-Inverse: var(--Primitive-White-alpha-1000); /* ブランドカラー背景上で使用するため白を維持 */
+  --Object-Caution: var(--Caution-Light);
+  --Object-Warning: var(--Primitive-Wood-800);
+  --Object-Success: var(--Primitive-Forest-600);
+  --Object-Info: var(--Primitive-Sea-400);
+
+  /* Hover / Active */
+  --Hover-Primary-Button: var(--Primitive-Orange-800);
+  --Hover-Secondary-Button: var(--Primitive-White-alpha-100);
+  --Hover-Tertiary-Button: var(--Primitive-White-alpha-50);
+  --Hover-Text-Button: var(--Primitive-White-alpha-200);
+  --Hover-Caution-Button: var(--Primitive-Sun-50);
+  --Active-Primary-Button: var(--Primitive-Orange-800);
+  --Active-Secondary-Button: var(--Primitive-White-alpha-100);
+  --Active-Tertiary-Button: var(--Primitive-White-alpha-50);
+  --Active-Text-Button: var(--Primitive-White-alpha-100);
+  --Active-Caution-Button: var(--Primitive-Sun-50);
+
+  /* Border */
+  --Border-High-Emphasis: var(--Primitive-White-alpha-500);
+  --Border-Medium-Emphasis: var(--Primitive-White-alpha-200);
+  --Border-Low-Emphasis: var(--Primitive-White-alpha-50);
+  --Border-Accent-Primary: var(--Primitive-Orange-600);
+  --Border-Favorite: var(--Primitive-Orange-600);
+  --Border-Caution: var(--Surface-Caution);
+  --Border-Info: var(--Primitive-Sea-400);
+
+  /* Brand（ダークでも同じ） */
+  --Brand-Cake-Orange: var(--Primitive-Orange-700);
+  --Brand-Cake-Orange-Light: var(--Primitive-Orange-100);
+  --Brand-Cake-Orange-Ultra-Light: var(--Primitive-Orange-50);
+
+  /* Overlay（ダークモードでは白系に切替、背景が暗いためグレー系では視認不能） */
+  --Overlay-Dark: var(--Primitive-White-alpha-300);
+  --Overlay-Medium: var(--Primitive-White-alpha-200);
+  --Overlay-Light: var(--Primitive-White-alpha-100);
+  --Overlay-Scrim: rgba(0, 0, 0, 0.48);
+
+  /* Glass surfaces */
+  --Surface-Glass: var(--Primitive-White-alpha-100);
+  --Surface-Glass-Soft: var(--Primitive-White-alpha-100);
+  --Surface-Glass-Faint: var(--Primitive-White-alpha-50);
+  --Surface-Brand-Ghost: rgba(224, 75, 0, 0.12);
+
+  /* Border alphas */
+  --Border-Hairline: var(--Primitive-White-alpha-100);
+  --Border-Brand-Subtle: rgba(224, 75, 0, 0.24);
+
+  /* Third-Party（ダークでも同じ） */
+}