/* ========================================================== * Kizuki Design Tokens — Single Source of Truth (v3) * Warm-intelligent palette, AI-forward, SNS-buzz gradients. * デザイントークンの唯一の定義元。色を変えるときはここだけ直す。 * 全ページの 末尾で読み込み、各ページのインライン :root を上書きする。 * (注: SVG の fill 等ハードコード値は scripts/apply-tokens 系で別途同期) * ========================================================== */ :root { /* ===== Warm-intelligent palette ===== */ --paper: #FBF7F0; /* warm off-white base */ --paper-deep: #F2EBDD; --card: #FFFDF9; /* warm white card surface */ --ink: #241F1B; /* warm charcoal */ --ink-soft: #5A5048; --ink-mute: #7A6F66; --navy: #2C6E63; /* primary — warm teal-green */ --navy-deep: #235A51; --ai: #7A5BC2; /* AI accent — warm plum-indigo */ --ai-soft: #9A7FD6; /* アクセント色: テキスト/白文字ボタン地で WCAG AA (紙地・白文字とも 4.5:1+) を満たす濃度。 明るい装飾(グラデ/小ドット)用は --*-bright を使う。 */ --cyan: #277C7C; /* supportive teal (AA) */ --clay: #B55327; /* warm terracotta accent (AA) */ --ochre: #956818; /* warm gold→deep gold (AA) */ --rose: #B94B65; /* warm rose (AA) */ --leaf: #4B7C56; /* warm leaf (AA) */ /* 装飾専用の明るい版 (大面積の塗り・グラデ・ドットのみ。テキスト色には使わない) */ --ochre-bright: #E0A53E; --clay-bright: #D9794E; --rose-bright: #CC7B8E; /* semantic primary */ --forest: var(--navy); --forest-deep: var(--navy-deep); /* legacy aliases — keep old class hooks resolving to the new palette */ --cream: var(--paper); --cream-deep: var(--paper-deep); --coral: var(--clay); --mustard: var(--ochre); --teal: var(--cyan); --sky: var(--cyan); --lavender: var(--ai); --line: #EBE2D4; /* warm hairline border */ --line-strong: #DBCEB9; /* buzz gradients (SNS-forward) */ --grad-hero: linear-gradient(100deg, #7A5BC2 0%, #C85B9C 48%, #E0A53E 100%); --grad-cta: linear-gradient(100deg, #7A5BC2 0%, #C85B9C 100%); /* sizing / motion (softened from the old pop-sticker look) */ --bw: 1.5px; --radius: 16px; --radius-lg: 20px; --shadow-x: 0px; /* legacy hard-offset hooks now resolve to soft shadow */ --shadow-y: 0px; --shadow-sm: 0 1px 3px rgba(74,58,40,0.06), 0 4px 14px -8px rgba(74,58,40,0.20); --shadow-md: 0 10px 30px -14px rgba(74,58,40,0.24); --shadow-lg: 0 26px 60px -28px rgba(74,58,40,0.32); --ease: cubic-bezier(.22, .61, .36, 1); --ease-bounce: cubic-bezier(.22, .61, .36, 1); /* fonts */ --font-jp: 'Noto Sans JP', system-ui, -apple-system, sans-serif; --font-en: 'Outfit', system-ui, sans-serif; } /* ライトモード固定方針: ダークモード (prefers-color-scheme:dark) には対応しない。 OS がダークでも常にこの warm-light パレットで表示する。 */