/* shared/tokens.css — the printed-matchbox look for every sorting prototype. * * References: 1960s Japanese matchbox labels (two or three flat inks, keylines printed slightly * off-register, halftone shading, stamped type) and Studio Ghibli warmth (washi paper, soft * greens, lantern light). Colors are OKLch. shared/icons.js mirrors these values (INK_OKLCH) so * SVG labels print with the same inks; keep the two lists in step. * * Themes: light "paper" by default; dark "night market" under prefers-color-scheme: dark. * Force either with . * Labels from label() keep their printed colors in both themes: they are objects on the table. */ @import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Rampart+One&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Zen+Maru+Gothic:wght@500;700;900&display=swap'); :root { /* ---- base inks (fixed; the same in both themes) ---- */ --ink-paper: oklch(0.955 0.025 85); /* washi cream */ --ink-kraft: oklch(0.895 0.040 80); /* darker kraft cream */ --ink-sumi: oklch(0.240 0.020 45); /* warm black keyline */ --ink-vermilion: oklch(0.620 0.200 35); /* torii shu */ --ink-indigo: oklch(0.400 0.110 262); /* aizome */ --ink-matcha: oklch(0.640 0.120 130); --ink-mustard: oklch(0.820 0.150 88); --ink-sakura: oklch(0.850 0.070 10); --ink-night: oklch(0.240 0.050 270); --ink-kaki: oklch(0.720 0.150 55); /* persimmon */ --ink-asagi: oklch(0.620 0.090 205); /* pale teal-blue */ --ink-cha: oklch(0.460 0.070 50); /* roasted tea brown */ --ink-nezumi: oklch(0.660 0.020 75); /* warm mouse grey */ --ink-beni: oklch(0.560 0.180 10); /* rouge */ /* ---- category label grounds (match CAT_META in icons.js) ---- */ --cat-ramen: var(--ink-vermilion); --cat-sushi: var(--ink-indigo); --cat-food: var(--ink-kaki); --cat-sweets: var(--ink-sakura); --cat-bar: var(--ink-night); --cat-fashion: var(--ink-asagi); --cat-otaku: var(--ink-mustard); --cat-shop: var(--ink-cha); --cat-temple: var(--ink-sumi); --cat-museum: var(--ink-nezumi); --cat-nature: var(--ink-matcha); --cat-fun: var(--ink-beni); /* ---- provenance ---- */ --prov-loved: var(--ink-vermilion); --prov-visited: var(--ink-indigo); --prov-saved: var(--ink-sumi); /* ---- semantic (theme-dependent) ---- */ --paper: var(--ink-paper); --paper-2: var(--ink-kraft); --ink: var(--ink-sumi); --ink-soft: oklch(0.42 0.03 50); --rule: oklch(0.24 0.02 45 / 0.85); --accent: var(--ink-vermilion); --accent-2: var(--ink-indigo); --highlight: var(--ink-mustard); --dim: 0.28; /* opacity for non-matching items */ --misreg: var(--ink-vermilion); /* off-register second ink */ /* ---- type ---- */ --font-display: 'Dela Gothic One', 'Zen Kaku Gothic New', sans-serif; --font-poster: 'Rampart One', 'Dela Gothic One', sans-serif; --font-body: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; --font-round: 'Zen Maru Gothic', 'Zen Kaku Gothic New', sans-serif; /* ---- shape and motion ---- */ --radius: 3px; --rule-w: 2px; --ease-snap: cubic-bezier(.2, .9, .25, 1.15); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 140ms; --t-med: 260ms; /* ---- textures (inline SVG, no image files) ---- */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .22 0 0 0 0 .14 0 0 0 1.4 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .30 0 0 0 1.1 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); color-scheme: light; } /* ---- night market ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: oklch(0.215 0.045 268); --paper-2: oklch(0.275 0.050 265); --ink: oklch(0.930 0.030 85); --ink-soft: oklch(0.780 0.035 80); --rule: oklch(0.93 0.03 85 / 0.7); --accent: oklch(0.700 0.190 38); --accent-2: oklch(0.780 0.110 240); --highlight: oklch(0.860 0.150 88); --misreg: oklch(0.700 0.190 38); --dim: 0.24; color-scheme: dark; } } :root[data-theme="dark"] { --paper: oklch(0.215 0.045 268); --paper-2: oklch(0.275 0.050 265); --ink: oklch(0.930 0.030 85); --ink-soft: oklch(0.780 0.035 80); --rule: oklch(0.93 0.03 85 / 0.7); --accent: oklch(0.700 0.190 38); --accent-2: oklch(0.780 0.110 240); --highlight: oklch(0.860 0.150 88); --misreg: oklch(0.700 0.190 38); --dim: 0.24; color-scheme: dark; } /* ---- base ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; color: var(--ink); background-color: var(--paper); font-family: var(--font-body); line-height: 1.55; overflow-x: hidden; } /* Paper: grain + long washi fibers + a soft sun-faded vignette. Night: lantern glow instead. */ .paper, body.paper { background-color: var(--paper); background-image: var(--grain), var(--fibers), radial-gradient(120% 90% at 50% 0%, oklch(1 0 0 / 0.35), transparent 60%), radial-gradient(140% 120% at 50% 110%, oklch(0.55 0.06 60 / 0.16), transparent 55%); background-size: 220px 220px, 420px 420px, 100% 100%, 100% 100%; background-attachment: fixed; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .paper, :root:not([data-theme="light"]) body.paper { background-image: var(--grain), radial-gradient(60% 40% at 18% 0%, oklch(0.70 0.19 38 / 0.22), transparent 70%), radial-gradient(50% 35% at 85% 4%, oklch(0.86 0.15 88 / 0.14), transparent 70%), radial-gradient(120% 80% at 50% 120%, oklch(0.12 0.04 270 / 0.9), transparent 60%); background-size: 220px 220px, 100% 100%, 100% 100%, 100% 100%; } } :root[data-theme="dark"] .paper, :root[data-theme="dark"] body.paper { background-image: var(--grain), radial-gradient(60% 40% at 18% 0%, oklch(0.70 0.19 38 / 0.22), transparent 70%), radial-gradient(50% 35% at 85% 4%, oklch(0.86 0.15 88 / 0.14), transparent 70%), radial-gradient(120% 80% at 50% 120%, oklch(0.12 0.04 270 / 0.9), transparent 60%); background-size: 220px 220px, 100% 100%, 100% 100%, 100% 100%; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; line-height: 1.1; } .poster { font-family: var(--font-poster); font-weight: 400; } .round { font-family: var(--font-round); } a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 2px; } /* ---- utilities ---- */ /* Rubber stamp: ink border, slight tilt, worn edges (grain used as a mask). */ .stamp { display: inline-block; padding: 0.18em 0.55em 0.12em; border: 0.14em solid currentColor; border-radius: 0.18em; color: var(--accent); font-family: var(--font-display); font-size: 0.9em; letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-4deg); -webkit-mask-image: var(--grain), linear-gradient(#000, #000); -webkit-mask-composite: source-out; mask-image: var(--grain), linear-gradient(#000, #000); mask-composite: exclude; mask-size: 90px 90px, 100% 100%; } .stamp.round { border-radius: 999px; padding: 0.5em 0.65em; } /* Off-register press: the keyline ink lands, a second ink lands a hair to the side. */ .ink-press { color: var(--ink); text-shadow: 0.055em 0.045em 0 var(--misreg); } .ink-press.indigo { --misreg: var(--ink-indigo); } .ink-press.mustard { --misreg: var(--ink-mustard); } .ink-press.boxed { box-shadow: 3px 2px 0 var(--misreg); outline: var(--rule-w) solid var(--ink); outline-offset: -1px; } /* Halftone dots that fade toward the bottom-right. Set --ht (dot color) and --ht-size. */ .halftone { position: relative; isolation: isolate; } .halftone::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, var(--ht, var(--accent)) 32%, transparent 36%); background-size: var(--ht-size, 7px) var(--ht-size, 7px); -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(120% 120% at 0% 0%, #000 10%, transparent 70%); opacity: 0.55; } /* Printed panel: double rule, no drop shadow. */ .panel { background: var(--paper); border: var(--rule-w) solid var(--rule); outline: 1px solid var(--rule); outline-offset: -6px; border-radius: var(--radius); padding: 16px 18px; } /* Stamped chip for demo queries and group-by switches. */ .chip { appearance: none; display: inline-flex; align-items: center; gap: 0.4em; min-height: 36px; padding: 0.35em 0.9em; border: var(--rule-w) solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 700 14px/1.1 var(--font-body); cursor: pointer; transition: transform var(--t-fast) var(--ease-snap), background var(--t-fast), color var(--t-fast); } .chip:hover { transform: translateY(-1px) rotate(-1deg); } .chip:active { transform: translateY(1px) scale(0.97); } .chip[aria-pressed="true"], .chip.on { background: var(--ink); color: var(--paper); box-shadow: 2px 2px 0 var(--misreg); } /* Hanko button: a square vermilion seal. */ .hanko { appearance: none; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0.4em 0.8em; border: 0; border-radius: 6px; background: var(--ink-vermilion); color: var(--ink-paper); font: 400 15px/1 var(--font-display); letter-spacing: 0.06em; box-shadow: inset 0 0 0 2px var(--ink-vermilion), inset 0 0 0 4px var(--ink-paper); cursor: pointer; transform: rotate(-2deg); transition: transform var(--t-fast) var(--ease-snap); } .hanko:hover { transform: rotate(0deg) scale(1.03); } .hanko:active { transform: rotate(-3deg) scale(0.95); } /* Search field: a ruled line on paper. */ .search-field { width: 100%; min-height: 44px; padding: 0.5em 0.2em; border: 0; border-bottom: 3px solid var(--ink); background: transparent; color: var(--ink); font: 500 18px/1.2 var(--font-body); outline: none; } .search-field::placeholder { color: var(--ink-soft); opacity: 0.8; } .search-field:focus { border-bottom-color: var(--accent); } /* Match honesty: matches at full ink, the rest recede. */ .is-dim { opacity: var(--dim); filter: saturate(0.4); transition: opacity var(--t-med) var(--ease-out), filter var(--t-med); } .is-match { opacity: 1; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }