/*
 * 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: "Thong Kham" (ทองคำ, "gold") — the Thai market skin. Lacquer-black
 * chrome, temple gold as the single action colour, Thai crimson as the accent,
 * and a warm sand paper for the reading column. Unlike every Latin skin before
 * it, this one is GLOSSY on purpose: Thai gambling and lottery sites are built
 * out of gradients, bevels and sheen, and a flat editorial page reads as
 * foreign there. The gloss is confined to CHROME and ACTIONS — the reading
 * column stays calm, because a 3,000-word Thai guide has to be readable.
 *
 * Palette measured off the brand this site promotes (finnbhydra188.com /
 * FINNBet): gold #FFCB11, near-black #282828, deep navy #091F33. Keeping the
 * gold exact is deliberate — the affiliate page should feel like it belongs to
 * the same world as the site it sends traffic to.
 *
 * 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. This is not a taste setting.
 *   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, and splitting them keeps the Thai page from
 * paying for Latin glyphs it renders in a system font anyway.
 *
 * Kanit is the display face: a loopless geometric Thai sans, and the single
 * most recognisable face in Thai commercial web design. It ships as static
 * weights (no variable axis), so we self-host exactly the two we use: 600 for
 * headings, 800 for the hero and numerals. Noto Sans Thai carries the body and
 * IS variable, so one file covers 300–800.
 */

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

@font-face {
	font-family: 'Kanit';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/kanit-800-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: 'Noto Sans Thai';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/noto-sans-thai-vf-thai.woff2') format('woff2');
	unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
	font-family: 'Noto Sans Thai';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/noto-sans-thai-vf-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 — warm sand paper, WHITE cards. Thai commercial sites are
	   card-heavy and warm-toned; a cool grey page reads Western here. */
	--sn-bg:            #FBF6EA;   /* page (warm sand) */
	--sn-surface:       #FFFFFF;   /* cards / panels */
	--sn-surface-2:     #F3E9D4;   /* toned rows, logo tiles, input bg */
	--sn-border:        #E5D6B4;   /* warm gold hairline */

	/* Text. NOTE on --sn-text-muted: it must clear 4.5:1 against the DARKEST
	   surface it ever lands on, which is --sn-surface-2 (#F3E9D4) — not against
	   the page. #6B6350 reads 4.63 there and 5.05 on paper. Do not lighten it. */
	--sn-heading:       #14161F;   /* lacquer ink */
	--sn-text:          #383B45;
	--sn-text-muted:    #6B6350;   /* see the note above before changing */

	/* Brand.
	   --sn-primary is the FINNBet gold. 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:       #FFCB11;   /* temple gold — the ONLY action colour */
	--sn-primary-hover: #F0B800;
	--sn-primary-dark:  #14161F;   /* text ON gold buttons */
	--sn-accent:        #C1121F;   /* Thai crimson — links, markers, rank marks */
	--sn-pink:          #C1121F;   /* heading markers, small highlights */
	/* --sn-gold is the READABLE amber, not the bright brand gold: it is used as
	   text and as meaningful graphics (stars, the age badge) on LIGHT surfaces,
	   where #FFCB11 measures 1.6:1 and is effectively invisible. It clears 3:1
	   as a graphic on all three light surfaces and 4.2:1 as text on white.
	   On the dark chrome use --sn-primary instead — that is where the bright
	   gold belongs, and it reads 11.9:1 there. */
	--sn-gold:          #A96F06;

	/* Chrome (topbar/header/footer/hero) — token names kept for compatibility.
	   Lacquer black with a navy cast, lifted from the promoted brand. */
	--sn-purple:        #14161F;
	--sn-purple-2:      #091F33;   /* chrome gradient end (deep navy) */
	--sn-purple-deep:   #0B0D14;   /* footer body */
	--sn-purple-tint:   rgba(255, 203, 17, .10);
	--sn-on-chrome:     #FFF9EA;   /* text/icons on the lacquer chrome */

	/* Semantic (callouts etc.) — tuned to read on warm paper */
	--sn-info:          #1D5FA8;
	--sn-tip:           #0F7864;   /* jade */
	--sn-warning:       #95550A;   /* darkened from #B4690E, which read 3.92 on paper */
	--sn-danger:        #C1121F;

	/* Tints for callout backgrounds */
	--sn-info-tint:     rgba(29, 95, 168, .08);
	--sn-tip-tint:      rgba(15, 120, 100, .09);
	--sn-warning-tint:  rgba(180, 105, 14, .10);
	--sn-danger-tint:   rgba(193, 18, 31, .07);
	--sn-primary-tint:  rgba(255, 203, 17, .16);

	/* Typography. Kanit for display, Noto 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:         'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Leelawadee UI', Tahoma, sans-serif;
	--sn-font-display: 'Kanit', 'Noto 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 — rounded and glossy. Thai commercial web is soft-cornered and
	   generous with radius; 14px is the size the reference sites converge on. */
	--sn-radius:     14px;   /* cards, panels, images */
	--sn-radius-sm:  10px;   /* buttons, chips, small controls */
	--sn-radius-pill: 999px; /* pills/badges */
	--sn-shadow:     0 1px 2px rgba(20, 22, 31, .06), 0 10px 28px rgba(20, 22, 31, .10);
	--sn-glow:       0 6px 20px rgba(255, 203, 17, .42);

	/* --- Gloss (this skin only) ---
	   The three gradients that carry the "sljašti" look. They live in tokens so
	   the shine is retuned in ONE place, and so blocks never hand-roll a
	   gradient out of raw hex. */
	--sn-gold-grad:    linear-gradient(170deg, #FFE07A 0%, #FFCB11 42%, #E8A800 100%);
	--sn-lacquer-grad: linear-gradient(150deg, #1B2438 0%, #14161F 55%, #0B0D14 100%);
	--sn-sheen:        linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);

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