/* === Yono Game — design tokens Clean light UI: white ground, near-black text, emerald accent, amber for money. Deliberately conventional — no felt, no foil, no ornament. White is the default and STAYS white: prefers-color-scheme is intentionally not wired to a dark palette, so the site does not flip on a phone set to dark. A dark palette is available only by opting in with . Note: the accent is green/amber rather than blue or purple. A white page with blue-purple chrome reads as a banking app, which this brand must not. === */ :root { /* Surfaces */ --bg: #FFFFFF; --bg-2: #F6F8F7; /* alternating section band */ --bg-3: #EEF2F0; /* inset / track */ --surface: #FFFFFF; /* cards */ --surface-2: #F6F8F7; /* muted card, table head, inputs */ --border: #E2E8E5; --border-str: #C7D2CC; /* Text */ --text: #14181C; --text-2: #4B5560; --text-3: #646D78; /* Accents */ --accent: #0F7A4F; --accent-2: #0B6140; --accent-soft: #E7F4EE; --gold: #926615; /* prices, bonus figures, stats */ --gold-soft: #FBF3E3; --hot: #C0392B; --live: #0E7490; --success: #15803D; --on-accent: #FFFFFF; --on-gold: #FFFFFF; /* The logo is a transparent PNG whose "Yono" wordmark is white, so it needs a dark plate to stay legible on a light page. */ --logo-bg: #000000; /* Depth — soft and shallow, never dramatic */ --shadow-sm: 0 1px 2px rgba(20, 24, 28, .05); --shadow: 0 1px 2px rgba(20, 24, 28, .05), 0 4px 12px rgba(20, 24, 28, .06); --shadow-lg: 0 2px 4px rgba(20, 24, 28, .06), 0 12px 28px rgba(20, 24, 28, .10); --ring: 0 0 0 3px rgba(15, 122, 79, .22); /* Type — one family, used throughout */ --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", "Helvetica Neue", Arial, sans-serif; --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --t-h1: clamp(2.1rem, 4.6vw, 3.4rem); --t-h2: clamp(1.6rem, 2.9vw, 2.25rem); --t-h3: clamp(1.22rem, 1.9vw, 1.5rem); --t-h4: clamp(1.04rem, 1.4vw, 1.16rem); --t-body: 1.0625rem; --t-sm: .9375rem; --t-xs: .8125rem; --t-kick: .75rem; --lh-tight: 1.12; --lh-head: 1.25; --lh-body: 1.65; --tr-tight: -.018em; --tr-kick: .08em; --measure: 70ch; /* Space */ --wrap: 1180px; --gutter: clamp(18px, 4vw, 36px); --sec-y: clamp(56px, 7vw, 96px); --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 28px; --s-7: 40px; --s-8: 56px; --s-9: 72px; /* Radius */ --r-panel: 12px; --r-input: 8px; --r-pill: 999px; /* Motion — short and unfussy */ --e: cubic-bezier(.4, 0, .2, 1); --e-out: cubic-bezier(.16, 1, .3, 1); --d-fast: 150ms; --d-ui: 220ms; --d-slow: 320ms; --d-rev: 420ms; /* Z-index */ --z-base: 1; --z-sticky: 20; --z-nav: 60; --z-drawer: 70; --z-toast: 80; --z-modal: 90; --z-loader: 100; --z-progress: 110; } /* Optional dark palette — applied only when explicitly requested with , never automatically. */ [data-theme="dark"] { --bg: #0F1417; --bg-2: #141A1E; --bg-3: #1A2227; --surface: #171E22; --surface-2: #1C252A; --border: #2A353B; --border-str: #3B4950; --text: #ECF1EF; --text-2: #A8B4B0; --text-3: #84928D; --accent: #34D399; --accent-2: #6EE7B7; --accent-soft: #12312A; --gold: #E3B341; --gold-soft: #2A2415; --hot: #F87171; --live: #38BDF8; --success: #4ADE80; --on-accent: #06231A; --on-gold: #221A05; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 4px 12px rgba(0, 0, 0, .34); --shadow-lg: 0 2px 4px rgba(0, 0, 0, .44), 0 12px 28px rgba(0, 0, 0, .40); --ring: 0 0 0 3px rgba(52, 211, 153, .28); }