/* ========================================================================== BRANDBOOK TOKENS — project "Ruby Stardust" (internal codename) Deployment domain: stardacasino.pl Format: monobrand affiliate landing (ONE-PAGE, anchor navigation) under Starda Casino (PL). Plus 3 legal subpages (Regulamin / Polityka prywatności / Ujawnienie afiliacyjne) + 404. Language: Polish (pl-PL). Version: 1.0 — 2026-08-06 This file is the SINGLE SOURCE of visual values for this project. All mockups, templates.md and the final implementation (site/stardacasino-pl/css/tokens.css) MUST consume these variables only — no magic values in component CSS. NO SELF-HOSTED FONTS IN THIS PROJECT — DELIBERATE, NOT AN OVERSIGHT. There is no CDN/build access and site/stardacasino-pl/fonts/ will be empty. Every --font-* value below is "aspirational webfont name" FIRST, followed by a full chain of real system fonts. Do NOT add @font-face anywhere in the implementation — see icecasino-bzzmedia-pl retro (6 broken @font-face rules reached QA undetected). If real font files are sourced later, add @font-face separately and keep this fallback chain intact as a safety net — never remove it. DELIBERATE NON-REPEAT NOTE (checked against every brandbook already shipped in this pipeline — see rationale.md "Differentiation" for the full line-by-line comparison): - bovegas-us-com ("Neon Strip"): violet/plum near-black + amber-gold primary + teal + fuchsia neon, pill radii, Bebas Neue/Poppins/Inter. - icecasino-bzzmedia-pl ("Glacier Voltage"): blue-black + glacier-blue primary + neon-rose + volt-lime, faceted "ice shard" corners, Orbitron/Sora/Work Sans. - chickenroad-slot-cz ("Morning Highway"): light cream daytime base + safety-orange primary, rounded arcade radii, Baloo 2/Fira Sans/PT Sans. - chicken-road-ethiopia-com ("Highland Dusk"): green-charcoal night + marigold-gold primary + clay-red + teff-green, scoreboard-moderate radii, Anton/Manrope/Noto Sans. This project ("Ruby Stardust") is a FIFTH direction: an oxblood-black "velvet jewel-box" night base (no violet, no blue, no green cast) with a RUBY-CRIMSON primary CTA (red has so far only appeared as an isolated compliance color across the whole pipeline — here it is promoted to the BRAND primary, which is why the compliance system below is deliberately shifted to a brick-umber hue instead of crimson, to stay visually separable from the brand). Secondary is a cool CHAMPAGNE metal (paler and greyer than both bovegas' amber-gold and ethiopia's marigold-gold). Tertiary is an EMERALD table-felt green tied to a literal casino reference (blackjack/roulette felt), not reused from any sibling. The signature ornament is a literal five-point STAR motif (badges, bullet markers, sparkle dots) — tied directly to the brand name "Starda" — not a corner-radius trick (icecasino already owns the "cut corner" language). Typography is a fully different pair, and is the ONLY brandbook in this pipeline to use a serif display face (Cinzel) — every sibling above uses a sans display face. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. COLORS — background ("Velvet Onyx" jewel-box night base) Near-black with a warm oxblood-red undertone — distinct from bovegas' violet-black, icecasino's blue-black and ethiopia's green-black. Reads as "dark velvet display case", not a night club. ------------------------------------------------------------------ */ --color-bg-canvas: #140A0C; /* page background outside sections */ --color-bg-primary: #1C1012; /* main section background */ --color-bg-secondary: #261619; /* alternating band, cards */ --color-bg-elevated: #302026; /* cards-on-cards, modals, sticky bars */ --color-bg-glow: #3D2830; /* lit accent panel behind hero art / dividers */ --color-bg-inverse: #FFF7EF; /* rare light section (bonus terms table, legal pages print view) */ /* ------------------------------------------------------------------ 2. COLORS — brand accents: RUBY (primary) + CHAMPAGNE (secondary) + EMERALD (tertiary / felt-table accent) ------------------------------------------------------------------ */ --color-ruby-300: #FF7A8C; /* glow highlight only — never paired with body text */ --color-ruby-500: #C21F39; /* primary CTA fill, primary glow */ --color-ruby-600: #9C1830; /* CTA hover/active */ --color-ruby-700: #6E0F22; /* CTA pressed / dark outline */ --color-ruby-100: #FFD9DE; /* light chip/badge background on dark cards, paired with dark text */ --color-champagne-500: #D9B77A; /* secondary CTA (outline), star icon fill, "featured" ribbon */ --color-champagne-600: #C29F5C; /* hover for champagne elements */ --color-champagne-200: #F2E3C4; /* light champagne badge background */ --color-emerald-500: #2FBF8F; /* links, info badges, felt-table accent, "verified" checkmarks */ --color-emerald-600: #239971; /* link/hover */ --color-emerald-100: #CDF2E4; /* light emerald badge background */ /* ------------------------------------------------------------------ 3. COLORS — text ------------------------------------------------------------------ */ --color-text-primary: #F8EEE7; /* main text on dark bg — contrast ~17:1 on --color-bg-canvas */ --color-text-secondary: #CBB8AE; /* secondary text on dark bg — contrast ~9:1 */ --color-text-muted: #9C877E; /* meta info, timestamps, captions — contrast ~6:1 */ --color-text-inverse: #241419; /* text on light backgrounds (e.g. bg-inverse) */ --color-text-on-ruby: #FFFFFF; /* text on ruby CTA — contrast ~5.4:1 on --color-ruby-500 */ --color-text-on-champagne: #241016; /* text on champagne fill/badge — contrast ~9.8:1 on --color-champagne-500 */ --color-text-on-emerald: #0B2B20; /* text on emerald badge — contrast ~8:1 on --color-emerald-500 */ --color-text-link: var(--color-emerald-500); --color-text-link-hover: var(--color-emerald-100); /* ------------------------------------------------------------------ 4. COLORS — functional states Deliberately NOT aliased to --color-ruby-* (brand primary): since ruby is already the CTA color, "danger" needs its own hue so an error/validation message never reads as "just another CTA". ------------------------------------------------------------------ */ --color-success: var(--color-emerald-500); --color-success-bg: #12332C; --color-info: var(--color-emerald-500); --color-info-bg: #12332C; --color-warning: #E8A33C; --color-warning-bg: #3A2A10; --color-danger: #EB5C46; /* brick-orange-red — distinct hue from ruby (more orange, less pink). Brightened from #E24B3A: as text on --color-danger-bg it measured 4.04:1 (fail, <4.5 AA) — inconsistent with --color-warning/-warning-bg (6.41:1) and --color-success/-success-bg (5.84:1), which both pass the same self-paired-text pattern. New value measures 4.69:1 on --color-danger-bg (designer compliance-check, 2026-08-06). Not yet wired into any component in main.css — fixed pre-emptively so the first future validation-state usage doesn't inherit a failing pair. */ --color-danger-bg: #3A1712; --color-focus-ring: #FFD98A; /* focus outline — keyboard accessibility */ --color-border-subtle: rgba(248, 238, 231, 0.08); --color-border-default: rgba(248, 238, 231, 0.14); --color-border-strong: rgba(248, 238, 231, 0.24); --color-border-ruby: rgba(194, 31, 57, 0.5); --color-border-champagne: rgba(217, 183, 122, 0.45); --color-border-emerald: rgba(47, 191, 143, 0.4); /* ------------------------------------------------------------------ 5. COLORS — Responsible Gambling / compliance block DELIBERATELY isolated from the brand accent system above, AND deliberately NOT ruby/crimson (unlike other pipeline projects where an isolated red was the natural "safety" signal, here red is already the brand's primary CTA color). Uses a brick-umber tone instead, so the RG/18+ block is instantly visually distinguishable from any CTA button on the page, never mistaken for "just another promo panel". ------------------------------------------------------------------ */ --color-compliance-bg: #1A0F0C; --color-compliance-border: #6B4230; --color-compliance-text: #F8EEE7; --color-compliance-badge-bg: #B14A28; /* darkened from #C4552E: 4.48:1 vs white failed WCAG AA (4.5:1) on the 12px/18px RG badge; this value measures 5.41:1 (tech-seo-auditor fix, 2026-08-06) */ --color-compliance-badge-text: #FFFFFF; --color-compliance-link: #FFD3B8; /* ------------------------------------------------------------------ 6. TYPOGRAPHY No @font-face in this project (see note at top of file) — every value is "desired webfont name" + full real fallback chain. The fallback chain must render correctly for Polish diacritics (ą ć ę ł ń ó ś ź ż) — Segoe UI / Roboto / Arial all cover Polish Latin Extended-A fully, so legibility is not at risk even without the aspirational webfont ever loading. - Display ("jewel-box serif"): Cinzel — an engraved, luxury serif display face (small-caps friendly, lapidary letterforms). Used ONLY for the hero H1, big bonus amounts and short badges — never body text. This is the ONE brandbook in the whole pipeline using a serif display face; every sibling above uses a sans display face, which is itself a deliberate differentiator (see rationale.md). - Heading: Urbanist — clean geometric sans, confident but calmer than the display face. Used for H2-H4, nav labels, buttons. - Body: Hanken Grotesk — high-legibility grotesque for paragraphs, FAQ, T&C, tables; wide Latin Extended coverage (Polish-safe). - Mono: Red Hat Mono — promo codes ("STARDA200"), bonus codes, ticket-style UI accents only. ------------------------------------------------------------------ */ --font-display: 'Cinzel', Georgia, 'Times New Roman', serif; --font-heading: 'Urbanist', 'Segoe UI', Roboto, Arial, sans-serif; --font-body: 'Hanken Grotesk', 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: 'Red Hat Mono', 'Consolas', monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-display: 600; /* Cinzel SemiBold/Bold reads best for H1 engraved caps */ /* Type scale — 7 steps between body and H1 display (exceeds 4-step minimum) */ --font-size-xs: 0.75rem; /* 12px — fine print, T&C, legal footnotes */ --font-size-sm: 0.875rem; /* 14px — meta, helper text, badge labels */ --font-size-base: 1rem; /* 16px — body text */ --font-size-md: 1.125rem; /* 18px — body prose in the content column */ --font-size-lede: 1.25rem; /* 20px — lead paragraph, hero subtext */ --font-size-lg: 1.375rem; /* 22px — H4 */ --font-size-xl: 1.75rem; /* 28px — H3 */ --font-size-2xl: 2.25rem; /* 36px — H2 */ --font-size-3xl: 2.75rem; /* 44px — fallback H1 size if font-display unavailable */ --font-size-display-mobile: 2.5rem; /* 40px — hero H1 (font-display), mobile */ --font-size-display-desktop: 4rem; /* 64px — hero H1 (font-display), desktop ≥1200px */ /* Responsible Gambling block must always stay legible — never smaller than font-size-base, even in the footer. DO NOT reduce. */ --font-size-compliance: 1rem; /* min 16px, never smaller */ --font-size-compliance-badge: 1.125rem; --line-height-tight: 1.15; /* headings, font-display */ --line-height-snug: 1.3; /* H3-H4 */ --line-height-normal: 1.55; /* body text — within 1.4-1.6 target */ --line-height-relaxed: 1.65; /* long paragraphs, FAQ, T&C, Regulamin (Polish compound words need more air) */ --letter-spacing-tight: -0.01em; --letter-spacing-display: 0.02em; /* Cinzel reads best with slight tracking on caps */ --letter-spacing-wide: 0.07em; /* uppercase labels, badges, eyebrows */ /* No text measure on this project. Text width == container width (--container-max). Do not add a --content-col / measure token back: any cap narrower than the container reproduces the "текст ограничен по ширине" complaint, whether it sits on a paragraph or on a wrapper. See .claude/skills/static-site-layout/SKILL.md. */ /* ------------------------------------------------------------------ 7. SPACING (4px scale — shared structural convention across the conveyor, not a visual-identity axis; kept identical to sibling projects on purpose so vertical rhythm math stays predictable for developer/QA across the whole pipeline) ------------------------------------------------------------------ */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* ------------------------------------------------------------------ 8. RADII — "jewel-box" moderate rounding. Not icecasino's tight faceted shard, not chickenroad-cz's playful heavy rounding, not bovegas' soft pill-everywhere language. This project's signature ornament is the literal five-point STAR motif (see .star-badge / .star-bullet in templates.md), not a corner-radius trick. ------------------------------------------------------------------ */ --radius-xs: 3px; --radius-sm: 7px; --radius-md: 11px; --radius-lg: 17px; --radius-xl: 26px; --radius-pill: 999px; /* buttons, badges, promo-code chips */ --radius-circle: 50%; /* avatars, round icons, star-bullet backdrop */ /* ------------------------------------------------------------------ 9. SHADOWS / GLOW — warm oxblood-tinted neutral shadows (not neutral grey-black like other projects) + a single ruby "velvet glow" used sparingly (primary CTA, one featured card per grid, hover states), plus a champagne shimmer reserved for the "featured/bestseller" ribbon only. ------------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(10, 4, 5, 0.5); --shadow-md: 0 5px 15px rgba(10, 4, 5, 0.55); --shadow-lg: 0 15px 34px rgba(10, 4, 5, 0.62); --shadow-inset-velvet: inset 0 1px 0 rgba(248, 238, 231, 0.06); --shadow-glow-ruby: 0 0 0 1px rgba(194, 31, 57, 0.55), 0 0 22px rgba(194, 31, 57, 0.4), 0 8px 26px rgba(194, 31, 57, 0.22); --shadow-glow-ruby-lg: 0 0 0 1px rgba(194, 31, 57, 0.65), 0 0 38px rgba(194, 31, 57, 0.5), 0 16px 38px rgba(194, 31, 57, 0.26); --shadow-glow-champagne: 0 0 0 1px rgba(217, 183, 122, 0.5), 0 0 20px rgba(217, 183, 122, 0.4), 0 8px 22px rgba(217, 183, 122, 0.2); --shadow-glow-emerald: 0 0 0 1px rgba(47, 191, 143, 0.45), 0 0 20px rgba(47, 191, 143, 0.35), 0 8px 22px rgba(47, 191, 143, 0.18); --shadow-focus: 0 0 0 3px rgba(255, 217, 138, 0.55); /* ------------------------------------------------------------------ 10. LAYOUT Breakpoints cannot be CSS custom properties inside @media (spec limitation) — documented as fixed constants in templates.md: 360px (mobile), 768px (tablet), 1200px (desktop). ------------------------------------------------------------------ */ --container-max: 1200px; --container-padding-mobile: var(--space-4); /* 16px */ --container-padding-tablet: var(--space-6); /* 32px */ --container-padding-desktop: var(--space-7); /* 48px */ --header-height-mobile: 56px; --header-height-desktop: 76px; --sticky-cta-height: 60px; --z-compliance-ribbon: 110; --z-header: 100; --z-sticky-cta: 90; --z-modal: 200; --transition-fast: 120ms ease; --transition-base: 200ms ease; --transition-slow: 320ms ease; }