/* ========================================================================== BRANDBOOK TOKENS — project "Ivory Charter" (internal codename) Deployment domain: royalcasino1.com.pl Format: monobrand affiliate landing (ONE-PAGE, anchor navigation) under Royal Casino (PL), claiming to be the official brand site. Plus 3 legal subpages (Regulamin / Polityka prywatności / Ujawnienie afiliacyjne) + 404. Language: Polish (pl-PL). Version: 1.0 — 2026-08-10 This file is the SINGLE SOURCE of visual values for this project. All mockups, templates.md and the final implementation (site/royalcasino1-com-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, same technical constraint as every sibling in this conveyor (no CDN/build access, site/royalcasino1-com-pl/fonts/ stays empty). UNLIKE the convention used elsewhere in this conveyor, every --font-* value below opens with a font that is ACTUALLY INSTALLED on the target platform — no "aspirational webfont name" placeholder. REVISED 2026-08-10: the first draft of this file used aspirational names (Fraunces/Libre Franklin/Source Sans 3) whose fallback chains collapsed --font-heading and --font-body onto the SAME real font on every platform (Segoe UI on Windows, Roboto on Android, Arial on Apple with no -apple-system in the stack) — a defect invisible in the CSS, only visible in the rendered browser, caught by PM compliance-check. Fixed: real serif (Georgia) for display+heading vs. real native OS sans for body — see §6 below and the per-platform render table in rationale.md. Every stack fully covers Polish Latin Extended-A (ą ć ę ł ń ó ś ź ż). Do NOT add @font-face anywhere in the implementation, and do NOT reintroduce an aspirational first link — it must always be a font that physically ships with the OS. DELIBERATE NON-REPEAT NOTE — see tokens.md prose above this block for the full comparison against bovegas-us-com / icecasino-bzzmedia-pl / stardacasino-pl. Summary: this is the ONLY brandbook in the pipeline that is primarily a LIGHT (ivory/parchment) theme rather than all-dark; the only one using emerald-green as the BASE brand hue; the only one whose elevation system is soft "paper" shadows + gold hairline frames instead of colored neon glow; and the only one whose typography is a verified REAL serif/sans split (Georgia vs. native OS UI sans) rather than an unloaded aspirational webfont name. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. COLORS — background ("Ivory Charter" light base + emerald bookends) Primary theme is warm ivory/parchment (paper), NOT dark. Two deep emerald-black bands (hero, footer/compliance) bookend the page like a wax-sealed charter document opening and closing — the only structural "dark" surfaces on the site, used deliberately, not as the default. ------------------------------------------------------------------ */ --color-bg-canvas: #F7F2E7; /* page background — warm ivory parchment */ --color-bg-primary: #FFFFFF; /* section / page background, card surface */ --color-bg-secondary: #F0E8D5; /* alternating band — deeper parchment */ --color-bg-elevated: #FFFFFF; /* cards, popovers — lifted via shadow, not color */ --color-bg-tint-emerald: #EAF2EC; /* faint green-tinted panel behind FAQ / trust blocks */ --color-bg-inverse: #0B2018; /* the two dark "bookend" bands: hero, footer, compliance */ --color-bg-inverse-raised: #123528; /* cards-on-dark (e.g. featured payment tile inside footer) */ /* ------------------------------------------------------------------ 2. COLORS — brand accents: EMERALD (identity/structure) + ANTIQUE GOLD (primary CTA) + WINE (tertiary / "featured" ribbon, badges) Gold is the PRIMARY action color everywhere on this project (unlike ICE Casino, where gold is explicitly banned as a UI action color). ------------------------------------------------------------------ */ --color-emerald-900: #0B2018; /* = --color-bg-inverse, kept as an alias for component use */ --color-emerald-800: #123528; --color-emerald-700: #16523A; /* links / outline-button label on light bg — 8.2:1 */ --color-emerald-600: #1E6E4E; /* secondary accent text/icons on light bg — 5.5:1 */ --color-emerald-500: #2F8A63; /* hover state for emerald elements, icon fill */ --color-emerald-200: #CFE6DA; /* light chip/badge background on white cards */ --color-emerald-100: #EAF2EC; /* = --color-bg-tint-emerald alias */ --color-gold-700: #7A5A10; /* CTA pressed */ --color-gold-600: #A67C1D; /* CTA hover/active */ --color-gold-500: #C99A2E; /* PRIMARY CTA fill, brand emblem accent, hairline frames */ --color-gold-300: #E4C879; /* light gold, badge background */ --color-gold-100: #F5E7C2; /* faint gold tint — hero panel edge, divider glow */ --color-wine-600: #6B1729; /* hover for wine elements */ --color-wine-500: #8A2036; /* "featured/polecane" ribbon, badge fill */ --color-wine-200: #F0D3D8; /* light wine tint — rare, badge background only */ /* ------------------------------------------------------------------ 3. COLORS — text ------------------------------------------------------------------ */ --color-text-primary: #1A2420; /* body text on light bg — 14.3:1 on canvas */ --color-text-secondary: #47554C; /* secondary text on light bg — 7.0:1 on canvas */ --color-text-muted: #5A6760; /* meta, timestamps, captions — 5.3:1 on canvas */ --color-text-on-dark-primary: #F7F2E7; /* body text on emerald-900 bands — 15.3:1 */ --color-text-on-dark-secondary: #C9D6CC; /* secondary text on dark bands — 11.3:1 */ --color-text-on-dark-muted: #8FA396; /* meta on dark bands — 6.4:1 */ --color-text-on-gold: #10241C; /* text on gold CTA fill — 6.3:1 on --color-gold-500 */ --color-text-on-wine: #FFFFFF; /* text on wine badge/ribbon — 9.0:1 on --color-wine-500 */ --color-text-link: var(--color-emerald-700); --color-text-link-hover: var(--color-emerald-500); --color-text-link-on-dark: var(--color-gold-300); --color-text-link-on-dark-hover: var(--color-gold-100); /* ------------------------------------------------------------------ 4. COLORS — functional states ------------------------------------------------------------------ */ --color-success: var(--color-emerald-600); --color-success-bg: #E3F1E7; --color-info: var(--color-emerald-700); --color-info-bg: var(--color-bg-tint-emerald); --color-warning: #8A5A12; /* 4.9:1 on --color-warning-bg */ --color-warning-bg: #F7E9C9; --color-danger: #A23B2E; /* 5.2:1 on --color-danger-bg — distinct hue from wine/gold, not aliased to brand */ --color-danger-bg: #F6E0DB; --color-focus-ring: #2F8A63; /* focus outline — visible on both ivory and emerald bands */ --color-border-subtle: rgba(26, 36, 32, 0.10); --color-border-default: rgba(26, 36, 32, 0.16); --color-border-strong: rgba(26, 36, 32, 0.28); --color-border-gold: rgba(201, 154, 46, 0.55); /* hairline "charter" frame, hero + featured card */ --color-border-gold-on-dark: rgba(228, 200, 121, 0.5); --color-border-wine: rgba(138, 32, 54, 0.4); --color-border-on-dark-subtle: rgba(247, 242, 231, 0.10); --color-border-on-dark-default: rgba(247, 242, 231, 0.16); /* ------------------------------------------------------------------ 5. COLORS — Responsible Gambling / compliance block Lives on the dark emerald "bookend" band (footer), so it reads as part of the trusted-document frame, not as another promo panel. Accent is a "wax seal" terracotta-red — the ONLY place this hue appears in the whole brandbook, isolated from gold (CTA) and wine (featured-badge) so RG never gets mistaken for a promo element. ------------------------------------------------------------------ */ --color-compliance-bg: var(--color-bg-inverse); /* #0B2018 */ --color-compliance-border: #C0602E; --color-compliance-text: var(--color-text-on-dark-primary); --color-compliance-badge-bg: #B04A22; /* 5.5:1 with white label */ --color-compliance-badge-text: #FFFFFF; --color-compliance-link: #F0B08C; /* 9.2:1 on --color-compliance-bg */ /* ------------------------------------------------------------------ 6. TYPOGRAPHY — REVISED 2026-08-10, real installed fonts only, no aspirational names (see NOTE at top of file for why the first draft was rejected on compliance-check). Every stack's FIRST link is a font that physically ships with the OS it targets — nothing here depends on a file that never loads. - Display + Heading ("charter seal"): Georgia — a real, universally preinstalled serif (Windows core fonts since 2000, bundled on macOS/iOS since OS X). Used for the hero H1, big bonus figures, H2-H4, nav labels, buttons — i.e. the WHOLE serif side of the display/heading-vs-body contrast this project is built on (see rationale.md for why display and heading are intentionally the SAME stack: the split that matters for readability is serif-vs-sans against body, not two different serifs against each other). Where Georgia itself isn't installed (Android/Linux), the stack falls through to the generic `serif` keyword, which resolves to each platform's own default serif (Noto Serif on Android, DejaVu Serif/Liberation Serif on most Linux distros) — still a real serif, still distinct from the body sans on that same platform. Full per-platform table — see rationale.md. - Body: native OS UI sans — `-apple-system`/`BlinkMacSystemFont` (San Francisco on macOS/iOS) → `Segoe UI` (Windows) → `Roboto` (Android) → `Helvetica Neue`/`Arial` → `system-ui` → generic `sans-serif` catch-all (Cantarell/Noto Sans on most Linux desktop environments). Every one of these is a REAL installed UI font on its target platform, and every one is Polish-safe (Segoe UI, San Francisco and Roboto are the fonts each OS itself uses to render Polish system UI). Used for paragraphs, FAQ, T&C, tables, dl values. - Mono: `SFMono-Regular`/Menlo/Monaco (Apple) → Consolas (Windows) → `Liberation Mono` (Linux) → `Courier New` → generic `monospace` (Roboto Mono/Droid Sans Mono on Android). Same proven stack used by GitHub Primer/Bootstrap — every link is real. Promo codes ("ROYAL200"), bonus codes, ticket-style UI accents only. ------------------------------------------------------------------ */ --font-display: Georgia, Cambria, 'Times New Roman', Times, serif; --font-heading: Georgia, Cambria, 'Times New Roman', Times, serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif; --font-mono: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-display: 700; /* Georgia's 700 (Bold) is its most reliably shipped display weight cross-platform; 600 falls back to synthetic-bold on some Linux Georgia-less fallbacks, so pin true Bold */ /* Type scale — 8 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 dl/table/legal text */ --font-size-lede: 1.25rem; /* 20px — lead paragraph, hero subtext */ --font-size-lg: 1.5rem; /* 24px — H4 */ --font-size-xl: 1.875rem; /* 30px — H3 */ --font-size-2xl: 2.375rem; /* 38px — H2 */ --font-size-3xl: 2.875rem; /* 46px — fallback H1 size for legacy browsers without CSS custom property support */ --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 air) */ --letter-spacing-tight: -0.01em; --letter-spacing-display: 0.005em; /* Georgia's serif letterforms need almost no positive tracking at large sizes, unlike an engraved-caps face */ --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 — "stately, squared-elegant" language: smaller than Bovegas' pill-everywhere system, less faceted than ICE Casino's ice shard, less ornamental than Starda's jewel-box star system. The signature ornament here is NOT a corner-radius trick at all — it is a fine GOLD HAIRLINE double-border "charter frame" (see .charter-frame / .charter-divider in templates.md) plus a laurel-leaf bullet/crest glyph. Radii stay modest and mostly load-bearing, not decorative. ------------------------------------------------------------------ */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* used sparingly: rating chip, nav pill, promo-code chip only */ --radius-circle: 50%; /* avatars/initials, round icons */ --border-width-hairline: 1px; --border-width-frame: 2px; /* .charter-frame double-border weight */ /* ------------------------------------------------------------------ 9. SHADOWS — soft, warm, LOW-SATURATION "paper" shadows. Deliberately NO colored neon glow anywhere (every sibling in this pipeline uses a colored glow-shadow system tied to an all-dark canvas; this project's canvas is mostly light, so glow would read as a mistake, not a feature). The one exception is a faint warm "candlelight" halo behind the crest emblem in the hero band — used once, never as a repeatable hover effect. ------------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(26, 20, 10, 0.08); --shadow-md: 0 6px 16px rgba(26, 20, 10, 0.10); --shadow-lg: 0 18px 40px rgba(26, 20, 10, 0.14); --shadow-card: 0 2px 8px rgba(26, 20, 10, 0.07), 0 1px 2px rgba(26, 20, 10, 0.06); --shadow-inset-paper: inset 0 1px 0 rgba(255, 255, 255, 0.6); --shadow-dark-sm: 0 1px 2px rgba(3, 8, 6, 0.5); --shadow-dark-md: 0 6px 18px rgba(3, 8, 6, 0.45); --shadow-dark-lg: 0 18px 44px rgba(3, 8, 6, 0.55); --shadow-candlelight: 0 0 48px rgba(201, 154, 46, 0.18); /* hero crest emblem only, single use */ --shadow-focus: 0 0 0 3px rgba(47, 138, 99, 0.45); /* ------------------------------------------------------------------ 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: 60px; --header-height-desktop: 84px; --sticky-cta-height: 60px; /* Actual RENDERED height of .site-header: min-height (above) + its own 1px border-bottom (see main.css §4). Single source of truth for the anchor scroll-offset fix (QA defect #1) — never hardcode 61px/85px again anywhere else. Overridden at the SAME `min-width: 768px` breakpoint where .site-header .container actually switches to --header-height-desktop (main.css §4), so the two never drift apart. Measured, not guessed: 60+1=61 / 84+1=85, matching QA's Playwright getBoundingClientRect() readings exactly. */ --header-h: 61px; --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; }