/* ============================================================================= Monobrand — Design Tokens (P2.2 v4) Imported from Slot Review Design System with casino-specific extensions. Per-site tokens (color-primary/accent/tint) are overridden inline in by mb_emit_brand_tokens() — see theme/inc/brand-loader.php. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Inter:wght@400;500;600;700&display=swap'); :root { /* --------- Color: per-site (overridden from gs_brand_json.tokens) -------- */ --color-primary: #E5224B; --color-primary-ink: #FFFFFF; --color-primary-hover: #C81C40; --color-accent: #F5B544; --color-accent-ink: #15171D; --color-accent-hover: #E0A22F; --brand-tint: rgba(229, 34, 75, 0.04); /* --------- Color: semantic (fixed) --------------------------------------- */ --color-success: #1F9D55; --color-success-tint: rgba(31, 157, 85, 0.10); --color-warning: #E8A317; --color-warning-tint: rgba(232, 163, 23, 0.12); --color-danger: #D8344A; --color-danger-tint: rgba(216, 52, 74, 0.10); /* --------- Color: neutrals ----------------------------------------------- */ --neutral-50: #F7F7F8; --neutral-100: #F0F1F4; --neutral-200: #E5E6EA; --neutral-400: #9AA0AB; --neutral-600: #5A6172; --neutral-900: #15171D; /* --------- Color: foreground / background aliases ------------------------ */ --bg-base: #FFFFFF; --bg-subtle: var(--neutral-50); --bg-tint: var(--brand-tint); --fg-1: var(--neutral-900); --fg-2: var(--neutral-600); --fg-3: var(--neutral-400); --border: var(--neutral-200); --border-strong: #D2D4DA; /* --------- Type: families ------------------------------------------------ */ --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* --------- Type: modular scale (ratio 1.25) ----------------------------- */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 20px; --text-lg: 25px; --text-xl: 31px; --text-2xl: 39px; --text-3xl: 49px; --text-4xl: 61px; /* --------- Type: weights ------------------------------------------------- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --------- Type: line-height -------------------------------------------- */ --lh-display: 1.1; --lh-heading: 1.2; --lh-body: 1.5; --lh-tight: 1.3; /* --------- Type: tracking ----------------------------------------------- */ --track-display: -0.02em; --track-heading: -0.01em; --track-body: 0; --track-eyebrow: 0.08em; /* --------- Spacing: scale (4/8/16/24/48/96) ----------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 48px; --space-6: 96px; /* --------- Layout ------------------------------------------------------- */ --reading-max: 760px; --content-max: 1100px; --gutter-mobile: 16px; --gutter-desktop: 24px; /* --------- Radii -------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; /* --------- Borders ------------------------------------------------------ */ --border-width: 1px; --border-width-strong: 2px; /* --------- Shadows ------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(20, 23, 29, 0.04), 0 4px 16px rgba(20, 23, 29, 0.06); --shadow-md: 0 2px 4px rgba(20, 23, 29, 0.06), 0 8px 24px rgba(20, 23, 29, 0.10); --shadow-lg: 0 4px 8px rgba(20, 23, 29, 0.08), 0 16px 40px rgba(20, 23, 29, 0.14); --shadow-focus: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--color-accent); /* --------- Motion ------------------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; } /* ============================================================================= Base reset + typography ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-body); color: var(--fg-2); background: var(--bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--fg-1); font-weight: var(--weight-semibold); line-height: var(--lh-heading); letter-spacing: var(--track-heading); margin: 0; text-wrap: balance; } h1 { font-size: var(--text-3xl); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--weight-bold); } h2 { font-size: var(--text-2xl); letter-spacing: var(--track-display); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } h5 { font-size: var(--text-md); } p { margin: 0 0 var(--space-3) 0; color: var(--fg-2); text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { text-decoration: underline; } a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; } small, .text-meta { font-size: var(--text-xs); color: var(--fg-3); } ::selection { background: var(--color-accent); color: var(--color-accent-ink); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }