/* ========================================================================== tokens.css — design tokens for kuchikomi-ai.net White base + a single amber accent. Light and dark. Every colour, space, size, radius and shadow lives here as a variable. Do not write a colour value outside this file. Google's four brand colours (blue / red / yellow / green) are not used. ========================================================================== */ :root { /* ---- colour ---------------------------------------------------------- Ten roles, nothing more. See CLAUDE.md 共通のきまり for the rules: gold is only ★ and what the visitor picked; deep navy is only what you press; headings, links, arrows and numbers stay --c-ink. */ --c-bg: #ffffff; /* page ground */ --c-bg-2: #f4f6f8; /* alternating band */ --c-ink: #14181d; /* headings and body */ --c-ink-2: #414852; /* explanatory text */ --c-mut: #68717b; /* notes */ /* 2026-09-04: was #79828c, which measured 3.90:1 on --c-bg and 3.60:1 on --c-bg-2. --c-mut lands on body-size text (.act__note and the notes across the 35 pages), and 3:1 is only enough for 18.66px bold or 24px. #68717b is the same hue at 4.96:1 and 4.58:1. The dark value #7d8792 already passed (5.14:1 / 4.73:1) and is unchanged. */ --c-line: #e2e6ea; /* rules and borders */ --c-deep: #142230; /* buttons — things you press */ --c-on-deep: #ffffff; /* text on a deep button */ --c-gold: #e8a72a; /* ★ and the selected state */ --c-gold-soft: #fdf3e0; /* the face of a selected thing */ /* ---- colour: printed pop ---------------------------------------------- For the A4 pop the shop prints and stands on the counter. Paper has no dark mode: these are NEVER redefined in the dark blocks below. 白と紺は上のパレットと同じ値ですが、別の名前で持ちます。ポップを --c-deep に向けて「片付け」た人が、店主の端末がダークモードだった というだけで白いポップを黒く刷ってしまうのを防ぐためです。 2026-09-06: 選べる紙は**白と生成りの2つ**になりました。A4全面のベタ塗りは インク代がかかり、「コンビニのマルチコピー機でも印刷できます」という 案内と食い違うためです（オーナー判断）。同じ日に、チャコール・深緑・ ワインレッド・テラコッタ・くすみブルーを消しました。くすみブルーは 濃さではなく、枠やSTEPの丸の金が灰色に落ちて「生成りから金を抜いた版」に 見えたためです。**2つの版で違うのは紙の色だけで、金は共通です。** 使わない色を残すと、次に触る人が迷いますし、誰かが色を増やすときに 消したはずの色が戻ります。値が要るときは git から拾ってください。 navy だけは紙ではなく**インクとして生きています。**/g/ が選択済みの チップと番号の丸で使っており（g/style.css・content/g.md）、 --c-gold-soft がダークモードでも明るいままなので、そこに載せる文字は 反転しない濃い色でなければなりません。消さないでください。 */ --c-pop-white: #ffffff; --c-pop-cream: #fdf3e0; /* same value as --c-gold-soft */ --c-pop-navy: #142230; /* same value as --c-deep。/g/ が使います */ /* 生成りの紙と、その上に置く金。印刷物専用で、画面のUIとは別の設計です。 --c-gold(#e8a72a) はオレンジ寄りで元気な金、こちらは落ち着いた金です。 同じトークンを共有すると、片方を直したときもう片方が壊れます （2026-09-05 オーナー判断）。ここも dark では再宣言しません。 */ --c-pop-gold: #c9a961; --c-pop-paper: #f7f2ea; /* 元のポップで視線が止まる2か所だけに使う赤。「AIが文章を作成」の AI と、 「約30秒」の 30 です。**それ以外には使いません**（2026-09-05 オーナー）。 全部を金にすると平板になって別物になる、という判断です。 */ --c-pop-accent: #c0392b; /* ---- colour: diagram cards ------------------------------------------- Line drawings sit on a card that stays white in both themes, so that a single image file works everywhere. Never overridden in the dark blocks. */ --c-figure-card: #ffffff; --c-figure-card-line: #e2e6ea; /* ---- colour: states --------------------------------------------------- */ --c-focus: var(--c-deep); /* ---- type: families --------------------------------------------------- One family everywhere. Heading / number / body differ by weight only. */ --f-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", Meiryo, sans-serif; --f-head: var(--f-body); --f-num: var(--f-body); /* ---- type: sizes (fluid) --------------------------------------------- */ --t-xs: 0.75rem; /* 12 */ --t-sm: 0.8125rem; /* 13 */ --t-base: 0.9375rem; /* 15 */ --t-md: 1rem; /* 16 */ --t-lg: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem); --t-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --t-2xl: clamp(1.5rem, 1.28rem + 1.05vw, 2rem); --t-3xl: clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem); --t-4xl: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem); /* ---- type: metrics --------------------------------------------------- */ --lh-tight: 1.35; --lh-head: 1.55; --lh-body: 1.95; --ls-head: 0.02em; --ls-body: 0.01em; --w-normal: 400; --w-medium: 500; --w-bold: 700; --w-head: 900; /* headings */ --w-num: 700; /* numbers */ /* ---- space (4px scale) ----------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; /* ---- section rhythm --------------------------------------------------- */ --s-section: clamp(3.5rem, 2rem + 6vw, 6.5rem); /* ---- layout ----------------------------------------------------------- */ --w-page: 1120px; --w-text: 680px; --w-narrow: 840px; --pad-x: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem); --h-header: 68px; /* ---- radius ------------------------------------------------------------ */ --r-sm: 6px; --r-md: 10px; --r-mid: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px; /* ---- shadow ------------------------------------------------------------ */ --sh-sm: 0 1px 2px rgba(20, 24, 29, .05); --sh-md: 0 2px 6px rgba(20, 24, 29, .06), 0 8px 20px rgba(20, 24, 29, .05); --sh-lg: 0 4px 12px rgba(20, 24, 29, .07), 0 18px 44px rgba(20, 24, 29, .08); --sh-press: 0 6px 18px rgba(20, 34, 48, .20); /* ---- motion ------------------------------------------------------------ */ --e-out: cubic-bezier(.2, .7, .3, 1); --d-fast: .14s; --d-base: .22s; /* ---- z-index ----------------------------------------------------------- */ --z-header: 100; --z-menu: 110; } /* ========================================================================== Dark — variables only, nothing else. ========================================================================== */ /* ========================================================================== Dark — the same ten roles, new values. Nothing but variables changes. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-bg: #0f1216; --c-bg-2: #171b21; --c-ink: #e8ecf1; --c-ink-2: #b0b8c2; --c-mut: #7d8792; --c-line: #2a3038; /* a deep button would vanish here, so it flips to white on deep */ --c-deep: #ffffff; --c-on-deep: #142230; /* --c-gold, --c-gold-soft and the figure card are deliberately unchanged */ --sh-sm: 0 1px 2px rgba(0, 0, 0, .4); --sh-md: 0 2px 6px rgba(0, 0, 0, .45), 0 8px 20px rgba(0, 0, 0, .35); --sh-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .45); --sh-press: 0 6px 18px rgba(0, 0, 0, .45); } /* The first view keeps the light palette in every theme: its photo stays bright, so its text has to stay dark to remain readable. */ :root:not([data-theme="light"]) .hero { --c-bg: #ffffff; --c-bg-2: #f4f6f8; --c-ink: #14181d; --c-ink-2: #414852; --c-mut: #68717b; --c-line: #e2e6ea; --c-deep: #142230; --c-on-deep: #ffffff; --sh-sm: 0 1px 2px rgba(20, 24, 29, .05); --sh-md: 0 2px 6px rgba(20, 24, 29, .06), 0 8px 20px rgba(20, 24, 29, .05); --sh-press: 0 6px 18px rgba(20, 34, 48, .20); } } :root[data-theme="dark"] { --c-bg: #0f1216; --c-bg-2: #171b21; --c-ink: #e8ecf1; --c-ink-2: #b0b8c2; --c-mut: #7d8792; --c-line: #2a3038; /* a deep button would vanish here, so it flips to white on deep */ --c-deep: #ffffff; --c-on-deep: #142230; /* --c-gold, --c-gold-soft and the figure card are deliberately unchanged */ --sh-sm: 0 1px 2px rgba(0, 0, 0, .4); --sh-md: 0 2px 6px rgba(0, 0, 0, .45), 0 8px 20px rgba(0, 0, 0, .35); --sh-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .45); --sh-press: 0 6px 18px rgba(0, 0, 0, .45); } :root[data-theme="dark"] .hero { --c-bg: #ffffff; --c-bg-2: #f4f6f8; --c-ink: #14181d; --c-ink-2: #414852; --c-mut: #68717b; --c-line: #e2e6ea; --c-deep: #142230; --c-on-deep: #ffffff; --sh-sm: 0 1px 2px rgba(20, 24, 29, .05); --sh-md: 0 2px 6px rgba(20, 24, 29, .06), 0 8px 20px rgba(20, 24, 29, .05); --sh-press: 0 6px 18px rgba(20, 34, 48, .20); }