/* ============================================================ Kelldor Design Tokens — single source of truth "The Privilege Is Within" See workspace/wiki/website/visual-style-guide.md for usage. Aligned with ingest/design-system-2026-05-03/project/colors_and_type.css ============================================================ */ :root { /* ─── COLOR TOKENS ─────────────────────────────────────── */ /* Plum / Vault family — backgrounds, panels, depth */ --brand-abyss: #120A10; --brand-dark: #1A0D16; --brand-plum: #2D1025; --brand-wine: #3D1535; --brand-muted: #5A2650; --brand-purple: #702963; --brand-violet: #8E3580; /* Cream / Tan family — text, leather, warmth */ --brand-cream: #E8DDD0; --brand-tan: #D4C5B5; --brand-warm: #B8A898; --brand-white: #F5F0EB; /* Gold family — the only true accent (hardware echoes, hairlines) */ --brand-gold: #C8A96A; --brand-gold-soft: rgba(200, 169, 106, 0.45); --brand-gold-faint: rgba(200, 169, 106, 0.18); /* Fourfold tier accents (Raekwon, 2026-09-22, from the FOURFOLD doc §27). Brass is the warmer, dimmer gold a solved LAYERED card wears; amethyst and orchid are the two lighter plums the HIDDEN and VEILED cards wear. Numerals, borders and a faint wash only — never a fill, never a surface. */ --brand-brass: #C2A55A; --brand-amethyst: #C767B4; --brand-orchid: #A64696; /* Metal materials for the member Marks (Raekwon's Marks brief, 2026-09-23; values tuned against the reference board in the look test). Per metal: light = lit edges, polish and glints; base = the body; dark = tarnish and patina; deep = grime and recesses; patina = how dark the sunk fields go (0–1). Brass is an acquired Mark, gunmetal a locked one (an undiscovered artifact, never a faded gold), polished brass a rare Special Mark. The lamp is the warm light marks-art.js shines on all of them. Object fills only — never a text colour, never a surface behind copy. Not mirrored in tokens.js (the drift hook mirrors brand-* colours only; nothing in Tailwind needs these). The Showroom (showroom.html, 2026-09-24) lights its room and cases with the same lamp and fits its cases in the same brass and blackened metal: one light, one brass, sitewide. */ --metal-lamp: #FFF0DA; --metal-brass-light: #F2C98E; --metal-brass: #83603F; --metal-brass-dark: #4D331C; --metal-brass-deep: #150B05; --metal-brass-patina: 0.5; --metal-gunmetal-light: #B3ACA3; --metal-gunmetal: #3F3C3A; --metal-gunmetal-dark: #242120; --metal-gunmetal-deep: #0A0908; --metal-gunmetal-patina: 0.6; --metal-polished-light: #FFD98F; --metal-polished: #BF8F4A; --metal-polished-dark: #80582A; --metal-polished-deep: #2E1D0A; --metal-polished-patina: 0.15; /* RGB-channel companions for rgba() with arbitrary alpha: rgba(var(--brand-purple-rgb), 0.3) */ --brand-abyss-rgb: 18, 10, 16; --brand-dark-rgb: 26, 13, 22; --brand-plum-rgb: 45, 16, 37; --brand-purple-rgb: 112, 41, 99; --brand-violet-rgb: 142, 53, 128; --brand-cream-rgb: 232, 221, 208; --brand-gold-rgb: 200, 169, 106; --brand-tan-rgb: 212, 197, 181; --brand-warm-rgb: 184, 168, 152; --brand-brass-rgb: 194, 165, 90; --brand-amethyst-rgb: 199, 103, 180; --brand-orchid-rgb: 166, 70, 150; --metal-lamp-rgb: 255, 240, 218; /* the lamp as light: rgba(var(--metal-lamp-rgb), 0.08) */ /* ─── SEMANTIC ROLE BINDINGS — prefer these in components ─ */ --bg: var(--brand-dark); --bg-elevated: var(--brand-plum); --bg-floating: var(--brand-wine); --bg-deepest: var(--brand-abyss); --fg: var(--brand-cream); --fg-body: var(--brand-tan); --fg-muted: var(--brand-warm); --fg-high: var(--brand-white); --accent: var(--brand-purple); --accent-hover: var(--brand-violet); --border: rgba(var(--brand-purple-rgb), 0.20); /* used for plum-tinted borders */ --border-soft: rgba(var(--brand-purple-rgb), 0.10); --border-hard: rgba(var(--brand-purple-rgb), 0.35); --danger: rgba(220, 80, 80, 0.80); /* ─── TYPOGRAPHY ───────────────────────────────────────── */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Outfit', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale — luxury editorial hierarchy */ --text-10: 10px; --text-11: 11px; --text-12: 12px; --text-14: 14px; --text-16: 16px; --text-18: 18px; --text-20: 20px; --text-24: 24px; --text-30: 30px; --text-36: 36px; --text-48: 48px; --text-60: 60px; --text-72: 72px; --text-96: 96px; --text-128: 128px; /* Tracking — the most important type decision */ --tracking-wide: 0.06em; /* slogan italic */ --tracking-wider: 0.12em; /* footer nav */ --tracking-widest: 0.18em; /* nav links, buttons */ --tracking-label: 0.25em; /* eyebrows, labels */ --tracking-wordmark: 0.30em; /* KELLDOR wordmark large */ --tracking-tight: -0.02em; /* display headings */ --tracking-snug: -0.01em; /* mid-size headings */ /* Line-height */ --leading-display: 1.05; --leading-heading: 1.1; --leading-body: 1.7; --leading-loose: 1.8; /* Weight */ --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ─── SPACING ──────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; --section-y: 96px; --section-y-lg: 144px; /* ─── RADII ────────────────────────────────────────────── */ /* Luxury wears sharp edges. 2px is the default. */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-full: 9999px; /* ─── SHADOWS ──────────────────────────────────────────── */ /* All cool — abyss-tinted, never black. */ --shadow-card: 0 4px 24px rgba(var(--brand-abyss-rgb), 0.50), 0 1px 4px rgba(var(--brand-abyss-rgb), 0.30); --shadow-floating: 0 8px 48px rgba(var(--brand-abyss-rgb), 0.60), 0 0 0 1px rgba(var(--brand-cream-rgb), 0.03); --shadow-modal: 0 8px 48px rgba(var(--brand-abyss-rgb), 0.70), 0 0 0 1px rgba(var(--brand-cream-rgb), 0.04); --shadow-nav: 0 2px 16px rgba(var(--brand-abyss-rgb), 0.50); --shadow-btn-hover: 0 8px 32px rgba(var(--brand-purple-rgb), 0.30), 0 2px 8px rgba(var(--brand-purple-rgb), 0.20); --shadow-glow: 0 0 80px rgba(var(--brand-purple-rgb), 0.15); /* ─── MOTION ───────────────────────────────────────────── */ /* One easing for 95% of moves; spring for entrances; sharp for error. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-vault: cubic-bezier(0.65, 0, 0.35, 1); --ease-sharp: cubic-bezier(0.36, 0.07, 0.19, 0.97); --dur-fast: 200ms; --dur-base: 300ms; --dur-slow: 600ms; --dur-entrance: 800ms; /* ─── BACKGROUND RECIPES ───────────────────────────────── */ /* Reusable radial-glow recipes. Compose with `background-image`. */ --bg-radial-hero-center: radial-gradient( ellipse at 50% 35%, rgba(var(--brand-purple-rgb), 0.12) 0%, rgba(var(--brand-purple-rgb), 0.04) 30%, transparent 60% ); --bg-radial-soft-top: radial-gradient( ellipse at 50% 0%, rgba(var(--brand-purple-rgb), 0.10) 0%, transparent 55% ); --bg-side-accents: radial-gradient(ellipse at 15% 50%, rgba(var(--brand-violet-rgb), 0.04) 0%, transparent 40%), radial-gradient(ellipse at 85% 50%, rgba(var(--brand-violet-rgb), 0.04) 0%, transparent 40%); } /* ============================================================ ADMIN SURFACE — dark graphite + champagne (Raekwon's UI design system, 2026-09-11: ingest/company/admin-dashboard-ui-design-system-2026-09-11.md) Scoped to : the internal dashboard re-binds the semantic roles above to its own palette and adds the status set the customer site never needs. The site keeps plum; the admin reads graphite. Raw values first, roles second — components use the roles. ============================================================ */ .admin { /* Graphite family — surfaces */ --graphite-sidebar: #0C0D0F; --graphite-main: #111214; --graphite-card: #17191C; --graphite-field: #141619; --graphite-raised: #1E2125; --graphite-line: #2A2E33; --graphite-line-strong: #3A3E44; /* Type family — off-white, never pure white */ --graphite-text: #F2F3F4; --graphite-text-2: #A7ADB5; --graphite-text-3: #737A84; /* Champagne — the one accent, used sparingly */ --champagne: #C5A46D; --champagne-hover: #D4B77F; /* Operational status — conventional colours, always beside a word */ --status-success: #55B886; --status-warning: #D6A34B; --status-error: #D96B6B; --status-critical: #EF5350; --status-info: #7EA7D8; /* RGB companions for rgba(var(--x-rgb), alpha) tints */ --champagne-rgb: 197, 164, 109; --status-success-rgb: 85, 184, 134; --status-warning-rgb: 214, 163, 75; --status-error-rgb: 217, 107, 107; --status-critical-rgb: 239, 83, 80; --status-info-rgb: 126, 167, 216; --highlight-rgb: 255, 255, 255; /* hover washes: rgba(255,255,255,0.035) */ --shade-rgb: 0, 0, 0; /* the one permitted shadow and the modal overlay */ /* ─── Roles (the names the design system uses) ─────────── */ --bg-main: var(--graphite-main); --bg-sidebar: var(--graphite-sidebar); --bg-card: var(--graphite-card); --bg-field: var(--graphite-field); --bg-elevated: var(--graphite-raised); --border: var(--graphite-line); --border-strong: var(--graphite-line-strong); --text-primary: var(--graphite-text); --text-secondary: var(--graphite-text-2); --text-muted: var(--graphite-text-3); --accent: var(--champagne); --accent-hover: var(--champagne-hover); --accent-rgb: var(--champagne-rgb); --success: var(--status-success); --warning: var(--status-warning); --error: var(--status-error); --critical: var(--status-critical); --info: var(--status-info); /* The site's role names, re-bound so shared primitives read graphite too */ --bg: var(--bg-main); --bg-deepest: var(--bg-sidebar); --bg-floating: var(--bg-elevated); --fg: var(--text-primary); --fg-high: var(--text-primary); --fg-body: var(--text-primary); --fg-muted: var(--text-muted); --border-soft: var(--graphite-line); --border-hard: var(--graphite-line-strong); --danger: var(--status-error); /* Type: Inter for everything operational, the serif for titles only */ --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: var(--font-ui); /* Density: 14px base, refined radii (10px cards, 8px controls, 6px nav) */ --text-13: 13px; --text-15: 15px; --text-32: 32px; --radius-nav: 6px; --radius-control: 8px; --radius-card: 10px; --radius-modal: 12px; --shadow-admin: 0 8px 24px rgba(var(--shade-rgb), 0.18); --dur-ui: 150ms; } /* ============================================================ FRIDAY GAME ROOMS — each Friday game's own palette, scoped to its page ( / ) like the admin block above (Raekwon, 2026-10-01: these palettes belong to the games and never change the website or the app). Raw values first, roles second; a game's stylesheet uses the roles (--room-*), and the site's role names are re-bound so the shared primitives (.eyebrow, ::selection) read the room too. ============================================================ */ /* Sliding Puzzle — onyx and plum-black, built on the existing plum-black values with one darker onyx. Plum is present but never dominant: the photograph is always the strongest colour on the screen. */ .room-sliding { --sp-onyx: #0F0B0E; /* the room itself: onyx with a breath of plum */ --sp-onyx-rgb: 15, 11, 14; --room-bg: var(--sp-onyx); --room-surface: var(--brand-abyss); /* the board's bed and the empty square */ --room-raised: var(--brand-dark); /* sheets, cards, the results table */ --room-floating: var(--brand-plum); /* icon wells in the hint sheet */ --room-line: rgba(var(--brand-cream-rgb), 0.08); --room-line-strong: rgba(var(--brand-cream-rgb), 0.16); --room-text: var(--brand-cream); --room-text-2: var(--brand-tan); --room-text-3: var(--brand-warm); --room-figure: var(--brand-white); /* the numbers: moves, time, score */ --room-accent: var(--brand-gold); /* brass line art, the observe bar, the nudged tile */ --room-accent-soft: var(--brand-gold-soft); --room-accent-faint: var(--brand-gold-faint); --room-button-top: var(--metal-brass-light); --room-button-bottom: var(--brand-gold); --room-button-text: var(--sp-onyx); --room-glow: rgba(var(--brand-gold-rgb), 0.10); /* the light behind the emblem */ --room-edge-glow: rgba(var(--brand-plum-rgb), 0.55); /* the plum warmth at the room's edges */ --room-shadow: 0 10px 40px rgba(var(--sp-onyx-rgb), 0.70), 0 2px 6px rgba(var(--sp-onyx-rgb), 0.50); --bg: var(--room-bg); --bg-elevated: var(--room-raised); --fg: var(--room-text); --fg-body: var(--room-text-2); --fg-muted: var(--room-text-3); --accent: var(--room-accent); } /* Knowledge Board — close to the reference's sampled values: black-maroon, deep wine and oxblood, antique brass, warm ivory, a muted jade for a correct answer and a muted garnet for an incorrect one (each always beside a word and an icon, never colour alone). */ .room-knowledge { --kb-night: #070508; /* the room: black-maroon */ --kb-wine: #1E0B14; /* deep wine: the board's bed, the sheets */ --kb-cell: #170D13; /* a value cell at rest */ --kb-card: #231218; /* raised cards: the question, the result panels */ --kb-oxblood: #3D1223; /* the category banners */ --kb-cell-chosen: #2D1A0E; /* the cell under the finger: brass warming the wine */ --kb-ivory: #ECD49D; /* values and category names: warm ivory */ --kb-ivory-bright: #F7ECBE; /* the score */ --kb-jade: #839E89; /* correct */ --kb-jade-floor: #0F1A18; --kb-garnet: #B4595D; /* incorrect */ --kb-garnet-floor: #270B10; --kb-night-rgb: 7, 5, 8; --kb-oxblood-rgb: 61, 18, 35; --kb-jade-rgb: 131, 158, 137; --kb-garnet-rgb: 180, 89, 93; --room-bg: var(--kb-night); --room-surface: var(--kb-wine); --room-raised: var(--kb-card); --room-floating: var(--kb-oxblood); --room-cell: var(--kb-cell); --room-cell-chosen: var(--kb-cell-chosen); --room-line: rgba(var(--brand-brass-rgb), 0.16); --room-line-strong: rgba(var(--brand-brass-rgb), 0.34); --room-text: var(--brand-cream); --room-text-2: var(--brand-tan); --room-text-3: var(--brand-warm); --room-figure: var(--kb-ivory); --room-figure-strong: var(--kb-ivory-bright); --room-accent: var(--brand-brass); --room-accent-soft: rgba(var(--brand-brass-rgb), 0.45); --room-accent-faint: rgba(var(--brand-brass-rgb), 0.16); --room-button-top: var(--metal-brass-light); --room-button-bottom: var(--brand-gold); --room-button-text: var(--kb-night); --room-glow: rgba(var(--brand-brass-rgb), 0.12); --room-edge-glow: rgba(var(--kb-oxblood-rgb), 0.60); --room-shadow: 0 10px 40px rgba(var(--kb-night-rgb), 0.75), 0 2px 6px rgba(var(--kb-night-rgb), 0.55); --room-correct: var(--kb-jade); --room-correct-rgb: var(--kb-jade-rgb); --room-correct-floor: var(--kb-jade-floor); --room-incorrect: var(--kb-garnet); --room-incorrect-rgb: var(--kb-garnet-rgb); --room-incorrect-floor: var(--kb-garnet-floor); --bg: var(--room-bg); --bg-elevated: var(--room-raised); --fg: var(--room-text); --fg-body: var(--room-text-2); --fg-muted: var(--room-text-3); --accent: var(--room-accent); } /* ============================================================ SEMANTIC ELEMENT STYLES — drop these on any page using tokens.css to get baseline editorial type rhythm with no extra work. ============================================================ */ ::selection { background: var(--accent); color: var(--brand-white); } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--brand-abyss); } ::-webkit-scrollbar-thumb { background: var(--brand-muted); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* Reusable type primitives — apply via class. */ .wordmark { font-family: var(--font-display); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wordmark); color: var(--fg); } .slogan { font-family: var(--font-display); font-style: italic; letter-spacing: var(--tracking-wide); color: rgba(var(--brand-tan-rgb), 0.7); } .eyebrow { font-family: var(--font-body); font-size: var(--text-11); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--accent); }