/* ==========================================================================
   ÇAĞSİAD — Design tokens
   --------------------------------------------------------------------------
   Purpose: single source of truth for colour, type, radius, shadow and spacing,
   lifted from the approved design (tokens.css in the Claude Design project).
   Component rules never hardcode a value that exists here, so the whole site can
   be re-skinned by editing this file alone.

   Note: comments in this plugin are English by client instruction (the project's
   language rule), which departs from the knowledge hub's Vietnamese-comment law.
   That deviation is logged in reports/exceptions/EX-2026-08-11-01.md.
   ========================================================================== */

:root {
	/* Brand — navy */
	--cld-navy-900: #0B1F4F;
	--cld-navy-800: #0F2560;
	--cld-navy-700: #173079;
	--cld-navy-600: #1B3A8B; /* primary */
	--cld-navy-500: #2E4FA8;
	--cld-navy-100: #E6ECF8;
	--cld-navy-050: #F3F6FC;

	/* Brand — orange accent */
	--cld-orange-700: #C76900;
	--cld-orange-600: #E07800;
	--cld-orange-500: #F39200; /* accent */
	--cld-orange-400: #F9A830;
	--cld-orange-100: #FDECD1;
	--cld-orange-050: #FFF7EA;

	/* Neutrals — warm, low saturation */
	--cld-ink-900: #16181D;
	--cld-ink-800: #22262E;
	--cld-ink-700: #3A3F4A;
	--cld-ink-600: #545B68;
	--cld-ink-500: #6B7280;
	--cld-ink-400: #9AA0AB;
	--cld-ink-300: #C9CDD4;
	--cld-ink-200: #E4E6EB;
	--cld-ink-100: #F1F0EC;
	--cld-paper: #FAFAF7;
	--cld-ivory: #F5F2EA;
	--cld-white: #FFFFFF;

	/* Semantic */
	--cld-success: #0F7A4A;
	--cld-danger: #B42318;
	--cld-up: #0F7A4A;
	--cld-down: #B42318;

	/* Tier colours for sponsor badges */
	--cld-gold-bg: #FFF4D6;
	--cld-gold-fg: #8A5A00;
	--cld-gold-br: #F0D584;
	--cld-silver-bg: #F0F2F5;
	--cld-silver-fg: #4A5360;
	--cld-silver-br: #D4D9E0;
	--cld-bronze-bg: #FBEADA;
	--cld-bronze-fg: #8E4E10;
	--cld-bronze-br: #E8C19A;

	/* Type families */
	--cld-ff-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
	--cld-ff-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--cld-ff-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	/* Type scale — desktop. Section titles sit a clear step below the page title
	   so hero and section headings never read at the same level. */
	--cld-fs-hero: clamp(2.75rem, 5.5vw, 4.25rem);
	--cld-fs-h1: clamp(2.25rem, 4vw, 3.5rem);
	--cld-fs-h2: clamp(1.75rem, 2.6vw, 2.5rem);
	--cld-fs-h3: 1.3125rem;
	--cld-fs-lead: 1.125rem;
	--cld-fs-body: 1rem;
	--cld-fs-sm: 0.875rem;
	--cld-fs-xs: 0.75rem;
	--cld-fs-eyebrow: 0.6875rem;

	/* Spacing scale — one rhythm for the whole site */
	--cld-sp-1: 4px;
	--cld-sp-2: 8px;
	--cld-sp-3: 12px;
	--cld-sp-4: 16px;
	--cld-sp-5: 20px;
	--cld-sp-6: 24px;
	--cld-sp-7: 32px;
	--cld-sp-8: 40px;
	--cld-sp-9: 48px;
	--cld-sp-10: 64px;
	--cld-sp-11: 80px;
	--cld-sp-12: 96px;

	/* Radii */
	--cld-r-xs: 2px;
	--cld-r-sm: 4px;
	--cld-r-md: 6px;
	--cld-r-lg: 10px;

	/* Shadows */
	--cld-shadow-sm: 0 1px 2px rgba(11, 31, 79, .05), 0 1px 3px rgba(11, 31, 79, .06);
	--cld-shadow-md: 0 4px 12px rgba(11, 31, 79, .08), 0 2px 4px rgba(11, 31, 79, .04);
	--cld-shadow-lg: 0 18px 40px rgba(11, 31, 79, .12), 0 6px 12px rgba(11, 31, 79, .06);

	/* Container widths — matched to the design's 1240/1360 pair */
	--cld-container: 1240px;
	--cld-container-wide: 1360px;

	/* Hairline used by every mosaic grid on the site */
	--cld-hairline: 1px solid var(--cld-ink-200);
}

/* Mobile spacing reduction: one place, applied to the large steps only, so the
   rhythm compresses proportionally instead of collapsing. */
@media (max-width: 849px) {
	:root {
		--cld-sp-9: 32px;
		--cld-sp-10: 40px;
		--cld-sp-11: 48px;
		--cld-sp-12: 56px;
	}
}