/*
 * Clock it Club design tokens. Every color, font, size, radius, border, shadow, spacing value
 * and component dimension of the theme is set in this file and nowhere else. style.css only
 * refers to these. Documented in docs/design-spec.md.
 *
 * The look (Oct 9 2026, the owner's second review): thin, crisp, mostly unfilled chrome on a
 * faded blue canvas. Color comes from photos and a few blocks. One-pixel borders, no shadows
 * but a one-pixel hover on cards, outlined secondary controls, two filled primaries.
 *
 * Repeated outside this file because they cannot read CSS, and to be changed with it:
 * CLOCKIT_THEME_COLOR in functions.php (= --ck-bg) and the fills in assets/favicon.svg.
 *
 * Breakpoint: one. 720px: the bottom tab bar gives way to the top nav, the hero becomes one
 * row, rails show five cards (2.6 on a phone), grids go from two to five columns, the product
 * page goes to two columns. It is a literal in style.css and in the scripts because custom
 * properties do not work in media queries.
 */
:root {
	color-scheme: light;

	/* Canvas and surfaces. Nothing is white on white: white things sit on the blue. */
	--ck-bg: #EAF4FB;
	--ck-surface: #FFFFFF;
	--ck-footer: #F2EFF8;
	--ck-fg: #1A1A1A;
	--ck-head: #111111;
	--ck-muted: #6B6670;
	--ck-on-fill: #FFFFFF;

	/* Lines: one pixel. One color on the blue canvas, one on white. */
	--ck-line-canvas: #D8E3EC;
	--ck-line: #ECE9F2;
	--ck-border: 1px;

	/* Pastels: tile overlays and the hero block. Pink is a tile color only, never a section or page background. */
	--ck-lemon: #FFF0A6;
	--ck-gum: #FFD3E3;
	--ck-sky: #C4E9F8;
	--ck-mint: #D6F3E4;
	--ck-lav: #E4DFFB;
	--ck-hero-ink: #3A3744;

	/* The two filled primaries */
	--ck-coral: #FF6B4A;
	--ck-on-coral: #111111;
	--ck-go: var(--ck-head);

	/* Verdict pills: the only filled pills on the site */
	--ck-buy-fill: #D6F3E4;
	--ck-buy-ink: #0F6B35;
	--ck-fair-fill: #FFF0A6;
	--ck-fair-ink: #6B5600;
	--ck-wait-fill: #ECE9F2;
	--ck-wait-ink: #5B5668;

	/* Price history line, by verdict stretch. Dark enough to read on white. */
	--ck-hist-buy: var(--ck-buy-ink);
	--ck-hist-fair: #9A7B00;
	--ck-hist-wait: #8A8594;
	--ck-hist-stroke: 2px;

	/* Fonts */
	--ck-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
	--ck-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;

	/* Weights */
	--ck-w-regular: 400;
	--ck-w-body: 500;
	--ck-w-semi: 600;
	--ck-w-head: 600;
	--ck-w-wordmark: 800;

	/* Type sizes */
	--ck-text-2xs: 10px;
	--ck-text-label: 11px;
	--ck-text-control: 12px;
	--ck-text-sm: 13px;
	--ck-text-md: 14px;
	--ck-text-lg: 16px;
	--ck-text-price: 18px;
	--ck-text-wordmark: 22px;
	--ck-text-total: 28px;
	--ck-text-big: 32px;
	--ck-h-hero: 34px;
	--ck-h-hero-lg: 48px;
	--ck-h-section: 20px;
	--ck-h-section-lg: 24px;
	--ck-h-product: 24px;
	--ck-h-product-lg: 30px;

	/* Line heights and letter spacing */
	--ck-lh-none: 1;
	--ck-lh-head: 1.1;
	--ck-lh-snug: 1.3;
	--ck-lh-body: 1.45;
	--ck-ls-head: -0.02em;
	--ck-ls-num: -0.02em;
	--ck-ls-control: 0.02em;
	--ck-ls-label: 0.08em;
	--ck-track-word: -0.03em;
	--ck-track-tag: 0.06em;

	/* Spacing scale */
	--ck-space-1: 4px;
	--ck-space-2: 6px;
	--ck-space-3: 8px;
	--ck-space-4: 10px;
	--ck-space-5: 12px;
	--ck-space-6: 16px;
	--ck-space-7: 20px;
	--ck-space-8: 24px;
	--ck-space-9: 32px;
	--ck-space-10: 40px;

	/* Radii. Nothing is 24px any more. */
	--ck-r-card: 12px;
	--ck-r-block: 16px;
	--ck-pill: 999px;

	/* The one shadow: a one-pixel offset under a card on hover. */
	--ck-shadow-hover: 0 1px 0 var(--ck-head);
	/* Hover on an outlined control: its one-pixel line doubles, inward. Not a shadow. */
	--ck-shadow-ring: inset 0 0 0 1px var(--ck-head);

	/* Focus, motion */
	--ck-focus: 2px;
	--ck-focus-offset: 2px;
	--ck-fade: 0.2s;
	--ck-busy-opacity: 0.5;
	--ck-off-opacity: 0.35;

	/* Layout */
	--ck-wrap: 1080px;
	--ck-gutter: 16px;
	--ck-band-gap: 24px;
	--ck-prose: 62ch;
	--ck-grid-gap: 10px;
	--ck-rail-cards: 2.6;
	--ck-rail-gaps: 2;
	--ck-rail-cards-lg: 5;
	--ck-rail-gaps-lg: 4;
	--ck-grid-cols: 2;
	--ck-grid-cols-lg: 5;

	/* Controls */
	--ck-touch: 44px;
	--ck-control: 36px;
	--ck-control-pad: 0 14px;
	--ck-btn: 48px;
	--ck-btn-pad: 0 22px;
	--ck-round: 32px;
	--ck-ico: 16px;
	--ck-ico-lg: 20px;
	--ck-ico-tab: 22px;
	--ck-ico-stroke: 1.5;
	--ck-pill-pad: 3px 8px;
	--ck-pill-ico: 12px;
	--ck-dot: 6px;
	--ck-dot-hit: 24px;
	--ck-badge: 18px;

	/* Header, hero, tab bar, toast */
	--ck-hero-lg: 200px;
	--ck-tabbar-room: 88px;
	--ck-tabbar-room-lg: 40px;
	--ck-toast-lift: 80px;
	--ck-toast-lift-lg: 24px;
	--ck-sticky-top: 16px;

	/* Cards */
	--ck-card-pad: 8px;
	--ck-card-ratio: 1 / 1;
	--ck-name-lines: 2;
	--ck-brandtile-w: 132px;
	--ck-brandtile-h: 64px;

	/* Place tiles: our own photos in grayscale, the tile color laid over at this opacity, the label in a white pill. */
	--ck-tile-ratio: 16 / 9;
	--ck-tile-ratio-lg: 16 / 9;
	--ck-tile-tint: 0.8;
	--ck-tile-pill-pad: 6px 12px;
	--ck-text-tile: 14px;

	/* Product page */
	--ck-pp-photo-max: 420px;
	--ck-hist-h: 140px;

	/* Haul */
	--ck-haul-thumb: 56px;
}