/* ============================================================ tokens.css — design tokens for De Plaatboef Warm "crate-digger" palette pulled from the real shop signage: heavy black type, cream paper, brand red, zig-zag chevron. ============================================================ */ :root { /* ---- palette ---------------------------------------------------- */ --ink: #16130f; /* warm near-black — vinyl, body text */ --ink-soft: #3a332b; --ink-faint: #6f6557; --ink-line: #d8c9ac; /* hairline on cream */ --paper: #efe3cd; /* page background — aged cream */ --paper-2: #f6edda; /* lighter band */ --paper-card: #fffaef; /* card / panel surface */ --paper-deep: #e6d6b8; /* recessed / crate cardboard */ --white: #ffffff; --red: #c33122; /* brand red — the sign, stamps, accents */ --red-deep: #9b2117; --red-ink: #6e1209; --teal: #1c7d70; /* Utrecht accent — canal water */ --teal-deep: #115b50; --gold: #e0a93b; /* price-sticker yellow */ --gold-deep: #b67e1e; --kraft: #c79a5b; /* crate-divider cardboard tab */ /* per-location accent — overridden on */ --accent: var(--red); --accent-deep: var(--red-deep); --accent-contrast: #fff8ee; /* ---- type ------------------------------------------------------- */ --f-display: "Anton", "Arial Narrow", system-ui, sans-serif; /* poster / signage */ --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --f-mono: "Space Mono", ui-monospace, "Courier New", monospace; /* fluid display sizes */ --fs-hero: clamp(2.9rem, 9vw, 6.6rem); --fs-h1: clamp(2.1rem, 5.4vw, 3.6rem); --fs-h2: clamp(1.55rem, 3.6vw, 2.4rem); --fs-h3: clamp(1.15rem, 2vw, 1.4rem); /* ---- layout ----------------------------------------------------- */ --maxw: 1180px; --maxw-narrow: 760px; --gutter: clamp(1rem, 4vw, 2.4rem); --section-y: clamp(3rem, 7vw, 6rem); --radius: 4px; --radius-lg: 12px; /* ---- shadow ----------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(22,19,15,.10), 0 2px 5px rgba(22,19,15,.06); --shadow-md: 0 8px 20px rgba(22,19,15,.14), 0 2px 6px rgba(22,19,15,.08); --shadow-lg: 0 22px 50px rgba(22,19,15,.24); /* ---- motion ----------------------------------------------------- */ --ease: cubic-bezier(.2,.7,.3,1); --t-fast: .16s; --t-med: .3s; /* ---- signature chevron (red zig-zag, like the shop sign) -------- */ /* a row of bold red "V"s on transparent — tiles horizontally */ --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='16' viewBox='0 0 30 16'%3E%3Cpath d='M0 2 L15 14 L30 2' fill='none' stroke='%23c33122' stroke-width='6'/%3E%3C/svg%3E"); }