/** * Tokyo Time — design tokens. * * Every colour, space and size in page.css refers to something here. One file * to change to restyle the site, and no hex code written twice. * * ── Light by default, and why that changed ─────────────────────────────── * This file used to be dark-first, on the reasoning that steel cases and * black dials photograph better against a dark ground. That is true of a * photograph in isolation and beside the point for a classifieds site: the * job of the page is to make a price, a condition and a location scannable * down a column of twenty results, and dark grounds cost contrast on exactly * the small grey text those rows are made of. * * Every large classifieds site in this market is light for the same reason. * So light is now the default and dark is a deliberate choice the reader * makes, kept in full because some people genuinely cannot read dark text on * white, which is an accessibility need rather than a preference. * * ── Three ways the theme is decided, in order ──────────────────────────── * 1. data-theme="light" or "dark" on — the reader chose, and their * choice beats everything else. * 2. prefers-color-scheme: dark with no explicit choice — follow the OS. * 3. Nothing set — light. * * The dark values are therefore written TWICE: once under the media query * guarded by :not([data-theme="light"]), and once under [data-theme="dark"] * so a reader on a dark OS can still force light and a reader on a light OS * can still force dark. Guarding is what makes the toggle work in both * directions; without it the media query would silently win one way. */ :root { /* ── ground and ink ─────────────────────────────────────────────── */ /* `bg` is the page, `surface` is a card sitting on it, `sunken` is a well cut into it (search panels, filter rails, the footer). Cards are white on near-white rather than white on white — the separation is what makes a grid of results read as a grid of objects. */ --bg: #f2f4f7; --surface: #ffffff; --bg-raised: #ffffff; --bg-sunken: #e9edf2; --bg-hover: #eef2f7; --line: #dde3ea; --line-strong: #b9c3cf; --ink: #0d1b2a; --ink-muted: #4d5b6b; --ink-faint: #77869a; /* ── accent ─────────────────────────────────────────────────────── */ /* A deep confident blue carries the actions, which is the convention this whole category runs on: a shopper arriving from a car or property site already knows the blue thing is the button. */ --accent: #0b5cd5; --accent-hi: #0a4fb8; --accent-ink: #ffffff; --accent-wash: #e8f0fd; --accent-line: #b9d1f8; /* The old red survives as the paid-placement colour and nothing else, so "Featured" is never mistaken for a button. */ --hot: #d21f45; --hot-ink: #ffffff; --good: #0f7b52; --good-wash: #e3f5ec; --warn: #a9620a; --warn-wash: #fdf1de; --bad: #c22a2a; --bad-wash: #fdeaea; /* ── type ───────────────────────────────────────────────────────── */ --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --t-xs: 0.75rem; --t-sm: 0.8125rem; --t-base: 0.9375rem; --t-md: 1.0625rem; --t-lg: 1.25rem; --t-xl: 1.5rem; --t-2xl: 1.875rem; --t-3xl: 2.375rem; --t-4xl: 3rem; /* ── space ──────────────────────────────────────────────────────── */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; /* Softer, larger corners than before. Cards at 12px and controls at 8px is the shape language this category uses. */ --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-full: 999px; /* Elevation is carried by shadow rather than by a lighter fill, because on a light ground there is nothing lighter than a white card to go to. */ --shadow-sm: 0 1px 2px rgba(13, 27, 42, .06); --shadow: 0 1px 3px rgba(13, 27, 42, .08), 0 4px 12px rgba(13, 27, 42, .05); --shadow-md: 0 2px 6px rgba(13, 27, 42, .10), 0 12px 24px rgba(13, 27, 42, .07); --shadow-lg: 0 12px 32px rgba(13, 27, 42, .14); /* Focus is a ring rather than a border swap, so a focused control does not change size and shift everything beside it. */ --ring: 0 0 0 3px var(--accent-line); --wrap: 1240px; --wrap-narrow: 760px; /* The header is sticky, so its height is a number several other things need — sticky sidebars, scroll-margin on anchors. One token. */ --head-h: 64px; --ease: cubic-bezier(.2,.7,.3,1); color-scheme: light; } /** * Dark. * * Not the light palette inverted — a dark theme needs its own decisions. The * surfaces step UP from the page rather than down, borders carry more of the * separation because shadows barely register on a dark ground, and the blue * is lifted several steps because #0b5cd5 on near-black fails contrast for * the small text that sits on it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e141b; --surface: #161d26; --bg-raised: #161d26; --bg-sunken: #0a0f15; --bg-hover: #1e2833; --line: #26313d; --line-strong: #3b4857; --ink: #eef2f7; --ink-muted: #a8b4c3; --ink-faint: #758394; --accent: #3d8bfd; --accent-hi: #5c9eff; --accent-ink: #06121f; --accent-wash: #12233a; --accent-line: #1e3f66; --hot: #f04a6b; --hot-ink: #12060a; --good: #34d399; --good-wash: #0f2a20; --warn: #fbbf24; --warn-wash: #2c2109; --bad: #f87171; --bad-wash: #2d1414; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .4); --shadow-md: 0 2px 6px rgba(0, 0, 0, .6), 0 12px 24px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0e141b; --surface: #161d26; --bg-raised: #161d26; --bg-sunken: #0a0f15; --bg-hover: #1e2833; --line: #26313d; --line-strong: #3b4857; --ink: #eef2f7; --ink-muted: #a8b4c3; --ink-faint: #758394; --accent: #3d8bfd; --accent-hi: #5c9eff; --accent-ink: #06121f; --accent-wash: #12233a; --accent-line: #1e3f66; --hot: #f04a6b; --hot-ink: #12060a; --good: #34d399; --good-wash: #0f2a20; --warn: #fbbf24; --warn-wash: #2c2109; --bad: #f87171; --bad-wash: #2d1414; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .4); --shadow-md: 0 2px 6px rgba(0, 0, 0, .6), 0 12px 24px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6); color-scheme: dark; }