/* KinKam — design tokens (v1) Concept borrowed from warm editorial DTC / wellness brands (cream+peach ground, black ink, warm humanist sans for headlines + body — Lato), adapted to KinKam's palette. Swap the whole type system via --font-display / --font-body. Keep it simple. */ :root { /* ---- Core palette: peach · pink · black · white ---- */ --white: #ffffff; --black: #191716; /* soft near-black ink (not pure #000) */ --peach: #f4a06a; /* primary warm accent */ --pink: #ef9db0; /* secondary accent */ /* ---- Surfaces / neutrals (warm) ---- */ --bg: #fff6f0; /* warm peachy cream — page background */ --surface: #ffffff; /* cards / sheets */ --ink: var(--black); --ink-muted: #726a66; /* warm grey secondary text */ --ink-soft: #3a3532; /* softer-than-ink body text (theme-aware) */ --line: #f1e2d8; /* warm hairline / borders */ /* ---- Tints & states ---- */ --peach-50: #fff1e7; --peach-100: #ffe1cd; --peach-500: var(--peach); --peach-600: #a5521c; /* dark burnt-peach: readable accent text on light peach tints */ --pink-50: #fdeef1; --pink-100: #fbd9e1; --pink-500: var(--pink); --pink-700: #a53c56; /* darker rose: readable pink text on light pink tints */ /* ---- Semantic ---- */ --accent: var(--peach-500); --accent-ink: #3a1d0a; /* dark warm text on peach fill (readable) */ --focus: var(--peach-600); --gradient-brand: linear-gradient(215deg, #f5b48b 0%, #db8592 48%, #b75e80 100%); /* app-icon gradient: peach → rose */ /* ---- Type families (swap here to restyle everything) ---- */ --font-display: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* headlines + wordmark */ --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* UI + body */ --font-jp: 'Noto Sans JP', sans-serif; /* Japanese fallback */ /* ---- Type scale ---- */ --text-xs: 0.80rem; --text-sm: 0.90rem; --text-base: 1.00rem; --text-lg: 1.25rem; --text-xl: 1.60rem; --text-2xl: 2.20rem; --text-3xl: 3.20rem; /* hero / wordmark */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --leading-tight: 1.15; --leading-normal: 1.6; /* ---- Shape / space / elevation ---- */ --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-6: 3rem; --shadow-soft: 0 6px 24px rgba(120, 70, 40, 0.08); } /* ---- Dark theme: neutral near-black ground, near-white ink; brand peach/pink stay ---- Auto via OS (prefers-color-scheme), or force with . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e0e0e; /* near-black */ --surface: #1a1917; /* black-grey card */ --ink: #f3efeb; /* near-white text */ --ink-muted: #a8a29c; --ink-soft: #d8d3ce; --line: #2a2825; --peach-50: #1b1512; /* subtle warm tint */ --peach-100: #33241a; /* peach chip bg on dark */ --peach-600: #f2ab7a; /* lifted peach for readable accent text on dark */ --pink-50: #1e1519; --pink-100: #33222a; --pink-700: #f0aebb; --accent-ink: #1a130d; /* dark text on peach/pink fill */ --shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { --bg: #0e0e0e; --surface: #1a1917; --ink: #f3efeb; --ink-muted: #a8a29c; --ink-soft: #d8d3ce; --line: #2a2825; --peach-50: #1b1512; --peach-100: #33241a; --peach-600: #f2ab7a; --pink-50: #1e1519; --pink-100: #33222a; --pink-700: #f0aebb; --accent-ink: #1a130d; --shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.55); }