/*
 * 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: "Bangkok Night" (ราตรีกรุงเทพ) — Thai market site #2. Night-blue
 * page, glass cards, electric cyan as the single action colour, magenta as the
 * accent, and gold kept for one job only: money.
 *
 * THIS SKIN IS DARK-FIRST, AND THAT INVERTS RULES THE LAST SIX SKINS RELIED ON.
 * Read these four before changing a value — every one of them was a real bug on
 * a previous market, in the opposite direction:
 *
 *   1. --sn-text-muted must clear 4.5:1 against the LIGHTEST surface it ever
 *      lands on (--sn-surface-2 #1C2540), not against the page. On the light
 *      skins the rule was "the darkest surface". Same rule, mirrored.
 *   2. HOVERS MUST BRIGHTEN, NEVER DARKEN. On Thong Kham a link hovering to
 *      the brand colour vanished at 2.8:1; here the danger is the reverse, so
 *      link hover goes to --sn-heading (white, 18.9:1).
 *   3. A DARK PANEL IS NOT AN ACCENT ANY MORE. Every "inverse card" and header
 *      band from the light skins has to become LIGHTER than its surroundings or
 *      it disappears — that is what --sn-band-grad exists for.
 *   4. --sn-primary is a LIGHT colour (again). Everything printed on it is ink
 *      (--sn-primary-dark), never white.
 *
 * The gloss stays: gradients, bevels, a sheen sweep. Thai commercial web is
 * built out of them and a flat page reads as foreign there. On a dark skin the
 * gloss shows up as NEON — glow, wet reflections, edge light — which is also
 * what keeps this site from looking like our other Thai one.
 *
 * THAI TYPOGRAPHY — three rules, enforced here and in base.css:
 *   1. --sn-lh-body is 1.9 and --sn-lh-heading is 1.34. Thai stacks vowel and
 *      tone marks ABOVE and BELOW the baseline; at the 1.7/1.12 the Latin skins
 *      used, marks collide with the line above.
 *   2. NO text-transform: uppercase anywhere. Thai has no letter case, so it
 *      does nothing to Thai and shouts at any Latin mixed into the same string.
 *   3. NO positive letter-spacing. Thai glyphs join and stack; spacing them
 *      apart breaks the cluster and can detach a tone mark from its consonant.
 * A rule that reintroduces any of these is breaking Thai text, not styling it.
 */

/* ---------- Fonts (self-hosted, thai + latin subsets) ---------- */
/*
 * Two files per face: the Thai block (U+0E01–0E5B) and Latin. Thai pages mix
 * Latin constantly — brand names, "Live Chat", "True Wallet", numerals — so
 * both subsets are always needed.
 *
 * Bai Jamjuree is the display face: a loopless, slightly squared Thai sans
 * (Cadson Demak) that reads as technical rather than decorative, which is what
 * a neon skin wants. IBM Plex Sans Thai carries the body — loopless too, but
 * humanist and built for long text. Neither is shared with our other Thai site
 * (Kanit + Noto Sans Thai) or with the thai-asset branch (Anuphan): the type is
 * a de-fingerprinting layer on top of the class hashing, same as the palette.
 *
 * Both are STATIC weights, not variable, so we self-host exactly what we use:
 * display 600/700, body 400/600. 104KB total for eight files.
 * NOTE: the display face tops out at 700 — h1 is 700 here, not the 800 the
 * Kanit skin used. Asking for 800 gets a synthesised fake-bold.
 */

@font-face {
	font-family: 'Bai Jamjuree';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/bai-jamjuree-600-thai.woff2') format('woff2');
	unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
	font-family: 'Bai Jamjuree';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/bai-jamjuree-600-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: 'Bai Jamjuree';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/bai-jamjuree-700-thai.woff2') format('woff2');
	unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
	font-family: 'Bai Jamjuree';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/bai-jamjuree-700-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: 'IBM Plex Sans Thai';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ibm-plex-thai-400-thai.woff2') format('woff2');
	unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
	font-family: 'IBM Plex Sans Thai';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ibm-plex-thai-400-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: 'IBM Plex Sans Thai';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/ibm-plex-thai-600-thai.woff2') format('woff2');
	unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
	font-family: 'IBM Plex Sans Thai';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/ibm-plex-thai-600-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;
}

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

:root {
	/* Surfaces — night page, GLASS cards. The step from page to card is small
	   on purpose (1.3:1); on a dark UI the frame and the edge light do the
	   separating, not a big luminance jump, which would read as grey blocks. */
	--sn-bg:            #0B1020;   /* page (night blue) */
	--sn-surface:       #141B2E;   /* cards / panels */
	--sn-surface-2:     #1C2540;   /* toned rows, logo tiles, input bg */
	--sn-border:        #2C3557;   /* edge */

	/* Text. NOTE on --sn-text-muted: it must clear 4.5:1 against the LIGHTEST
	   surface it ever lands on, which is --sn-surface-2 (#1C2540) — not against
	   the page. #93A0C0 reads 5.79 there and 7.24 on the page. Do not darken
	   it. (On the light skins this note read "darkest"; the skin inverted, the
	   rule did not.) */
	--sn-heading:       #FFFFFF;
	--sn-text:          #C9D3E8;
	--sn-text-muted:    #93A0C0;   /* see the note above before changing */

	/* Brand.
	   --sn-primary is electric cyan. It is a LIGHT colour, so everything
	   printed on it must be ink — never white. That is what --sn-primary-dark
	   carries (the token name is inherited from the Latin skins, where the
	   action colour was dark; here it means "the text that sits on primary").
	   --sn-primary-hover BRIGHTENS, because the surface under it is dark. */
	--sn-primary:       #2BD9E6;   /* electric cyan — the ONLY action colour */
	--sn-primary-hover: #7BF2F8;
	--sn-primary-dark:  #06202A;   /* text ON cyan buttons — 9.75:1 */
	--sn-accent:        #FF74B0;   /* neon magenta — links, markers, rank marks */
	--sn-pink:          #FF74B0;   /* heading markers, small highlights */
	/* --sn-gold has ONE job on this skin: money. Coins, payout figures, star
	   ratings, the age badge. It is not a second action colour and it never
	   fills a button — the page has exactly one of those and it is cyan.
	   On the light skins this token was a darkened amber that existed because
	   bright gold was invisible on paper; here it reads 11.1:1 on a card, so
	   it is the bright value. */
	--sn-gold:          #FFC857;

	/* Chrome (topbar/header/footer/hero) — token names kept for compatibility
	   across market skins. Here the chrome goes DEEPER than the page rather
	   than darker-than-a-light-page; the cyan edge rule is what separates the
	   sticky header from the content under it. */
	--sn-purple:        #101728;
	--sn-purple-2:      #1B2A55;   /* chrome gradient lift / hero bloom */
	--sn-purple-deep:   #070B17;   /* topbar + footer body */
	--sn-purple-tint:   rgba(43, 217, 230, .12);
	--sn-on-chrome:     #EAF1FF;   /* text/icons on the chrome */

	/* Semantic (callouts etc.) — every one LIGHTENED for a dark page. The
	   light-skin values (#1D5FA8 info, #0F7864 jade, #95550A warning) all
	   measured under 3:1 here and were unreadable. Verified on the page, the
	   card AND the inset: worst pair is danger on inset at 6.73:1. */
	--sn-info:          #7FB4FF;
	--sn-tip:           #3FE0C0;   /* mint — the dark-skin form of the jade */
	--sn-warning:       #FFC46B;
	--sn-danger:        #FF8A99;

	/* Tints for callout backgrounds. Alphas run roughly 50% higher than the
	   light skins': at .07–.09 over a dark page a tint is simply not there. */
	--sn-info-tint:     rgba(127, 180, 255, .13);
	--sn-tip-tint:      rgba(63, 224, 192, .13);
	--sn-warning-tint:  rgba(255, 196, 107, .13);
	--sn-danger-tint:   rgba(255, 138, 153, .12);
	--sn-primary-tint:  rgba(43, 217, 230, .14);

	/* Typography. Bai Jamjuree for display, IBM Plex Sans Thai for body. The
	   Latin fallbacks matter more than usual: a missing Thai font falls back to
	   the system Thai UI face on every platform, which is why no serif appears
	   in either stack — Thai serifs look nothing like Latin ones. */
	--sn-font:         'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Leelawadee UI', Tahoma, sans-serif;
	--sn-font-display: 'Bai Jamjuree', 'IBM Plex Sans Thai', -apple-system, 'Leelawadee UI', Tahoma, sans-serif;
	--sn-fs-xs: .875rem;   /* 14px meta — Thai needs a size up from Latin 13 */
	--sn-fs-sm: 1rem;      /* 16px small */
	--sn-fs-md: 1.125rem;  /* 18px body — Thai marks need the extra height */
	--sn-fs-lg: 1.375rem;  /* h3 */
	--sn-fs-xl: 1.875rem;  /* h2 */
	--sn-fs-2xl: 2.5rem;   /* h1 */
	--sn-lh-body: 1.9;     /* Thai tone/vowel marks stack — see the header */
	--sn-lh-heading: 1.34; /* likewise; 1.12 collided on two-line Thai headings */

	/* 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;

	/* Shape — rounder than the gold skin (16px, the size dark neon UIs
	   converge on) and with a much heavier shadow: on a dark page a soft grey
	   shadow does nothing, so depth comes from near-black plus a coloured
	   glow. */
	--sn-radius:     16px;   /* cards, panels, images */
	--sn-radius-sm:  12px;   /* buttons, chips, small controls */
	--sn-radius-pill: 999px; /* pills/badges */
	--sn-shadow:     0 2px 6px rgba(0, 0, 0, .40), 0 18px 40px rgba(0, 0, 0, .45);
	--sn-glow:       0 6px 22px rgba(43, 217, 230, .38);

	/* --- Gloss (this skin only) ---
	   The gradients that carry the neon look. They live in tokens so the shine
	   is retuned in ONE place and blocks never hand-roll a gradient out of raw
	   hex. The NAMES are inherited from the gold skin and are deliberately not
	   renamed — a market skin swaps values, never token names, or every block
	   stylesheet would need editing. Read them as roles:
	     --sn-gold-grad    = THE ACTION GRADIENT (cyan here)
	     --sn-lacquer-grad = the chrome (header, footer, topbar)
	     --sn-band-grad    = a band that must read LIGHTER than the card it sits
	                         on: table headers, panel bars. NEW on this skin,
	                         because the light skins used the lacquer gradient
	                         for that job and on a dark card it vanishes. */
	--sn-gold-grad:    linear-gradient(170deg, #7BF2F8 0%, #2BD9E6 45%, #0FA9B6 100%);
	--sn-lacquer-grad: linear-gradient(150deg, #131C33 0%, #0D1424 55%, #070B17 100%);
	--sn-band-grad:    linear-gradient(150deg, #26345F 0%, #1C2540 100%);
	--sn-sheen:        linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
	/* The neon grid that repeats across dark surfaces (hero, key-takeaways,
	   brand-promo) the way the gold lattice did on the other Thai site — it is
	   what makes those panels read as one material. */
	--sn-grid:         repeating-linear-gradient(90deg, rgba(43, 217, 230, .07) 0 1px, transparent 1px 44px),
	                   repeating-linear-gradient(0deg, rgba(255, 116, 176, .06) 0 1px, transparent 1px 44px);

	/* Layout — wider than the Latin skins. Thai wraps without spaces between
	   words, so a short measure produces very ragged, hard-to-scan lines. */
	--sn-container:  1200px;  /* outer container */
	--sn-content:    800px;   /* article measure */
}