/* GRAPHIX design tokens — the single source of every colour, space, size and duration in the project. Nothing outside this file may declare a raw colour, spacing, radius, font size or duration (plan §4). If a value is needed and no token fits, the token is added here first. The palette is deliberately dark but never pure black: three warm charcoal surfaces layered above a warm charcoal ground, so panels separate by material rather than by outline. One accent — brass — and it is spent only on price, the chosen size, and the primary action (§17 #45). */ :root { /* ---------------------------------------------------------------- colour */ /* grounds, darkest first */ --c-bg: #100E0C; /* page */ --c-surface: #17140F; /* panels sitting on the page */ --c-surface-2: #211C15; /* controls and panels sitting on a panel */ --c-surface-3: #2A241B; /* hover / pressed on --c-surface-2 */ /* ink. Never #fff: pure white halates on a dark ground and makes type look thin, which is the exact fault that sank the first design round. */ --c-fg: #EFE9DE; --c-fg-muted: #B0A697; /* secondary text, labels */ --c-fg-subtle: #7D7466; /* disabled and decorative ONLY - 4.18:1 at best, so it must never carry text a visitor has to read. Phase 5's audit found it doing exactly that in the footer (§17 #67). */ --c-fg-hint: #958A79; /* quiet but readable: placeholders, timestamps, fine print. 4.53:1 on the darkest ground in the system, so it clears AA everywhere. */ /* lines */ --c-line: #2C2620; /* hairline between rows */ --c-line-strong: #453D31; /* panel edges, dividers, decorative frames */ /* The boundary of anything a visitor operates: a field, a checkbox, a size button, a filter chip. WCAG 2.1 asks 3:1 of a control's boundary against what is behind it, because the border is often the only thing saying the control is there at all - an unticked checkbox is a border and nothing else. --c-line-strong is 1.8:1 on the page ground and cannot carry that job; this is 3.54:1 (§17 #188, §19 Q22). */ --c-line-control: #756853; /* brand accent */ --c-brand: #C6A44E; --c-brand-hover: #D6B662; --c-brand-fg: #171205; /* ink placed ON --c-brand */ --c-brand-bg: #241D0E; /* tinted ground for brand-flavoured panels */ /* state. Semantic only — never used as decoration, and never as the accent. */ --c-success: #86BE72; --c-success-bg: #16210F; --c-warning: #D9A441; --c-warning-bg: #241B0B; --c-danger: #E07A62; --c-danger-bg: #2A140F; --c-info: #8AB4CE; --c-info-bg: #101D24; /* The scrim behind anything that covers the page - drawer, filter sheet, modal. One value, so every dimmed page dims by the same amount; three hand-written color-mix() calls had already drifted to two. */ --c-scrim: color-mix(in srgb, #000 60%, transparent); /* ---------------------------------------------------------------- space */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10:128px; /* ----------------------------------------------------------------- type */ --f-display: "Playfair Display", Georgia, "Times New Roman", serif; --f-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px; --fs-4xl: 40px; --fs-5xl: 56px; --fs-6xl: 72px; --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.55; --lh-loose: 1.75; /* 500 is the floor for body copy on this ground, not 400 (§17 #46). */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; --ls-tight: -.02em; --ls-normal: 0; --ls-wide: .06em; --ls-caps: .16em; /* --------------------------------------------------------------- radius */ --r-sm: 3px; --r-md: 6px; --r-lg: 14px; --r-full: 999px; /* -------------------------------------------------------------- shadow */ --sh-sm: 0 1px 2px rgba(0,0,0,.34); --sh-md: 0 4px 16px rgba(0,0,0,.42); --sh-lg: 0 18px 48px rgba(0,0,0,.55); /* -------------------------------------------------------------- motion */ --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; --ease-out: cubic-bezier(.16, 1, .3, 1); /* -------------------------------------------------------------- layout */ --container: 1280px; --pad-x: clamp(16px, 5vw, 48px); /* The sticky header's height: 44 px of tap target, its own padding, and the rule under it. Anything that scrolls a target into view has to clear it, and until this existed the one place that tried used a spacing token that happened to be five pixels short — so the reviews heading landed *under* the header every time somebody tapped the rating. `.nav` pins itself to this value, so the token is the measurement rather than a guess about it. */ --nav-h: calc(44px + 2 * var(--s-3) + 1px); /* The home page's promotional cards. Two shapes, because the card is as wide as the screen either way and one ratio cannot be right for both: on a phone that is a tall-ish banner, on a laptop a long strip. The owner is told to keep anything important near the middle, because the same file is cropped both ways (§17 #257). */ --ar-slide: 16 / 9; /* Product imagery is 4:5 across the whole catalogue (§8). */ --ar-product: 4 / 5; /* One photograph must never take more than one screen (§17 #47). */ --pdp-image-max: min(76vh, 760px); --pdp-buy-col: 430px; /* The legal documents: the contents rail beside the text from 1024 px, and the label column of their fact lists from 720 px. */ --legal-rail: 240px; --legal-label: 200px; /* ------------------------------------------------------------- z-index */ --z-sticky: 50; --z-drawer: 100; --z-modal: 200; --z-toast: 300; } /* Breakpoints, for reference — CSS custom properties cannot be used in media queries, so these are written literally throughout and listed here so the set stays closed: 360 480 720 860 1024 1280 1600 860 is the one that matters most: it is where the product page becomes two columns and the mobile buy-bar disappears. */