/* ========================================================================== bonu7 game — tokens.css Design system foundation: self-hosted faces + every design token. Identity: "Crimson Paper" — light, airy, premium-fintech, red + gold in place of the earlier emerald build. White and brand-tinted off-white grounds, deep maroon ink, gold reserved for the bonus numeral. Dark is used ONLY for the footer, the Vault rail and the two full-bleed brand bands, which carry the .inverse class to flip their tokens. Signature motif: the facet cut. Token names below still say "em" (short for the old "emerald" ramp) rather than "brand" — renaming would mean touching every CSS file and every inline style that references var(--em-*), for zero visual difference. Treat --em-* as "primary brand ramp"; what changed here is only what it resolves to. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Self-hosted variable webfonts (latin + latin-ext) -------------------------------------------------------------------------- */ /* Fraunces — display serif. Hero H1 + bonus numerals ONLY. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/fraunces-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/fraunces-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Plus Jakarta Sans — UI + headings. */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/jakarta-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/jakarta-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter — body copy. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- 2. Tokens -------------------------------------------------------------------------- */ :root { /* --- Neutral ramp. ink-1000 is the page ground (lightest); the scale darkens as the number falls. Surfaces sit at the light end, fills and hairline greys at the dark end. Warmed slightly toward red so shadows/hairlines built from it don't carry a leftover green cast. --- */ --ink-1000: #fdfbfa; /* page ground — a hair off pure white */ --ink-950: #f7f1ef; /* sunken bands */ --ink-900: #f2e9e7; /* image placeholders */ --ink-850: #ffffff; /* card surface */ --ink-800: #faf6f5; /* raised surface */ --ink-750: #f5eeec; --ink-700: #e9dcd9; /* track fills */ --ink-600: #d0bab5; /* scrollbar thumb, inactive dots */ --ink-500: #ab8f89; /* separators */ --surface: var(--ink-850); --surface-hi: var(--ink-800); --surface-sunk: var(--ink-950); /* --- Ink (text). Contrast checked against #ffffff. --- */ --text-hi: #2c0f0c; /* 17.8:1 */ --text-mid: #4a332f; /* 11.6:1 */ --text-low: #6c5450; /* 7.0:1 */ --text-faint: #7a625d; /* 5.6:1 — the floor for meta text on white */ /* --- Primary brand ramp: crimson red. On white, use 700/800 for text; 400/500 are for fills, glows and dark-section text. --- */ --em-200: #ffe0da; --em-300: #ff9585; --em-400: #ff6a55; --em-500: #e5342c; --em-600: #c22a26; --em-700: #a3221f; /* 7.5:1 on white — the link colour */ --em-800: #691513; /* 12.2:1 on white */ --em-900: #200705; /* --- Gold: RARE. Bonus numeral + "featured" badges only. Unchanged — pairs naturally with the new red the same way it did with emerald. --- */ --gold: #c9a24b; /* fills and borders only — 2.4:1, never for text */ --gold-hi: #ecd08a; /* text on dark bands only */ --gold-lo: #856727; /* 5.3:1 — the only gold allowed on white */ /* --- Status --- */ --danger: #b8362b; --warn: #9a6b12; --info: #1c6ea8; --telegram:#1c86c0; /* --- Hairlines --- */ --stroke: rgba(44, 15, 12, 0.13); --stroke-soft: rgba(44, 15, 12, 0.07); --stroke-hot: rgba(194, 42, 38, 0.38); /* --- Gradients --- */ /* --grad-em carries white label text, so every stop is held in the deep half of the ramp: worst stop (#8a1512) is 9.6:1 against #fff, clearing AA with room to spare. Use --grad-em-bright only where nothing sits on top. */ --grad-em: linear-gradient(135deg, #8a1512 0%, #a3221f 52%, #7a1210 100%); --grad-em-rev: linear-gradient(135deg, #7a1210 0%, #a3221f 55%, #8a1512 100%); --grad-em-bright: linear-gradient(135deg, #c22a26 0%, #e5342c 50%, #ff6a55 100%); --grad-gold: linear-gradient(135deg, #8f6f2c 0%, #d8b463 45%, #b48c37 100%); --grad-vault: linear-gradient(168deg, #ffffff 0%, #fdf6f5 58%, #f9efed 100%); --grad-deep: linear-gradient(168deg, #240806 0%, #170504 55%, #0d0302 100%); --grad-glass: linear-gradient(160deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.32) 40%, rgba(255,255,255,0) 100%); --grad-edge: linear-gradient(90deg, transparent, rgba(194,42,38,.45) 22%, rgba(163,34,31,.75) 50%, rgba(194,42,38,.45) 78%, transparent); /* --- Elevation. On light, depth comes from soft neutral shadow with a faint crimson cast, not from glow. Glow tokens stay for the brand bands and buttons, where they read as light rather than haze. --- */ --glow-sm: 0 3px 12px -4px rgba(62, 10, 6, .18); --glow-md: 0 10px 26px -10px rgba(62, 10, 6, .26), 0 2px 6px -2px rgba(62, 10, 6, .10); --glow-lg: 0 22px 52px -18px rgba(62, 10, 6, .30), 0 4px 14px -6px rgba(62, 10, 6, .14); --glow-em: 0 8px 26px -8px rgba(194, 42, 38, .45); --glow-em-lg:0 18px 44px -14px rgba(194, 42, 38, .52), 0 4px 12px -4px rgba(229, 52, 44, .30); --glow-gold: 0 10px 32px -12px rgba(143, 111, 44, .42); --glow-tg: 0 10px 28px -10px rgba(28, 134, 192, .45); --shade-sm: 0 1px 3px rgba(44, 15, 12, .07), 0 1px 2px rgba(44, 15, 12, .05); --shade-md: 0 8px 24px -8px rgba(44, 15, 12, .14); --shade-lg: 0 28px 64px -22px rgba(44, 15, 12, .22); /* --- The facet: signature corner cut. One token, scaled responsively. --- */ --f: 16px; /* default */ --f-sm: 9px; /* chips, inputs, small buttons */ --f-lg: 30px; /* section panels, hero frames */ /* Two-corner gem cut (top-left + bottom-right) — the house shape. */ --cut-gem: polygon( var(--f) 0, 100% 0, 100% calc(100% - var(--f)), calc(100% - var(--f)) 100%, 0 100%, 0 var(--f)); /* Single cut, bottom-right — buttons, inputs, chips. */ --cut-one: polygon( 0 0, 100% 0, 100% calc(100% - var(--f-sm)), calc(100% - var(--f-sm)) 100%, 0 100%); /* Mirrored gem (top-right + bottom-left) — alternating rhythm. */ --cut-alt: polygon( 0 0, calc(100% - var(--f)) 0, 100% var(--f), 100% 100%, var(--f) 100%, 0 calc(100% - var(--f))); /* Wide panel cut — top-left + top-right, large. */ --cut-panel: polygon( var(--f-lg) 0, calc(100% - var(--f-lg)) 0, 100% var(--f-lg), 100% 100%, 0 100%, 0 var(--f-lg)); /* --- Type --- */ --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-ui: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace; --step--1: clamp(0.80rem, 0.77rem + 0.14vw, 0.875rem); --step-0: clamp(0.95rem, 0.91rem + 0.18vw, 1.0625rem); --step-1: clamp(1.10rem, 1.03rem + 0.34vw, 1.3125rem); --step-2: clamp(1.33rem, 1.20rem + 0.62vw, 1.75rem); --step-3: clamp(1.60rem, 1.36rem + 1.10vw, 2.35rem); --step-4: clamp(1.95rem, 1.52rem + 1.95vw, 3.20rem); --step-5: clamp(2.35rem, 1.60rem + 3.35vw, 4.40rem); --step-6: clamp(2.80rem, 1.45rem + 6.00vw, 6.60rem); /* --- Space --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --shell: 1240px; /* max content width */ --shell-wide: 1480px; /* rails that may bleed wider */ --measure: 68ch; /* readable prose column */ --gutter: clamp(1rem, 0.55rem + 2.1vw, 2.25rem); --band: clamp(3.5rem, 2rem + 6vw, 7.5rem); /* vertical section rhythm */ /* --- Motion --- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out, the house curve */ --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 160ms; --t: 220ms; --t-slow: 480ms; --header-h: 86px; /* clears the logo (58px + margin) at its largest clamp size */ --z-bg: 0; --z-content: 1; --z-header: 60; --z-nav: 70; --z-overlay: 90; --z-top: 100; } /* -------------------------------------------------------------------------- 3. .inverse — the dark islands The footer, the Vault rail and the full-bleed brand bands sit on deep ink for pacing contrast. Rather than overriding colours property-by-property in each of those blocks, they re-point the same tokens. Everything built on the system (cards, chips, buttons, rules, tables) then adapts by itself. -------------------------------------------------------------------------- */ .inverse { --surface: rgba(255, 255, 255, 0.045); --surface-hi: rgba(255, 255, 255, 0.07); --surface-sunk: rgba(0, 0, 0, 0.22); --text-hi: #f8f0ee; --text-mid: #d9c2be; --text-low: #b89a95; --text-faint: #997d78; --stroke: rgba(255, 224, 218, 0.18); --stroke-soft: rgba(255, 224, 218, 0.10); --stroke-hot: rgba(255, 106, 85, 0.45); --grad-glass: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 45%, rgba(255,255,255,0) 100%); --grad-edge: linear-gradient(90deg, transparent, rgba(255,106,85,.55) 22%, rgba(255,149,133,.9) 50%, rgba(255,106,85,.55) 78%, transparent); --ink-900: #200705; --ink-700: rgba(255,255,255,.14); --ink-600: rgba(255,255,255,.26); --ink-500: rgba(255,255,255,.34); --gold-lo: var(--gold-hi); color: var(--text-mid); } @media (max-width: 767px) { :root { --f: 12px; --f-lg: 20px; --header-h: 72px; } }