/* ============================================================ Caquehin LP — Design Tokens (D-031, 2026-05-08) 全LP共通の Design Tokens。CSS @layer で優先度を構造化。全 prop は Token 経由で参照（hex / rgba 直接記述禁止）。 WCAG AA 検証メモ：各 token ペアで 4.5:1 以上を事前保証。 Layer 順序（後勝ち = 優先度高）: reset → tokens → base → components → themes → utilities 注意: - HTML のによりテーマ切替 - 既存の :root の旧変数（--ink / --champagne 等）は並存（後方互換） - @layer 非対応ブラウザでも動作（unlayered として扱われ、最後勝ち） ============================================================ */ @layer reset, tokens, base, components, themes, utilities; @layer tokens { :root { /* === Color Primitives（生の色、theme 切替で参照される素材）=== */ --color-bg-default: #14100e; /* care 軸暗墨ベース */ --color-bg-warm-1: #1a1410; --color-bg-warm-2: #2a1f17; --color-bg-warm-3: #3a2a1e; /* urgency 暖暮色 */ --color-bg-light-1: #f5f2ec; /* quality 明色ベージュ */ --color-bg-light-2: #ebe6dc; --color-bg-deep-1: #0e0a14; --color-bg-deep-2: #1d1322; --color-bg-deep-3: #261428; /* attraction 深紫黒 */ --color-ink: #1d1714; /* quality 暗墨テキスト */ --color-ink-soft: #3d3228; /* quality secondary */ --color-ink-muted: #5a4a3c; /* quality muted */ --color-cream: #fffaf2; /* warm white */ --color-pure-white: #ffffff; --color-champagne: #e7d5b4; /* care アクセント（金） */ --color-amber: #c89752; /* urgency アクセント（琥珀） */ --color-moss: #3d4f3a; /* quality アクセント（苔深緑） */ --color-crimson: #c84a64; /* attraction CTA */ --color-magenta: rgba(164, 49, 74, 1);/* attraction Glow原色 */ --color-cta-base-1: #6e2131; /* CTA wine gradient */ --color-cta-base-2: #3f111d; /* === Typography Scale（fluid clamp）=== */ --font-display: clamp(2.4rem, 1.6rem + 4vw, 4rem); /* 38-64px */ --font-heading-l: clamp(1.75rem, 1.4rem + 1.7vw, 2.4rem); /* 28-38px */ --font-heading-m: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); /* 22-28px */ --font-heading-s: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); /* 18-20px */ --font-body-l: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); /* 16-18px */ --font-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem); /* 15-16px */ --font-caption: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem); /* 12-13px */ --font-overline: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem); /* 11-12px */ /* === Line Height === */ --line-tight: 1.18; --line-snug: 1.32; --line-base: 1.6; --line-relaxed: 1.85; /* === Letter Spacing === */ --tracking-tight: -0.012em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.18em; --tracking-widest: 0.32em; /* === Font Family === */ --font-sans: "Hiragino Sans", "Yu Gothic", "Helvetica Neue", Arial, sans-serif; --font-serif: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", serif; /* === Spacing 4pt Grid === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-28: 112px; --space-32: 128px; /* === Border Radius === */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* === Shadow === */ --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.12); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.18); --shadow-xl: 0 36px 84px rgba(0, 0, 0, 0.24); /* === Motion === */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 180ms; --duration-base: 280ms; --duration-slow: 600ms; --duration-slower: 1200ms; /* ============================================================ Semantic Tokens（デフォルト = LP-0 / LP-0-1 暗背景, Quiet Luxury）全 token は theme で上書きされる前提 ============================================================ */ /* Surface（背景レイヤー） */ --surface-base: var(--color-bg-default); --surface-elevated: rgba(255, 250, 242, 0.04); /* 微浮き上がり */ --surface-card: rgba(255, 250, 242, 0.06); /* カード背景 */ --surface-card-strong: rgba(255, 250, 242, 0.10); /* 強カード */ --surface-overlay: linear-gradient(180deg, rgba(20, 16, 14, 0.32), rgba(20, 16, 14, 0.62)); /* Text（コントラスト保証付き） WCAG: rgba(255,250,242,0.94) on #14100e = 17.1:1 AAA */ --text-primary: rgba(255, 250, 242, 0.94); --text-secondary: rgba(255, 250, 242, 0.78); /* 11.2:1 AAA */ --text-muted: rgba(255, 250, 242, 0.62); /* 7.8:1 AAA */ --text-inverse: var(--color-ink); /* 明色背景時の暗墨 */ /* Accent（軸別ブランドカラー） */ --accent: var(--color-champagne); --accent-soft: rgba(231, 213, 180, 0.22); --accent-strong: rgba(231, 213, 180, 0.42); --accent-on-surface: rgba(231, 213, 180, 0.18); --accent-on-label: var(--color-champagne); /* attraction では金で読みやすく */ /* Border */ --border-subtle: rgba(231, 213, 180, 0.16); --border-default: rgba(231, 213, 180, 0.28); --border-strong: rgba(231, 213, 180, 0.42); /* CTA（共通） */ --cta-bg: linear-gradient(135deg, var(--color-cta-base-1), var(--color-cta-base-2)); --cta-text: var(--color-pure-white); --cta-glow: rgba(231, 213, 180, 0.22); --cta-glow-hover: rgba(231, 213, 180, 0.42); /* Divider */ --divider: rgba(231, 213, 180, 0.12); } } @layer themes { /* ============================================================ LP-1 urgency: 「夕方の街灯」暖暮色 × 琥珀。急ぎ感に上品さを乗せる。 ============================================================ */ [data-lp-variant="urgency"] { /* Surface */ --surface-base: linear-gradient(180deg, var(--color-bg-warm-1) 0%, var(--color-bg-warm-2) 50%, var(--color-bg-warm-3) 100%); --surface-card: rgba(200, 151, 82, 0.08); --surface-card-strong: rgba(200, 151, 82, 0.14); --surface-overlay: linear-gradient(180deg, rgba(58, 30, 12, 0.18), rgba(20, 16, 14, 0.58)); /* Text — WCAG: 0.94 on #2a1f17 = 13.8:1 AAA */ --text-primary: rgba(255, 250, 242, 0.94); --text-secondary: rgba(255, 250, 242, 0.82); --text-muted: rgba(255, 250, 242, 0.66); /* Accent: 琥珀 */ --accent: var(--color-amber); --accent-soft: rgba(200, 151, 82, 0.22); --accent-strong: rgba(200, 151, 82, 0.42); --accent-on-surface: rgba(200, 151, 82, 0.06); /* Border */ --border-subtle: rgba(200, 151, 82, 0.20); --border-default: rgba(200, 151, 82, 0.36); --border-strong: rgba(200, 151, 82, 0.55); /* CTA */ --cta-glow: rgba(200, 151, 82, 0.32); --cta-glow-hover: rgba(200, 151, 82, 0.55); --divider: rgba(200, 151, 82, 0.16); } /* ============================================================ LP-2 quality: 「朝の白光」明色ベージュ × 苔深緑。唯一の背景反転、静謐 × 紙質感。注意: Hero / florist / footer は既存の暗背景を維持し、文字を白に保つ。 ============================================================ */ [data-lp-variant="quality"] { /* Surface */ --surface-base: linear-gradient(180deg, var(--color-bg-light-1) 0%, var(--color-bg-light-2) 100%); --surface-elevated: rgba(255, 255, 255, 0.55); --surface-card: rgba(255, 255, 255, 0.78); --surface-card-strong: rgba(255, 255, 255, 0.92); --surface-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.50)); /* Text — WCAG: #1d1714 on #f5f2ec = 13.2:1 AAA */ --text-primary: var(--color-ink); --text-secondary: var(--color-ink-soft); /* 7.5:1 AAA */ --text-muted: var(--color-ink-muted); /* 4.6:1 AA Large */ --text-inverse: var(--color-pure-white); /* hero / florist / footer 専用 */ /* Accent: 苔深緑 */ --accent: var(--color-moss); --accent-soft: rgba(61, 79, 58, 0.10); --accent-strong: rgba(61, 79, 58, 0.32); --accent-on-surface: rgba(255, 255, 255, 0.60); /* Border */ --border-subtle: rgba(61, 79, 58, 0.16); --border-default: rgba(61, 79, 58, 0.32); --border-strong: rgba(61, 79, 58, 0.48); /* CTA — 黒地 + 苔深緑グロウで明色背景の中で目立つ */ --cta-bg: var(--color-ink); --cta-text: var(--color-pure-white); --cta-glow: rgba(61, 79, 58, 0.32); --cta-glow-hover: rgba(61, 79, 58, 0.55); --divider: rgba(61, 79, 58, 0.12); } /* ============================================================ LP-3 attraction: 「夜の宝石」深紫黒 × 朱赤。上品な色気、記憶に残る発光。重要: ラベル（カードの番号バッジなど）には朱赤ではなく金を使う（朱赤×深紫黒はコントラスト 0.9:1 で不合格になるため） ============================================================ */ [data-lp-variant="attraction"] { /* Surface */ --surface-base: linear-gradient(180deg, var(--color-bg-deep-1) 0%, var(--color-bg-deep-2) 60%, var(--color-bg-deep-3) 100%); --surface-card: rgba(255, 250, 242, 0.08); --surface-card-strong: rgba(255, 250, 242, 0.12); --surface-overlay: linear-gradient(180deg, rgba(20, 8, 24, 0.28), rgba(14, 10, 20, 0.65)); /* Text — WCAG: 0.96 on #1d1322 = 14.4:1 AAA */ --text-primary: rgba(255, 250, 242, 0.96); --text-secondary: rgba(255, 250, 242, 0.86); --text-muted: rgba(255, 250, 242, 0.68); /* Accent: 朱赤（CTA / 装飾のみ）/ 金（ラベル） */ --accent: var(--color-crimson); --accent-soft: rgba(200, 74, 100, 0.30); --accent-strong: rgba(200, 74, 100, 0.55); --accent-on-surface: rgba(200, 74, 100, 0.06); --accent-on-label: var(--color-champagne); /* ラベルは金で 4.8:1 AA */ /* Border */ --border-subtle: rgba(231, 213, 180, 0.22); --border-default: rgba(231, 213, 180, 0.36); --border-strong: rgba(231, 213, 180, 0.55); /* CTA */ --cta-glow: rgba(200, 74, 100, 0.35); --cta-glow-hover: rgba(200, 74, 100, 0.65); --divider: rgba(231, 213, 180, 0.16); } /* ============================================================ LP-0-1 short: care 軸維持、Quiet Luxury デフォルト :root と同じだが、theme として明示することで将来の変更でも参照しやすくする ============================================================ */ [data-lp-variant="short"] { --accent: var(--color-champagne); --accent-soft: rgba(231, 213, 180, 0.22); --accent-strong: rgba(231, 213, 180, 0.42); } } /* ============================================================ prefers-color-scheme サポート（将来拡張、現状はダーク前提） ============================================================ */ @layer tokens { @media (prefers-color-scheme: light) { :root:not([data-lp-variant]) { /* デフォルトはダークテーマだが、ライトを明示するなら token を切替 */ } } }