/* ========================================================================= はなまる配送 — design tokens colors_and_type.css ---------------------------------------------------------------------- Load this once at the top of every page. Tokens are layered: 1. Family tokens (brand red, water, paper, ink) — raw values. 2. Semantic tokens (fg, bg, border, ok/warn/danger) — refer to family. 3. Type tokens — sizes, line-heights, font-families. 4. Spacing, radius, shadow, motion. 5. Element defaults (h1, h2, p, code…) at the bottom. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;600;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Sans+JP:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ───────────────────────── Brand (the hanko) ───────────────────────── */ --brand-hanko: #ED262C; /* sampled from logo */ --brand-hanko-press: #C81F25; /* -6% L for hover/press */ --brand-hanko-soft: #FBE4E5; /* tint for selection / soft fills */ /* ───────────────────────── Water (阿寺ブルー) ─────────────────────── */ --water-mist: #EAF1F0; --water-jade: #C8DEDA; --water-shallow: #8FB9B2; --water-deep: #4A7672; --water-ink: #1F3735; /* ───────────────────────── Paper & Ink ─────────────────────────── */ --paper-white: #FBF8F2; /* warm washi, page background */ --paper-cream: #F2ECDF; /* card surface */ --paper-edge: #E7DFCD; /* hairline against cream */ --ink-sumi: #1B2421; /* near-black, body */ --ink-soft: #3B4744; /* secondary body */ --ink-mute: #6F7976; /* meta, labels */ --ink-faint: #A8AFAB; /* placeholder, disabled */ /* ───────────────────────── Semantic ──────────────────────────── */ --fg: var(--ink-sumi); --fg-soft: var(--ink-soft); --fg-mute: var(--ink-mute); --fg-faint: var(--ink-faint); --fg-on-dark: var(--paper-white); --bg: var(--paper-white); --bg-alt: var(--paper-cream); --bg-water: var(--water-mist); --bg-dark: var(--water-ink); --border: color-mix(in oklch, var(--ink-mute) 30%, transparent); --border-strong: color-mix(in oklch, var(--ink-mute) 55%, transparent); --border-light: color-mix(in oklch, var(--ink-mute) 14%, transparent); --accent: var(--brand-hanko); --accent-press: var(--brand-hanko-press); --ok: #6FA08B; --warn: #C58A3C; --danger: var(--brand-hanko); --info: var(--water-deep); --focus-ring: var(--water-deep); /* a faint washi-grain overlay; apply with background-image */ --bg-washi: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); /* ───────────────────────── Typography ────────────────────────── */ --font-display-jp: "Shippori Mincho B1", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif; --font-display-ll: "Cormorant Garamond", "Shippori Mincho B1", serif; --font-body-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif; --font-body-ll: "Inter", "Noto Sans JP", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* type scale — mobile-first; bumped on wider viewports below */ --fz-xs: 0.75rem; /* 12 */ --fz-sm: 0.8125rem; /* 13 */ --fz-base: 0.9375rem; /* 15 */ --fz-md: 1rem; /* 16 */ --fz-lg: 1.125rem; /* 18 */ --fz-xl: 1.375rem; /* 22 */ --fz-2xl: 1.75rem; /* 28 */ --fz-3xl: 2.25rem; /* 36 */ --fz-4xl: 3rem; /* 48 */ --fz-5xl: 4rem; /* 64 */ --fz-6xl: 5.5rem; /* 88 */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.65; --lh-relaxed: 1.85; --tr-tight: -0.02em; --tr-snug: -0.01em; --tr-base: 0; --tr-wide: 0.04em; --tr-wider: 0.12em; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-heavy: 800; /* ───────────────────────── Spacing ──────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 160px; --s-48: 192px; /* widths */ --w-text: 64ch; --w-content: 1080px; --w-wide: 1280px; --gutter: 24px; /* ───────────────────────── Radius ───────────────────────────── */ --r-sm: 4px; --r: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; /* ───────────────────────── Shadows ──────────────────────────── */ --shadow-0: none; --shadow-1: 0 1px 2px rgba(31,55,53,0.04); --shadow-2: 0 1px 2px rgba(31,55,53,0.04), 0 12px 32px -12px rgba(31,55,53,0.10); --shadow-3: 0 2px 4px rgba(31,55,53,0.06), 0 24px 56px -24px rgba(31,55,53,0.18); /* ───────────────────────── Motion ───────────────────────────── */ --ease-river: cubic-bezier(0.4, 0, 0.2, 1); --ease-stream: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 700ms; --dur-vlong: 1400ms; /* ───────────────────────── Layering ─────────────────────────── */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-top: 2000; } /* Larger type at the desktop breakpoint */ @media (min-width: 880px) { :root { --fz-base: 1rem; --fz-md: 1.0625rem; --fz-lg: 1.25rem; --fz-xl: 1.5rem; --fz-2xl: 2rem; --fz-3xl: 2.75rem; --fz-4xl: 3.75rem; --fz-5xl: 5rem; --fz-6xl: 7rem; } } /* Respect users who don't want motion. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --dur-vlong:0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ========================================================================= Element defaults ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body-jp); font-size: var(--fz-md); line-height: var(--lh-base); font-feature-settings: "palt" 1; /* proportional kana spacing */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings — Mincho display, Latin via Cormorant */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { font-family: var(--font-display-jp); font-weight: var(--fw-semi); color: var(--fg); letter-spacing: var(--tr-tight); line-height: var(--lh-tight); margin: 0 0 var(--s-4); text-wrap: balance; } h1, .h1 { font-size: var(--fz-5xl); font-weight: var(--fw-heavy); letter-spacing: var(--tr-tight); } h2, .h2 { font-size: var(--fz-3xl); } h3, .h3 { font-size: var(--fz-2xl); } h4, .h4 { font-size: var(--fz-xl); } h5 { font-size: var(--fz-lg); font-family: var(--font-body-jp); font-weight: var(--fw-bold); } h6 { font-size: var(--fz-md); font-family: var(--font-body-jp); font-weight: var(--fw-bold); } p { margin: 0 0 var(--s-4); line-height: var(--lh-base); text-wrap: pretty; } a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--brand-hanko), var(--brand-hanko)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size var(--dur) var(--ease-river); } a:hover, a:focus-visible { background-size: 100% 1px; } a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; } small, .small { font-size: var(--fz-sm); color: var(--fg-mute); } code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.9em; } code { background: var(--paper-cream); padding: 0.1em 0.35em; border-radius: var(--r-sm); } hr { border: 0; height: 1px; background: var(--border); margin: var(--s-12) 0; } img, svg, video, picture { max-width: 100%; display: block; } ::selection { background: var(--brand-hanko-soft); color: var(--ink-sumi); } /* Utility classes used across pages */ .u-eyebrow { font-family: var(--font-body-ll); font-size: var(--fz-xs); font-weight: var(--fw-medium); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--fg-mute); } .u-tategaki { writing-mode: vertical-rl; text-orientation: mixed; } .u-mono-num { font-family: var(--font-body-ll); font-variant-numeric: tabular-nums; } .u-balance { text-wrap: balance; } .u-pretty { text-wrap: pretty; }