/* ============================================================ Onur Mark Design Tokens v0.1 - 共通トークン（Onur Mark 全プロダクトで使用） - 業種別アクセントは `theme-*` クラスで上書き - 2026-05-14 / KIZUKU Standard 以上のデモ・本番で必須読み込み ============================================================ */ :root { /* --- Neutrals ----------------------------------------------- */ --color-bg: #fdfbf8; /* 明るいオフホワイト */ --color-surface: #ffffff; /* カード・パネル背景 */ --color-text: #2b2825; /* メインテキスト（純黒NG） */ --color-text-soft: #6e665e; /* 補助テキスト */ --color-text-mute: #ada69e; /* 補助の補助 */ --color-line: #ece5dc; /* 境界線・ボーダー */ --color-line-strong: #d9cec1; /* 強調境界 */ /* --- Accent（業種別で上書き可能） ----------------------------- */ /* デフォルトは美容室向け dusty pink */ --color-accent: #c98a8a; --color-accent-soft: #f1d8d8; --color-accent-dark: #a96a6a; /* --- Semantic ----------------------------------------------- */ --color-success: #5a8c6a; --color-warning: #c89346; --color-danger: #b54a3f; --color-info: #5e7b9a; /* --- Typography --------------------------------------------- */ --font-jp: "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Yu Gothic", "Meiryo", sans-serif; --font-en: "Inter", "Helvetica Neue", system-ui, sans-serif; --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; /* Type scale（モバイル基準） */ --size-xs: 11px; --size-sm: 13px; --size-base: 15px; --size-md: 17px; --size-lg: 20px; --size-xl: 26px; --size-2xl: 32px; --size-3xl: 40px; --leading-tight: 1.35; --leading-normal: 1.7; --leading-loose: 1.9; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* --- Spacing（4px scale） ----------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* --- Radius ------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* --- Shadow（暖色寄りのソフトシャドウ） ----------------------- */ --shadow-sm: 0 1px 3px rgba(60, 40, 40, 0.04); --shadow-md: 0 4px 16px rgba(60, 40, 40, 0.06); --shadow-lg: 0 12px 36px rgba(60, 40, 40, 0.10); /* --- Layout ------------------------------------------------- */ --max-content: 1040px; --max-narrow: 720px; --gutter: 24px; /* --- Motion ------------------------------------------------- */ --transition-fast: 0.15s ease; --transition: 0.2s ease; --transition-slow: 0.4s ease; /* --- z-index ------------------------------------------------ */ --z-header: 100; --z-modal: 1000; --z-toast: 2000; } /* デスクトップでの type scale 微調整 ※ PC 最小フォントサイズルール： - 本文・ラベル・ボタン等の通常テキストは最小 14px - キャプション・注釈・補足のみ最小 12px を許容 */ @media (min-width: 768px) { :root { --size-xs: 12px; /* キャプション・注釈・補足のみ */ --size-sm: 14px; /* 通常テキスト最小 */ --size-base: 16px; --size-md: 18px; --size-lg: 22px; --size-xl: 30px; --size-2xl: 40px; --size-3xl: 52px; } } /* ============================================================ 業種別テーマ（アクセントカラーのみ差し替え）使い方：等 ============================================================ */ /* 美容室・サロン */ .theme-beauty { --color-accent: #c98a8a; --color-accent-soft: #f1d8d8; --color-accent-dark: #a96a6a; } /* カジュアル飲食店（イタリアン・カフェ等） */ .theme-restaurant { --color-accent: #b84a3a; --color-accent-soft: #f0d2cc; --color-accent-dark: #8a3429; } /* カフェ（暖かい黄褐色） */ .theme-cafe { --color-accent: #b88248; --color-accent-soft: #f0e0cc; --color-accent-dark: #8c5e2e; } /* 士業（信頼感のある藍 + サンドアクセント） */ .theme-professional { --color-accent: #3b5573; --color-accent-soft: #d5dde7; --color-accent-dark: #233d5a; } /* 工務店・リフォーム（土の色） */ .theme-construction { --color-accent: #8a6b4a; --color-accent-soft: #e6d8c4; --color-accent-dark: #5e4730; } /* クリニック系（クリニック・歯科・整体・治療院など、医療・治療系すべて）やわらかい青緑・明るめ調整 */ .theme-clinic { --color-accent: #6cb0b5; --color-accent-soft: #e0f0f1; --color-accent-dark: #468388; } /* 教室・スクール（明るい黄 + ブリック） */ .theme-school { --color-accent: #c89343; --color-accent-soft: #f3e0c2; --color-accent-dark: #8e6628; }