/*
 * 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: "Kinetic Typography" (FR site, keyword `casino en ligne`) — rich
 * near-black ground, off-white type, ONE acid-yellow accent. Typography is not
 * decoration here, it is the entire visual structure: the page is a poster that
 * moves. Flat by doctrine — no gradients, no shadows, no radius. Structure is
 * carried by 2px rules and by halftone/colour layering, never by depth.
 *
 * THIS IS THE FIRST DARK SKIN IN THE FAMILY. Every other market ships a light
 * page, so the usual reflex ("text is dark, surfaces are light") is inverted
 * everywhere and any value inherited from a light skin is suspect by default.
 *
 * EVERY PAIR BELOW IS MEASURED, not eyeballed (assets/../contrast audit). The
 * recurring bug across this family of sites is a value tuned for one skin
 * surviving into another where it fails, so ratios are recorded inline. Four
 * rules fall out of the measurements:
 *
 *   1. --sn-border is 1.91:1 against the page. That is FINE for a decorative
 *      divider and NOT fine for the edge of a control. In a system with no
 *      shadows the 2px rule is the only thing that says "this is a card / an
 *      input / a button", i.e. it carries meaning, and WCAG 1.4.11 wants 3:1
 *      for that. Interactive edges therefore use --sn-border-strong (3.35:1).
 *      Do not collapse the two tokens back into one.
 *
 *   2. --sn-accent is a LIGHT colour, so ink on it is DARK (--sn-btn-ink), and
 *      it must never be used as text on any light surface: acid yellow on
 *      off-white measures 1.35:1. This is the same trap as the Australian
 *      skin's aqua-on-paper, and it bites specifically on the "flood with
 *      accent on hover" pattern, where a card's surface becomes the accent —
 *      every child then needs dark ink, not just the title.
 *
 *   3. The semantic callout colours measure 10.5–14.2 on the page (all pass),
 *      but 1.00–1.35 AGAINST THE ACCENT. By luminance they are
 *      indistinguishable from acid yellow, so callout state must never be
 *      signalled by colour or brightness alone — the icon and the heading do
 *      that work. Same rule as the calculator's verdict states.
 *
 *   4. --sn-text-muted is measured against the LIGHTEST surface it lands on,
 *      which is --sn-surface-2 (#27272A): 5.81 there, 7.76 on the page. The
 *      design brief proposed #27272A itself for placeholder text — that is
 *      1.34:1, i.e. invisible, and is not a stylistic choice but a defect.
 *      Placeholders use --sn-text-muted.
 */

/* ---------- Fonts (self-hosted, French subset) ---------- */
/*
 * Variable fonts, one file per family, 56KB total (Archivo 32KB + Manrope
 * 23KB) — under the 64KB the previous market spent on two faces.
 *
 * Archivo is the display face: a geometric grotesk that holds together at
 * poster scale, which is the whole requirement here. It ships a width axis as
 * well, and that axis was DELIBERATELY DROPPED: keeping it cost 53KB (86KB vs
 * 33KB) on the font that renders the LCP element, and no part of the design
 * calls for width variation. If a condensed lockup is ever wanted, ship a
 * pinned static instance rather than reinstating the axis.
 *
 * WEIGHT CEILINGS, read from the fvar table, not assumed: Archivo 400–900 and
 * Manrope 300–800. So `font-weight: 800`/`900` are REAL here. That is the
 * opposite of the previous market, where eleven files asked for 800 from a
 * face that stops at 700 and silently got 700 — the lesson is to check the
 * axis, not to avoid the value.
 *
 * SUBSET, and why it is not just "latin": the subset is built for French, and
 * a Google "latin" subset is NOT sufficient for a site where every display
 * string is uppercase. Œ/œ (U+0152–0153) happen to be inside latin, but
 * Ÿ (U+0178) is not, and it appears in French proper nouns (L'Haÿ-les-Roses).
 * Included here: U+0020–007E, U+00A0–00FF (guillemets « », ©, °, ×, all
 * accents), U+0152–0153, U+0178, the punctuation/dash/quote ranges, and U+20AC.
 *
 * NARROW NO-BREAK SPACE: French typography wants U+202F before : ; ! ? and
 * inside guillemets. NEITHER FACE CONTAINS THAT GLYPH — verified against both
 * files, not assumed — so a U+202F in content falls back to some other font's
 * space with different metrics. Use U+00A0 (present in both) throughout the
 * theme's own strings. Do not "upgrade" them to U+202F.
 */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/archivo-vf.woff2') format('woff2');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/manrope-vf.woff2') format('woff2');
}

/* ---------- Tokens ---------- */

:root {
	/* Surfaces. The ground is a rich near-black, never #000 — pure black next
	   to acid yellow vibrates. Cards sit only barely above the page (18.34 vs
	   19.06 for body text: the difference is deliberately almost nothing)
	   because in this system a card is defined by its 2px rule, not by its
	   fill. --sn-surface-2 is the one genuinely raised surface: toned table
	   rows, logo tiles, input fills. */
	--sn-bg:            #09090B;   /* page — rich near-black */
	--sn-surface:       #0F0F11;   /* cards / panels — the rule does the work */
	--sn-surface-2:     #27272A;   /* toned rows, tiles, input fill */

	/* Rules. TWO tokens on purpose — see note 1 in the header. */
	--sn-border:        #3F3F46;   /* decorative dividers only — 1.91 on page */
	--sn-border-strong: #63636D;   /* interactive edges — 3.35, clears 1.4.11 */
	--sn-border-w:      2px;       /* the structural width; 1px for hairlines */

	/* Text. Off-white, never #FFF. */
	--sn-heading:       #FAFAFA;   /* 19.06 on page, 18.34 on surface */
	--sn-text:          #FAFAFA;   /* body is full-strength here: on a dark
	                                  ground a "softened" body colour reads as
	                                  disabled, not as gentle */
	--sn-text-muted:    #A1A1AA;   /* 7.76 page / 7.47 surface / 5.81 surface-2 */

	/* Brand. ONE accent, used boldly and sparingly. Token names are inherited
	   from the earlier skins for compatibility — --sn-primary-dark means "the
	   ink that sits ON primary", which here is the page black at 14.13. */
	--sn-primary:       #DFE104;   /* acid yellow — the ONLY action colour */
	--sn-primary-hover: #EDEF2E;   /* BRIGHTENS on hover — this is a dark skin;
	                                  do not copy the "darken" rule from the
	                                  light markets */
	--sn-primary-dark:  #09090B;   /* ink ON accent — 14.13 */
	--sn-btn-ink:       #09090B;   /* button label routes through THIS, never
	                                  `color` — see CLAUDE.md §12 2026-08-10 */
	--sn-accent:        #DFE104;   /* links, markers — 14.13 on page */
	--sn-pink:          #DFE104;   /* heading markers (legacy token name) */
	--sn-aqua:          #DFE104;   /* legacy token — there is no second accent
	                                  in this skin; kept so inherited rules do
	                                  not resolve to nothing */
	--sn-gold:          #DFE104;   /* star ratings — the accent, not a brass */

	/* Chrome (header/footer/hero). In this skin the chrome is the SAME ground
	   as the page and is separated by a 2px rule instead of by colour. The
	   design brief also flooded the footer with the accent; that is
	   deliberately NOT done — the accent has to keep meaning "this is the
	   action", and a full-width yellow band under a compliance strip reads as
	   promotional. The accent flood is spent on the marquee band instead. */
	--sn-purple:        #09090B;
	--sn-purple-2:      #0F0F11;
	--sn-purple-deep:   #09090B;
	--sn-purple-tint:   color-mix(in srgb, var(--sn-accent) 10%, transparent);
	--sn-on-chrome:     #FAFAFA;   /* 19.06 */

	/* Semantic (callouts). LIGHT variants — the previous market's values were
	   dark inks for a paper page and would have vanished here. Measured on the
	   page: info 11.93, tip 14.17, warning 11.80, danger 10.48. Warning is an
	   ORANGE, not an amber, so it does not read as a second accent next to
	   acid yellow. See note 3: none of these is distinguishable from the
	   accent by luminance, so never signal state with colour alone. */
	--sn-info:          #7DD3FC;
	--sn-tip:           #86EFAC;
	--sn-warning:       #FDBA74;
	--sn-danger:        #FCA5A5;

	/* Tints for callout backgrounds — derived from the base tokens so a
	   retint propagates (2026-07-16 decision). At 12% over the page these
	   resolve to roughly #172128 / #18251E / #261E18 / #261C1D, on which
	   --sn-text reads 15.2–15.9 and --sn-text-muted 6.2–6.5. */
	--sn-info-tint:     color-mix(in srgb, var(--sn-info) 12%, transparent);
	--sn-tip-tint:      color-mix(in srgb, var(--sn-tip) 12%, transparent);
	--sn-warning-tint:  color-mix(in srgb, var(--sn-warning) 12%, transparent);
	--sn-danger-tint:   color-mix(in srgb, var(--sn-danger) 12%, transparent);
	--sn-primary-tint:  color-mix(in srgb, var(--sn-accent) 12%, transparent);

	/* Typography. Archivo display, Manrope body. */
	--sn-font:         'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--sn-font-display: 'Archivo', 'Manrope', -apple-system, Helvetica, Arial, sans-serif;
	--sn-fs-xs: .8125rem;  /* 13px meta */
	--sn-fs-sm: .9375rem;  /* 15px small */
	--sn-fs-md: 1.125rem;  /* 18px body — up from 17px: this design wants a
	                          larger reading size, and 18px is the most a
	                          2500-word article can take at an 820px measure */
	--sn-fs-lg: 1.5rem;    /* 24px h3 */
	/* h2/h1 FLOORS (phone) — base.css clamps them up to a desktop ceiling.
	   These are lower than the display scale would suggest, and the reason is
	   French: section headings are uppercase here, French headings are long
	   ("Comment choisir un casino en ligne fiable"), and uppercase adds another
	   15–20% over the same string in lower case. A 36px floor wrapped real
	   headings to three lines at 375px. Test any change against the LONGEST
	   heading in the §9 page plan, not against a short English one. */
	--sn-fs-xl: 1.75rem;   /* 28px h2 floor */
	--sn-fs-2xl: 2.75rem;  /* 44px h1 floor */
	--sn-lh-body: 1.65;
	--sn-lh-heading: 1.05;

	/* --sn-lh-display is for the poster register only (hero, section breaks,
	   massive numerals). The design brief asked for 0.8. IT IS 0.92 HERE, and
	   that is a French constraint, not a softening: display text is uppercase,
	   French uppercase carries diacritics (É À Ç Î Ô Ÿ), and at 0.8 the
	   accents of one line collide with the caps of the line above. 0.92 is the
	   tightest value that clears É over a following cap at these sizes. */
	--sn-lh-display: .92;

	/* Tracking. Large display text is tightened, small labels are opened up. */
	--sn-tracking-display: -.03em;
	--sn-tracking-label:   .12em;

	/* Spacing scale (multiples of 4) */
	--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-24: 6rem;   --sn-sp-32: 8rem;  /* poster-register section rhythm */

	/* Shape — FLAT AND SHARP BY DOCTRINE. Radius is 0 and shadows do not
	   exist; depth comes from colour layering and from oversized background
	   numerals. The radius tokens are kept (not deleted) because every block
	   references them — setting them to 0 in one place is what makes the whole
	   theme square without touching 21 stylesheets.
	   --sn-radius-pill is 0 too: badges become rectangles here, on purpose. */
	--sn-radius:      0;
	--sn-radius-sm:   0;
	--sn-radius-pill: 0;
	--sn-shadow:      none;
	--sn-glow:        none;

	/* Motion. The design is kinetic, so timings are tokens rather than magic
	   numbers scattered through 21 files. Hard and snappy: nothing eases in
	   slowly. Every consumer must also answer prefers-reduced-motion. */
	--sn-motion-fast: 160ms;
	--sn-motion:      280ms;
	--sn-marquee-fast: 28s;   /* stats band — one full loop */
	--sn-marquee-slow: 52s;   /* reading content */
	--sn-ease: cubic-bezier(.2, .7, .3, 1);

	/* Layout. Two measures: the poster register pushes to the edges, the
	   reading register stays at a readable column. */
	--sn-container:  1320px;  /* outer container */
	--sn-container-wide: 95vw; /* poster sections — full-bleed feel */
	--sn-content:    820px;   /* article measure — the image sizes in
	                             IMAGE-STYLE-FR.md are derived from this */
}