/* * Design tokens — single source of truth for all blocks and templates. * Edit ONLY via team agreement (see CLAUDE.md §4 and §12 Decisions log). * * Direction: "Corporate Trust" (FR asset #2, keyword `meilleur casino en * ligne`) — the modern enterprise-SaaS register: professional but warm, * credible but not cold. Structure comes from WHITE CARDS LIFTED OFF A COOL * GREY GROUND BY A COLOURED SHADOW, and the signature is a single * indigo→violet gradient, rationed to the places that convert: the primary * button, the headline emphasis, the dark closing band. * * THIS SKIN INVERTS THE SIBLING FRENCH SITE ON EVERY AXIS, and that is the * point. `fr-asset` is also French, also casino, also unlicensable-in-France, * and can share a SERP with this one, so separation cannot be a matter of * palette: * * fr-asset ("Kinetic Typography") fr-asset2 (this file) * ───────────────────────────── ───────────────────────────── * near-black ground #09090B cool near-white ground #F8FAFC * acid yellow #DFE104, black ink indigo→violet gradient, WHITE ink * radius 0, everywhere 12px cards, 8px inputs, pill buttons * no shadows — 2px rules COLOURED shadows carry every surface * ONE accent, no second hue dual-tone: indigo + violet, on purpose * uppercase display, tracked out nothing uppercase, tracking near zero * Archivo + Manrope, 56KB Plus Jakarta Sans alone, 49KB * loud, kinetic, editorial polished, dimensional, enterprise-ready * * ANY VALUE CARRIED OVER FROM A SIBLING IS WRONG UNTIL RE-MEASURED. Both * previous branches were DARK skins; every "hovers brighten", every "the tint * is inert", every "ink on the accent is near-black" is a dark-page rule and * is false here. * * EVERY PAIR BELOW IS MEASURED (WCAG 2.1 relative luminance), not eyeballed, * and the supplied design system turned out to carry FOUR problems. All four * are recorded where they apply: * * 1. ITS "ACCENT/SUCCESS" COLOUR CANNOT BE USED FOR ANYTHING IT IS ASKED TO * DO. Emerald 500 #10B981 measures 2.54:1 on white — it fails AA for * text (4.5) and it also fails the 3:1 that WCAG 1.4.11 asks of a * meaningful graphic, so it is not even usable as a tick or a status * dot. Positive states are #047857 here (5.48 on white, 5.24 on the * page). #10B981 survives ONLY as a decorative gradient stop, never as * an ink and never as a mark. The system's blanket claim that "all text * meets WCAG AA" is not true of its own palette. * * 2. ITS INPUT BORDER IS 1.23:1. Slate 200 #E2E8F0 is a beautiful divider * and a non-existent control edge — the system specifies it for input * borders, where 1.4.11 wants 3:1. TWO BORDER TOKENS, for the fourth * market running, for the same reason each time: --sn-border draws * dividers, --sn-border-strong is the ONLY token allowed on an input, a * toggle or an outlined button. * * 3. ITS MUTED TEXT PASSES ON WHITE AND FAILS ON ITS OWN TINTS. Slate 500 * #64748B is 4.76 on white and 4.55 on the page — fine — but this design * puts muted text on soft indigo-50 and slate-100 fills constantly, and * there it is 4.26 and 4.34, i.e. below AA. Since --sn-text-muted is the * second most-used ink in the theme (captions, bylines, table meta, the * whole footer) it is darkened one notch to #5B6B84, which clears AA on * all four surfaces (5.41 / 5.17 / 4.94 / 4.80). #64748B is kept — as * --sn-border-strong, where 4.76 is comfortably over 3:1. Exactly the * same manoeuvre as the previous market, one direction reversed. * * 4. A GRADIENT'S CONTRAST IS ITS WORST STOP, NOT ITS FIRST. The primary * button runs indigo 600 → violet 600; white on #4F46E5 is 6.29 but on * #7C3AED it is 5.70, and 5.70 is the number that matters because the * label sits across both. It still clears AA, so the gradient ships as * specified — but any future restop must be measured at its LIGHTEST * point. (The system also calls white-on-primary "AAA level"; measured * it is 6.29, which is AA. Its white-on-indigo-900 AAA claim is true.) * * A FIFTH THING IS NOT A DEFECT BUT MUST BE WRITTEN DOWN: INK ON A FILL IS * PER-COLOUR ON THIS SKIN. On the previous market every filled thing took * near-black ink and that was a global rule. Here white is correct on indigo * (6.29), violet (5.70) and rose (4.70), and WRONG on emerald 500 (2.54) and * amber 500 (2.15), which need near-black (7.04 / 8.31). There is no single * "ink on a fill" answer — check the fill you are actually using. */ /* ---------- Fonts (self-hosted, GDPR: never the Google CDN) ---------- */ /* * ONE FAMILY, 49KB, and one family IS the design. Plus Jakarta Sans is a * geometric sans with softly rounded terminals — the exact reason the system * picks it is that it reads as authoritative at 700/800 and as friendly at * 400, so the "professional but not cold" brief is carried by the typeface * rather than by decoration. A second display face is the one addition that * would stop the page reading as this system. * * TWO FILES, NOT ONE, AND THE REASON IS FRENCH. Read from the font with * fontTools rather than assumed: Google's "latin" subset does NOT contain * Ÿ (U+0178), which occurs in French proper nouns (NOËL/CITROËN take the * diaeresis on other vowels, but Ÿ turns up in names such as Ÿver and in * set-in-caps text). It lives in "latin-ext". So both subsets ship with * their unicode-range intact — latin-ext is 21KB the browser only fetches if * a page actually sets one of those characters, which on this site is * approximately never. Shipping only "latin" would render tofu; shipping one * merged file would cost every visitor the 21KB. * * AXES: wght 200–800, one axis, read from fvar. NOTE THE CEILING — the * design's heaviest step is ExtraBold 800, which is exactly the top of the * range, so a rule asking for 900 silently renders 800. Nothing does, and * nothing should start. * * THERE IS NO MONOSPACED FACE ON THIS SKIN, and --sn-font-mono below resolves * to Plus Jakarta Sans on purpose. The previous market shipped JetBrains Mono * chiefly so sn/session-calculator's figures would not jiggle as they * recalculate; measured against the file, PLUS JAKARTA SANS CARRIES `tnum` * (tabular figures) in its latin subset, so `font-variant-numeric: * tabular-nums` buys the same digit alignment for 0KB. The mono token is kept * defined because block stylesheets reference it by name. * * ALSO VERIFIED AGAINST THE FILES: € (U+20AC), œ (U+0153), the guillemets, * curly quotes and U+00A0 are all present in "latin"; U+202F — the narrow * no-break space French typography would prefer before a colon or in "50 €" — * IS NOT, in either subset. The theme therefore uses U+00A0 throughout, the * same call the sibling French branch made for the same reason. A U+202F * would silently fall back to another font's space, with different metrics. * * WHAT THE FACE DOES NOT CARRY, as with every font this network has shipped: * ✓ (U+2713), ✗, ⚠, ★, ℹ and ○ (U+25CB) are absent. Symbols are therefore * INLINE SVG, stroked at 2px with rounded joins per the system's iconography * rules, so they cannot fall back to whatever the OS supplies and arrive at a * different size and weight per platform. */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-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/plus-jakarta-sans-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; } /* ---------- Tokens ---------- */ :root { /* SURFACES. A cool grey ground with WHITE cards floating on it — this is the one structural idea in the skin and everything else follows from it. The step from ground to card is only 1.05:1, so the card is not read as a tonal change: it is read as a LIFT, and the coloured shadow below is what does that. Get rid of the shadow and the layout collapses into one flat grey, which is precisely why --sn-shadow is not `none` here the way it was on the last two markets. bg page ground (system: Background, Slate 50) surface cards, panels, the header (system: Foreground, White) surface-2 recessed: input fills, table bands, logo tiles (Slate 100) */ --sn-bg: #F8FAFC; --sn-surface: #FFFFFF; --sn-surface-2: #F1F5F9; /* The soft tinted container the system uses behind icons and features — indigo-50 / violet-50. Muted text is NOT allowed on these (note 3); --sn-text or the semantic ink only. */ --sn-surface-tint: #EEF2FF; --sn-surface-tint-2: #F5F3FF; /* Legacy container slots, referenced by name from the MD3 era. Kept defined so nothing breaks, and resolved into this system rather than inventing a hue nobody chose. */ --sn-secondary-container: #EEF2FF; --sn-on-secondary-container: #312E81; /* 9.53 on it */ --sn-tertiary: #7C3AED; --sn-tertiary-container: #F5F3FF; --sn-on-tertiary-container: #4C1D95; /* RULES. Two tokens, and the distinction is load-bearing (note 2). --sn-border is the system's Slate 200: a hairline that separates and is never asked to define a control. --sn-border-strong is the system's own muted grey doing the one job it can do. */ --sn-border: #E2E8F0; /* dividers only — 1.23 on white */ --sn-border-strong: #64748B; /* control edges — 4.76 white / 4.55 page */ --sn-border-w: 1px; /* the structural width on this skin */ --sn-border-thick: 2px; /* rings, emphasis, the highlighted card */ /* TEXT. Slate 900 — sharp, high contrast, never pure #000. */ --sn-heading: #0F172A; /* 17.06 page / 17.85 card / 16.30 recessed */ --sn-text: #0F172A; --sn-text-muted: #5B6B84; /* 5.17 / 5.41 / 4.94 — see note 3 */ /* THE BRAND PAIR. Indigo is the action colour and violet exists so the two can be a GRADIENT — that gradient is the whole visual signature and it is rationed: the primary button, the headline emphasis span, the marker beside an H2, the closing band. Painted onto anything else it stops meaning "this is the one to click". Legacy names are kept because block stylesheets reference them; what changed is what they resolve to. --sn-primary-dark has ALWAYS meant "the ink that sits ON primary" and it means it here too — it is white again, as it was two markets ago, which is exactly why it must route through the token and never be typed. */ --sn-primary: #4F46E5; /* 6.01 page / 6.29 card */ --sn-primary-hover: #4338CA; /* DEEPER — 7.90 white-on-it. See below. */ --sn-primary-press: #3730A3; /* deeper still — 9.93 */ --sn-primary-dark: #FFFFFF; /* ink ON the accent — 6.29 */ --sn-btn-ink: #FFFFFF; /* button label routes through THIS, never `color` — CLAUDE.md §12 2026-08-10 */ --sn-accent: #4F46E5; --sn-secondary: #7C3AED; /* violet — the gradient's far stop, 5.70 */ --sn-pink: #7C3AED; /* legacy second-accent slot = the violet */ /* HOVERS DEEPEN AGAIN, for the fourth flip in this network's history. Both previous branches were dark skins where a hover had to BRIGHTEN to separate from the ground; on a light page a lighter link fades into the paper instead. Treat any hover value inherited from fr-asset or eng-asset2 as wrong until re-measured. AND THE PRESSED STATE CAN DARKEN HERE, which the previous skin could not: there was no headroom below a saturated accent on black, so its press went UP. Indigo has a full ladder underneath it (7.90 → 9.93 → 11.42), so press is one honest step further down, and the system's own translate-y lift is released rather than replaced. */ /* THE GRADIENT. Declared once, consumed everywhere — a button, a bar and a text span must be the same sweep or the signature reads as three accidents. 135deg is the system's diagonal. */ --sn-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); --sn-gradient-soft: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%); --sn-gradient-dark: linear-gradient(160deg, #312E81 0%, #1E1B4B 100%); /* STATE LAYERS. Indigo-tinted rather than neutral — on a white card a grey wash reads as dirt, while a 6% indigo wash reads as "the brand touched this". */ --sn-state-hover: color-mix(in srgb, var(--sn-primary) 6%, transparent); --sn-state-press: color-mix(in srgb, var(--sn-primary) 12%, transparent); /* CHROME. The header is a white card the width of the page; the FOOTER is the system's dark closing band, so the two no longer share an ink and there are separate tokens for each. --sn-on-chrome means "ink on the DARK band" — check which one you need before reusing either. */ --sn-purple: #FFFFFF; /* header ground */ --sn-purple-2: #FFFFFF; --sn-purple-deep: #1E1B4B; /* footer ground — indigo-950, 15.99 white */ --sn-on-chrome: #FFFFFF; /* ink on the dark band */ --sn-on-chrome-muted: #C7D2FE; /* indigo-200 — 10.72 on the footer */ /* SEMANTIC (callouts, verdicts, pros/cons). ALL FOUR ARE DARKENED FROM THE OBVIOUS TAILWIND STEP, and note 1 is why: on a white card the 500 weights measure 2.15 to 2.54 and are unusable as either text or mark. These four are inks that clear AA on all three surfaces AND clear it on their own tint below. DANGER IS ROSE, NOT RED, ON PURPOSE — the same call as the last three markets, for the same reason: a true red would sit close enough to the warning amber to blur the two. It is nowhere near the indigo, which is the collision this network actually shipped once. State is NEVER signalled by colour alone (CLAUDE.md §4): the icon shape and the heading do that work, on every block that uses these. */ --sn-info: #0369A1; /* sky 700 — 5.93 white / 5.67 page */ --sn-tip: #047857; /* emerald 700 — 5.48 / 5.24 */ --sn-warning: #B45309; /* amber 700 — 5.02 / 4.80 */ --sn-danger: #BE123C; /* rose 700 — 6.29 / 6.01 */ /* Tints, derived so a retint propagates (2026-07-16 decision). AND THEY WORK AGAIN: at 8% over white they resolve to #EBF3F7 / #EBF4F2 / #F9F1EB / #FAECEF — only 1.12–1.15 from the card, but on a LIGHT ground that is a legible wash rather than the invisible smudge it was on near-black. So a callout is a tinted panel again, which is what the block was designed as three markets ago. Every ink is still checked against its own tint: --sn-text reads 15.6–16.0, --sn-text-muted 4.72–4.85, and each semantic ink 4.50–5.58 on its own wash. The warning is the tight one at 4.50 — do not lighten that tint further. */ --sn-info-tint: color-mix(in srgb, var(--sn-info) 8%, transparent); --sn-tip-tint: color-mix(in srgb, var(--sn-tip) 8%, transparent); --sn-warning-tint: color-mix(in srgb, var(--sn-warning) 8%, transparent); --sn-danger-tint: color-mix(in srgb, var(--sn-danger) 8%, transparent); --sn-primary-tint: color-mix(in srgb, var(--sn-primary) 8%, transparent); /* TYPOGRAPHY. The system's Major Third (1.250) scale, which is a gentler ramp than the last market's poster scale — 61px is the desktop H1 ceiling here, not 96px. That is the register: enterprise SaaS, not gallery wall. ONE DELIBERATE DEVIATION, the same one every market in this network has made: the system's body is 16px, which is a marketing-page size. These are 2000–3000-word articles, so --sn-fs-md (18px) is the article body and --sn-fs-base keeps the true 16px for controls, chips and cells. */ --sn-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --sn-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --sn-font-mono: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --sn-fs-xs: .75rem; /* 12 — fine print, footnotes */ --sn-fs-sm: .875rem; /* 14 — captions, labels, button text */ --sn-fs-base: 1rem; /* 16 — controls, table cells */ --sn-fs-md: 1.125rem; /* 18 — ARTICLE BODY (see above) */ --sn-fs-lead: 1.25rem; /* 20 — lead paragraphs, section intros */ --sn-fs-lg: 1.5625rem; /* 25 — h3 */ --sn-fs-xl: 1.953rem; /* 31 — h2 floor */ --sn-fs-2xl: 2.441rem; /* 39 — h2 ceiling */ --sn-fs-3xl: 3.052rem; /* 49 — h1 mobile ceiling */ --sn-fs-4xl: 3.815rem; /* 61 — h1 desktop ceiling, the hero figure */ --sn-fs-5xl: 4.768rem; /* 76 — reserved */ --sn-fs-6xl: 5.96rem; /* 95 — decorative numerals only, never text */ /* TRACKING. Near zero, in one direction only. The last market pulled display type to -.06em and pushed labels out to .2em; this system does neither — -.02em on large headlines "for modern polish" and nothing else moves. Labels are SENTENCE CASE at normal tracking, which is the single fastest way to tell this skin from its siblings at a glance. The wide tokens are kept for blocks that reference them and resolve to values that will not shout. */ --sn-tracking-tighter: -.03em; /* the hero headline only */ --sn-tracking-display: -.02em; /* large headings */ --sn-tracking-body: 0; /* body sits at the font's default */ --sn-tracking-wide: .01em; --sn-tracking-label: .01em; --sn-tracking-widest: .02em; /* LINE HEIGHT. The system's own numbers: 1.1 on headlines for impact, 1.6–1.7 on body for relaxed reading. */ --sn-lh-display: 1.05; --sn-lh-heading: 1.1; --sn-lh-compact: 1.3; --sn-lh-body: 1.65; --sn-lh-relaxed: 1.75; /* Spacing scale (multiples of 4). Section rhythm is the system's py-16 / sm:py-20 / lg:py-24 — sp-16, sp-20, sp-24. */ --sn-sp-1: .25rem; --sn-sp-2: .5rem; --sn-sp-3: .75rem; --sn-sp-4: 1rem; --sn-sp-6: 1.5rem; --sn-sp-8: 2rem; --sn-sp-12: 3rem; --sn-sp-16: 4rem; --sn-sp-20: 5rem; --sn-sp-24: 6rem; --sn-sp-32: 8rem; /* SHAPE. Radius is back, and --sn-radius-pill finally means what its name says for the first time in four markets. The ladder is the system's: rounded-lg on inputs, rounded-xl on cards, rounded-2xl/3xl on the big stages, rounded-full on buttons and badges. */ --sn-radius-sm: 6px; --sn-radius: 12px; /* cards — the system's rounded-xl */ --sn-radius-lg: 16px; --sn-radius-xl: 24px; /* hero stage, CTA band, the dark footer top */ --sn-radius-pill: 9999px; --sn-radius-input: 8px; /* ELEVATION — COLOURED, and this is the second half of the Visual DNA. Neutral grey shadows are what make a light SaaS page look like a template; every shadow in this theme is tinted with the brand indigo, which is why a white card on a near-white ground still reads as lifted even though the two are 1.05:1 apart. Values are the system's own. --sn-shadow resting card --sn-shadow-md hovered card (two layers, the system's spec) --sn-shadow-lg the hero stage and the sticky header when scrolled --sn-shadow-btn primary CTA — stronger, because it must read as pressable against a white card --sn-glow the ethereal ring on numbered badges and markers */ --sn-shadow: 0 4px 20px -2px rgba(79, 70, 229, .10); --sn-shadow-md: 0 10px 25px -5px rgba(79, 70, 229, .15), 0 8px 10px -6px rgba(79, 70, 229, .10); --sn-shadow-lg: 0 24px 50px -12px rgba(79, 70, 229, .25); --sn-shadow-btn: 0 4px 14px 0 rgba(79, 70, 229, .30); --sn-glow: 0 0 20px rgba(79, 70, 229, .5); /* MOTION. "Refined motion — smooth, professional, never jarring." 200ms is the system's base, 500ms is for image zooms only, and the easing is ease-out for natural deceleration rather than the previous skin's crisp-stop curve. Every consumer must still answer prefers-reduced-motion. */ --sn-motion-fast: 150ms; --sn-motion: 200ms; --sn-motion-slow: 500ms; --sn-ease: cubic-bezier(0, 0, .2, 1); /* LAYOUT. --sn-container IS THE SYSTEM'S OWN max-w-7xl (1280px), and unlike the last market that figure was CHECKED AGAINST THE MONEY GRID before being adopted (CLAUDE.md §12, 2026-08-19 — the standing lesson from the pass where 1200px plus generous gutters silently cost the casino list a column). With the container padding below (16/24, not the system's 24/48/64) usable width is 1232px at a 1280 viewport, and sn/casino-cards' auto-fill floor of 280px with a 24px gap needs 1192px for four columns. Four columns fit, with 40px to spare. Raise the padding or drop the container and they do not. --sn-content stays at 720px: at 18px Plus Jakarta Sans that is ~75 characters, inside the system's own 60–75 target. The image dimensions in img-prompt.md are derived from this number — change one and the other is wrong. */ --sn-container: 1280px; --sn-container-wide: 95vw; --sn-content: 720px; }