/** * The Coin Shed - design tokens * Direction: "The Cabinet" * * Single source of truth. Nothing below this file should contain a raw * colour, font stack, or spacing value. Mirrored into theme.json so the * block editor agrees with the front end. * * Deliberately light-only. A dealer's catalogue is read as paper, and coin * photography is shot on warm neutral grounds - inverting that would break * the relationship between the product image and the page around it. */ :root { /* ------------------------------------------------------------------ */ /* Colour - ground */ /* ------------------------------------------------------------------ */ /* Warm neutral paper. Never pure white: coin photography sits on warm grounds, and a cold page makes silver read blue against it. */ --tcs-paper: #F4F1EA; --tcs-paper-sunk: #EBE7DD; /* recessed areas, filter rail */ --tcs-surface: #FBF9F5; /* cards, buy box */ --tcs-surface-raised: #FFFFFF; /* overlays, dropdowns, modals */ /* Photography ground. Product images are masked onto this so a missing or inconsistent background does not fracture the grid. */ --tcs-plate: #EEEAE0; /* ------------------------------------------------------------------ */ /* Colour - ink */ /* ------------------------------------------------------------------ */ --tcs-ink: #1B1A17; /* body text, headings */ --tcs-ink-muted: #5B564C; /* specs, secondary copy */ --tcs-ink-faint: #8A8375; /* labels, meta, disabled */ --tcs-ink-inverse: #F7F5F0; --tcs-ink-inverse-muted: #CBC4B5; /* meta on photography */ /* ------------------------------------------------------------------ */ /* Colour - scrims */ /* ------------------------------------------------------------------ */ /* * Laid over photography so text stays legible. Warm, never black - a * neutral scrim on warm paper reads as a different site entirely. Held as * channels so a gradient can vary only the alpha. */ --tcs-scrim-rgb: 27, 26, 23; /* matches --tcs-ink */ --tcs-scrim-pale-rgb: 244, 241, 234; /* for pale imagery */ --tcs-scrim-strong: rgba(27, 26, 23, 0.74); --tcs-scrim-soft: rgba(27, 26, 23, 0.32); /* ------------------------------------------------------------------ */ /* Colour - ink band */ /* ------------------------------------------------------------------ */ /* * One dark ground, used for whole sections. Not a dark mode: it is a * device for breaking a long warm page into parts, and for showing metal, * which reads better on ink than on cream. Warm-black, never neutral. */ --tcs-band-ink: #23211D; --tcs-band-ink-raised: #2C2A25; /* cards sitting on the band */ --tcs-band-rule: #3D3A33; --tcs-band-rule-strong: #565147; /* ------------------------------------------------------------------ */ /* Colour - rules */ /* ------------------------------------------------------------------ */ --tcs-rule: #D8D2C4; /* standard hairline */ --tcs-rule-strong: #B9B1A0; /* section dividers */ --tcs-rule-faint: #E5E0D4; /* inside cards */ /* ------------------------------------------------------------------ */ /* Colour - accent */ /* ------------------------------------------------------------------ */ /* Oxidised green. Reads as patina on aged metal, carries authority without the finance-app connotations of navy. */ --tcs-accent: #2C4A3B; --tcs-accent-hover: #1F362A; --tcs-accent-tint: #E4EAE5; /* ------------------------------------------------------------------ */ /* Colour - metal tags */ /* ------------------------------------------------------------------ */ /* Muted pigment values for small typographic tags and 2px card edges. NEVER used as gradients or large fills. Real gold looks like gold in a photograph; a CSS gold gradient looks like a scam. */ --tcs-metal-gold: #8A6A2F; --tcs-metal-silver: #6B6F73; --tcs-metal-platinum: #55606B; --tcs-metal-copper: #93552E; --tcs-metal-none: var(--tcs-ink-faint); /* ------------------------------------------------------------------ */ /* Colour - availability states */ /* ------------------------------------------------------------------ */ /* Six genuinely different states, not six shades of grey. Roughly 72% of this catalogue is out of stock at any time, so these carry more weight than on a conventional store. Each also differs in dot fill, so the states never depend on hue alone. */ --tcs-state-instock: #2A6249; --tcs-state-instock-bg: #E3EDE7; --tcs-state-low: #8A5714; --tcs-state-low-bg: #F6EEDF; --tcs-state-preorder: #2F4F73; --tcs-state-preorder-bg: #E4EAF1; --tcs-state-backorder: #6B4A86; --tcs-state-backorder-bg: #EDE6F2; --tcs-state-comingsoon: #7A5230; --tcs-state-comingsoon-bg: #F1E8DF; --tcs-state-soldout: #6E6659; --tcs-state-soldout-bg: #E8E4DA; /* Feedback */ --tcs-error: #A22B20; --tcs-error-bg: #F6E4E2; --tcs-success: var(--tcs-state-instock); /* Sale */ --tcs-sale: #A2402B; /* ------------------------------------------------------------------ */ /* Typography - families */ /* ------------------------------------------------------------------ */ /* * Serif carries product names, series names and editorial headings only. * It never touches UI, prices, or specifications. * * System stack for now - no third-party font requests, no privacy * exposure, no render-blocking. Licensing a proper engraved-quality * serif later is a change to this one line. */ --tcs-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Hoefler Text", Georgia, "Times New Roman", serif; /* Grotesque carries all UI, navigation, specs and numerals. */ --tcs-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Reserved for the bullion table view (the Ledger borrowing). */ --tcs-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ------------------------------------------------------------------ */ /* Typography - scale */ /* ------------------------------------------------------------------ */ /* Fluid, ~1.2 ratio at small sizes widening to ~1.25 at display sizes. */ --tcs-text-3xs: 0.6875rem; /* 11px - metal tags, fine print */ --tcs-text-2xs: 0.75rem; /* 12px - labels, small caps */ --tcs-text-xs: 0.8125rem; /* 13px - spec values, meta */ --tcs-text-sm: 0.875rem; /* 14px - secondary UI */ --tcs-text-base: 1rem; /* 16px - body */ --tcs-text-md: 1.125rem; /* 18px - lead paragraphs */ --tcs-text-lg: clamp(1.25rem, 0.6vw + 1.1rem, 1.375rem); --tcs-text-xl: clamp(1.5rem, 1vw + 1.25rem, 1.75rem); --tcs-text-2xl: clamp(1.875rem, 1.6vw + 1.5rem, 2.375rem); --tcs-text-3xl: clamp(2.25rem, 2.6vw + 1.7rem, 3.25rem); /* Line heights */ --tcs-leading-tight: 1.15; --tcs-leading-snug: 1.3; --tcs-leading-normal: 1.55; --tcs-leading-relaxed: 1.7; /* Tracking */ --tcs-tracking-tight: -0.015em; --tcs-tracking-normal: 0; --tcs-tracking-label: 0.08em; /* small-caps labels */ --tcs-tracking-wide: 0.12em; /* eyebrow text */ /* Weights */ --tcs-weight-regular: 400; --tcs-weight-medium: 500; --tcs-weight-semibold: 600; --tcs-weight-bold: 700; /* Measure */ --tcs-measure: 68ch; /* body copy */ --tcs-measure-tight: 46ch; /* headings, intros */ /* ------------------------------------------------------------------ */ /* Spacing - 4px base */ /* ------------------------------------------------------------------ */ --tcs-space-3xs: 0.125rem; /* 2px */ --tcs-space-2xs: 0.25rem; /* 4px */ --tcs-space-xs: 0.5rem; /* 8px */ --tcs-space-sm: 0.75rem; /* 12px */ --tcs-space-md: 1rem; /* 16px */ --tcs-space-lg: 1.5rem; /* 24px */ --tcs-space-xl: 2rem; /* 32px */ --tcs-space-2xl: 3rem; /* 48px */ --tcs-space-3xl: 4rem; /* 64px */ --tcs-space-4xl: 6rem; /* 96px */ /* Section rhythm - fluid so mobile does not inherit desktop airiness. */ --tcs-section-gap: clamp(2.5rem, 5vw, 4.5rem); /* ------------------------------------------------------------------ */ /* Layout */ /* ------------------------------------------------------------------ */ --tcs-container: 1320px; --tcs-container-text: 760px; --tcs-container-checkout: 1180px; /* forms read badly wider than this */ --tcs-gutter: clamp(1rem, 3vw, 2rem); /* Product grid. Collectibles browse at 3-across; bullion overrides to 4 with tighter gutters via .tcs-context-bullion. */ --tcs-grid-columns: 3; --tcs-grid-gap: clamp(1rem, 2vw, 1.75rem); /* ------------------------------------------------------------------ */ /* Shape */ /* ------------------------------------------------------------------ */ /* Near-square. Catalogue plates and assay cards have corners. */ --tcs-radius-sm: 2px; --tcs-radius: 3px; --tcs-radius-lg: 4px; --tcs-radius-pill: 999px; --tcs-border: 1px solid var(--tcs-rule); --tcs-border-faint: 1px solid var(--tcs-rule-faint); --tcs-border-strong: 1px solid var(--tcs-rule-strong); /* Structure comes from rules, not shadows. These are for genuinely floating UI only - dropdowns, mini-cart, modals. */ --tcs-shadow-raised: 0 1px 2px rgba(27, 26, 23, 0.06), 0 4px 12px rgba(27, 26, 23, 0.08); --tcs-shadow-overlay: 0 2px 4px rgba(27, 26, 23, 0.08), 0 12px 32px rgba(27, 26, 23, 0.14); /* ------------------------------------------------------------------ */ /* Motion */ /* ------------------------------------------------------------------ */ --tcs-duration-fast: 120ms; --tcs-duration: 180ms; --tcs-duration-slow: 280ms; --tcs-ease: cubic-bezier(0.2, 0, 0.2, 1); /* ------------------------------------------------------------------ */ /* Focus - WCAG 2.2 AA */ /* ------------------------------------------------------------------ */ --tcs-focus-width: 2px; --tcs-focus-offset: 2px; --tcs-focus-color: var(--tcs-accent); /* ------------------------------------------------------------------ */ /* Z-index scale */ /* ------------------------------------------------------------------ */ --tcs-z-base: 1; --tcs-z-raised: 2; /* lifted above a sibling image, below any UI */ --tcs-z-sticky: 100; --tcs-z-header: 200; --tcs-z-dropdown: 300; --tcs-z-overlay: 400; --tcs-z-modal: 500; --tcs-z-skiplink: 600; } /* ---------------------------------------------------------------------- */ /* Bullion context - the Ledger borrowing */ /* */ /* Same tokens, higher density. Not a second design language: only the */ /* grid and rhythm variables change. */ /* ---------------------------------------------------------------------- */ .tcs-context-bullion { --tcs-grid-columns: 4; --tcs-grid-gap: clamp(0.75rem, 1.2vw, 1rem); --tcs-section-gap: clamp(2rem, 3.5vw, 3rem); } @media (max-width: 640px) { :root { --tcs-grid-columns: 2; } .tcs-context-bullion { --tcs-grid-columns: 2; } } /* ---------------------------------------------------------------------- */ /* Reduced motion */ /* ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --tcs-duration-fast: 0ms; --tcs-duration: 0ms; --tcs-duration-slow: 0ms; } } /* ---------------------------------------------------------------------- */ /* Forced colours / high contrast */ /* ---------------------------------------------------------------------- */ @media (forced-colors: active) { :root { --tcs-focus-color: Highlight; } }