/* ========================================================================== Design tokens Four palettes named after watch dials, each with light and dark variants. Every colour is derived from a few source values per theme (hue + chroma), using oklch(), color-mix() and light-dark(). The server renders both attributes from the visitor's cookie, so the first paint is already correct. "auto" follows the operating-system setting. ========================================================================== */ @layer reset, tokens, base, layout, components, utilities; /* Registered so it can be transitioned (the glow on the context tiles). */ @property --tile-glow { syntax: ""; inherits: false; initial-value: 60%; } @layer tokens { /* ---- Theme source values ------------------------------------------- */ :root, :root[data-theme="navy"] { --h: 258; /* dial hue: deep sunburst navy */ --c: 0.085; /* dial chroma */ --metal-h: 82; /* brass/gold ornament hue */ } :root[data-theme="racing"] { --h: 158; /* British racing green */ --c: 0.07; --metal-h: 85; } :root[data-theme="tropical"] { --h: 58; /* the warm brown of a faded "tropical" dial */ --c: 0.065; --metal-h: 78; } :root[data-theme="oxblood"] { --h: 22; /* oxblood */ --c: 0.1; --metal-h: 80; } :root { color-scheme: light dark; } :root[data-mode="light"] { color-scheme: light; } :root[data-mode="dark"] { color-scheme: dark; } /* ---- Derived colour tokens ------------------------------------------ */ :root { /* Surfaces: paper in light mode, the dial itself in dark mode. */ --bg: light-dark(oklch(98.4% calc(var(--c) * .08) var(--h)), oklch(18% calc(var(--c) * .6) var(--h))); --surface: light-dark(oklch(96.4% calc(var(--c) * .14) var(--h)), oklch(22% calc(var(--c) * .6) var(--h))); --surface-2: light-dark(oklch(93.2% calc(var(--c) * .2) var(--h)), oklch(26.5% calc(var(--c) * .6) var(--h))); --surface-sunk: light-dark(oklch(95% calc(var(--c) * .16) var(--h)), oklch(15.5% calc(var(--c) * .6) var(--h))); /* Text */ --text: light-dark(oklch(21% calc(var(--c) * .4) var(--h)), oklch(94.5% calc(var(--c) * .1) var(--h))); --text-muted: light-dark(oklch(43% calc(var(--c) * .35) var(--h)), oklch(77% calc(var(--c) * .2) var(--h))); --text-faint: light-dark(oklch(52% calc(var(--c) * .3) var(--h)), oklch(67% calc(var(--c) * .2) var(--h))); /* large text & icons only */ /* Lines: --border is decorative; --border-strong meets 3:1 for form controls. */ --border: light-dark(oklch(87% calc(var(--c) * .25) var(--h)), oklch(33% calc(var(--c) * .5) var(--h))); --border-strong: light-dark(oklch(55% calc(var(--c) * .35) var(--h)), oklch(60% calc(var(--c) * .3) var(--h))); /* The dial colour: links, primary buttons, emphasis. */ --accent: light-dark(oklch(35% var(--c) var(--h)), oklch(81% calc(var(--c) * .95) var(--h))); --accent-strong: light-dark(oklch(27% var(--c) var(--h)), oklch(89% calc(var(--c) * .7) var(--h))); --on-accent: light-dark(oklch(98.5% calc(var(--c) * .08) var(--h)), oklch(17% calc(var(--c) * .6) var(--h))); --accent-soft: color-mix(in oklch, var(--accent) 12%, var(--bg)); /* A fixed deep dial band (hero, footer) that stays dark in both modes. */ --dial: oklch(22% var(--c) var(--h)); --dial-deep: oklch(15% calc(var(--c) * .8) var(--h)); --on-dial: oklch(95% calc(var(--c) * .1) var(--h)); --on-dial-muted: oklch(80% calc(var(--c) * .25) var(--h)); /* Brass: hairlines, ornaments, the reference-number frame. */ --metal: light-dark(oklch(50% .085 var(--metal-h)), oklch(80% .1 var(--metal-h))); --metal-on-dial: oklch(80% .1 var(--metal-h)); /* Status */ --success: light-dark(oklch(44% .11 150), oklch(82% .13 150)); --warning: light-dark(oklch(48% .11 65), oklch(85% .13 82)); --danger: light-dark(oklch(47% .16 27), oklch(79% .12 25)); --success-bg: color-mix(in oklch, var(--success) 11%, var(--bg)); --warning-bg: color-mix(in oklch, var(--warning) 12%, var(--bg)); --danger-bg: color-mix(in oklch, var(--danger) 10%, var(--bg)); /* The three contexts keep their own identity in every theme. */ --ctx-screen: light-dark(oklch(40% .09 250), oklch(82% .08 250)); --ctx-carpet: light-dark(oklch(43% .15 25), oklch(81% .1 22)); --ctx-wild: light-dark(oklch(41% .09 135), oklch(83% .1 135)); --focus: light-dark(oklch(45% .19 262), oklch(82% .14 250)); --selection: color-mix(in oklch, var(--accent) 22%, transparent); --scrim: oklch(10% .02 var(--h) / .72); } /* ---- Typography ------------------------------------------------------ */ /* Chosen pairing (Marc, 2026-09-27): Cormorant Garamond for display, Source Serif 4 for text. */ :root { --font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif; --font-text: "Source Serif 4", Georgia, "Times New Roman", serif; --font-ui: var(--font-text); --display-weight: 600; --display-tracking: 0; } /* The alternative pairing, kept only for comparison on /styleguide. */ :root[data-fonts="a"] { --font-display: "Bodoni Moda", "Bodoni 72", Didot, "Libre Bodoni", Georgia, serif; --font-text: "Public Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; --font-ui: var(--font-text); --display-weight: 500; --display-tracking: .005em; } /* Fluid type scale (1.2 → 1.25 ratio between 360px and 1280px). */ :root { --step--2: clamp(.72rem, .7rem + .1vw, .78rem); --step--1: clamp(.83rem, .81rem + .12vw, .9rem); --step-0: clamp(1rem, .97rem + .15vw, 1.08rem); --step-1: clamp(1.2rem, 1.15rem + .25vw, 1.35rem); --step-2: clamp(1.44rem, 1.35rem + .45vw, 1.7rem); --step-3: clamp(1.73rem, 1.57rem + .75vw, 2.2rem); --step-4: clamp(2.07rem, 1.8rem + 1.2vw, 2.9rem); --step-5: clamp(2.49rem, 2.05rem + 2vw, 3.9rem); --step-6: clamp(3rem, 2.3rem + 3.2vw, 5.4rem); --leading: 1.6; --leading-tight: 1.15; --measure: 68ch; } /* ---- Space, shape, motion ------------------------------------------- */ :root { --space-3xs: clamp(.25rem, .24rem + .05vw, .28rem); --space-2xs: clamp(.5rem, .48rem + .1vw, .56rem); --space-xs: clamp(.75rem, .72rem + .15vw, .84rem); --space-s: clamp(1rem, .96rem + .2vw, 1.12rem); --space-m: clamp(1.5rem, 1.43rem + .3vw, 1.69rem); --space-l: clamp(2rem, 1.9rem + .45vw, 2.25rem); --space-xl: clamp(3rem, 2.85rem + .65vw, 3.4rem); --space-2xl: clamp(4rem, 3.7rem + 1.3vw, 5rem); --space-3xl: clamp(6rem, 5.4rem + 2.6vw, 8rem); --gutter: max(16px, var(--space-m)); --page-max: 78rem; --radius-s: 2px; --radius-m: 4px; --radius-pill: 999px; --hairline: 1px; --shadow-s: 0 1px 2px oklch(20% .02 var(--h) / .08); --shadow-m: 0 2px 6px oklch(20% .02 var(--h) / .08), 0 12px 32px -12px oklch(20% .04 var(--h) / .22); --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in-out: cubic-bezier(.6, 0, .3, 1); --dur-fast: 140ms; --dur-med: 260ms; --dur-slow: 520ms; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; } } } /* Very old browsers without light-dark(): fall back to a readable light palette. */ @supports not (color: light-dark(#fff, #000)) { :root { --bg: #fbfbfd; --surface: #f3f4f7; --surface-2: #e9ebf0; --surface-sunk: #eef0f4; --text: #15171c; --text-muted: #4d525c; --text-faint: #666b75; --border: #d8dbe2; --border-strong: #6d7380; --accent: #1d2c4f; --accent-strong: #121c35; --on-accent: #fff; --accent-soft: #e6e9f0; --metal: #7a6331; --focus: #2346c9; --success: #1f6b3a; --warning: #7a5410; --danger: #a3202a; --success-bg: #e8f3ec; --warning-bg: #f7efe0; --danger-bg: #f9e7e8; --ctx-screen: #2d4a7a; --ctx-carpet: #9b2f2a; --ctx-wild: #3b5d2a; } }