/**
 * Design tokens — single source of truth for every color/spacing/radius/
 * shadow/font value used across the theme. Never hardcode a color, radius,
 * shadow, or spacing value in a component file — reference a var() from here.
 *
 * Colors, spacing scale, radius scale, and the type scale below are now
 * taken from Design Refrance/TSI Style Guide.html — an authoritative
 * developer handoff doc (not one of the ambiguous static page prototypes),
 * which resolves most of what was previously flagged as a placeholder/
 * unconfirmed value pending Figma access. Figma access is still not
 * available; this style guide supersedes the need for it on everything
 * it actually covers.
 *
 * --color-paper / --color-wash: the style guide's own :root literally
 * defines both as #ffffff (white) — but the user explicitly instructed
 * to use the warm cream tone (#FBF8F1) instead, site-wide, not just on
 * the homepage. This is a deliberate override of the style guide file's
 * own stated value, not an extraction from it — flagged here so it isn't
 * mistaken for a discrepancy/bug later. Exposed as a Customizer color
 * picker (Appearance → Customize → Malasiya Theme Settings → Brand
 * Colors → "Card / Content Background" / "Page Background") specifically
 * so this one decision stays a single, easy toggle if it changes again.
 */

:root {
	/* Brand colors — confirmed from TSI Style Guide.html "Colour palette" section */
	--color-primary:        #029547; /* --g: brand green */
	--color-primary-deep:   #0E5A30; /* --g-deep: hover/deep shade */
	--color-primary-wash:   #ECF2EA; /* --g-wash: green tint background */
	--color-accent:         #FFC809; /* --y: "Yellow" — the one official accent/CTA color */
	--color-bar:            #0E3D27; /* --bar: bars & footer */

	/* Gold accent set — NOT in TSI Style Guide.html at all (only --y/Yellow
	   is the documented accent). Originally extracted from the homepage
	   prototype files, which also contained other abandoned/orphaned
	   design-option markup (see MIGRATION-SOURCE-MAP.md) — likely same
	   category: an earlier direction not carried into the final approved
	   style guide. Kept for now (non-destructive) but should be treated as
	   unconfirmed/legacy, not used in new components without checking first. */
	--color-accent-gold:      #B8952A; /* UNCONFIRMED — not in official style guide */
	--color-accent-gold-deep: #8A6D1A; /* UNCONFIRMED — not in official style guide */
	--color-accent-gold-pale: #F9F3E4; /* UNCONFIRMED — not in official style guide */

	/* Text / ink — confirmed from style guide */
	--color-ink:            #1C2620; /* primary text */
	--color-ink-mid:        #55605A; /* secondary text */
	--color-ink-soft:       #8C8B7E; /* muted/tertiary text */
	--color-ink-faint:      #C8C8C8; /* disabled/faint text — not in style guide, kept as-is (reasonable, unused so far) */

	/* Borders / lines — confirmed from style guide */
	--color-line:           #E7E0D1;
	--color-line-mid:       #D6CCB7;
	--color-line-strong:    #9A978D; /* not in style guide, kept as-is (reasonable, unused so far) */

	/* Surfaces */
	--color-paper:          #FBF8F1; /* user override — see note above; style guide itself says #ffffff */
	--color-wash:           #FBF8F1; /* user override — see note above; style guide itself says #ffffff */
	--color-page-backdrop:  #F4F2EC; /* NEW — style guide's own html/body background, sits behind the max-width page wrapper; distinct from --color-paper/--color-wash */
	--color-card:           #FBFAF6; /* not in style guide, kept as-is */
	--color-off-white:      #F7F6F3; /* not in style guide, kept as-is */
	--color-white:          #FFFFFF;
	--color-warm:           #F7F5F0; /* not in style guide, kept as-is */
	--color-ad-bg:          #F2F2EF; /* not in style guide, kept as-is */
	--color-placeholder:    #D9D7CD; /* image/skeleton placeholder fill — not in style guide, kept as-is */
	--color-note:           #C4622D; /* callout/note accent — not in style guide, kept as-is */

	/* Semantic state colors — still NOT present in the style guide (no
	   validation/success/error/warning swatches shown there either).
	   Introduced since the real Contact page (Phase 2) needs them. */
	--color-success: #0E5A30; /* reuses --color-primary-deep */
	--color-error:   #C0392B; /* introduced — still unconfirmed, no source anywhere has this */
	--color-warning: #C4622D; /* reuses --color-note */
	--color-info:    #029547; /* reuses --color-primary */

	/* Layout — confirmed from style guide: "Content max-width 1440px" */
	--container-max: 1440px;

	/* Spacing scale — confirmed from style guide's "Spacing scale (px)"
	   swatch row: 8/16/24/40/56/72. Replaces the earlier guessed 4px-based
	   scale entirely. Style guide also states: "Section padding runs
	   56–72px; page gutters are 56px desktop / 16px mobile." */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 40px;
	--space-5: 56px;
	--space-6: 72px;
	--gutter-desktop: 56px;
	--gutter-mobile: 16px;

	/* Radius scale — confirmed from style guide's "Corner radius" swatch
	   row: 4 (buttons), 6 (thumbnails), 12 (cards), 30 (pills). Replaces
	   the earlier guessed 8/14/24/999 scale entirely. */
	--radius-button: 4px;
	--radius-thumb: 6px;
	--radius-card: 12px;
	--radius-pill: 30px;

	/* Shadow scale — still not defined anywhere in either the style guide
	   or the page prototypes (no box-shadow swatches shown); kept as a
	   reasonable placeholder pending a real need. */
	--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 0 60px rgba(0, 0, 0, 0.05);

	/* Typography — font FAMILIES confirmed 100% (Archivo + Playfair
	   Display). Font SIZES below are now confirmed from the style guide's
	   "Typography" section (§02) — replaces the earlier guessed modular
	   scale entirely. See assets/css/base/fonts.css for italic faces
	   (Playfair Display italic for Lead/Dek, Archivo italic 400) added to
	   match this exact scale. */
	--font-primary: 'Archivo', sans-serif;
	--font-secondary: 'Playfair Display', serif;

	/* Display — Playfair Display 900, ~56px, line-height 1.0, -1.5px tracking */
	--font-display-size: 56px;
	--font-display-weight: 900;
	--font-display-line-height: 1;
	--font-display-tracking: -1.5px;

	/* H1 / Page title — Playfair Display 900, 40–76px (source gives a
	   range, not one fixed value — use 40px as the base/default, and the
	   upper end for large hero contexts specifically), -1px tracking */
	--font-h1-size: 40px;
	--font-h1-size-hero: 76px;
	--font-h1-weight: 900;
	--font-h1-line-height: 1;
	--font-h1-tracking: -1px;

	/* H2 / Section — Playfair Display 700, 27px, -0.4px tracking */
	--font-h2-size: 27px;
	--font-h2-weight: 700;
	--font-h2-tracking: -0.4px;

	/* Lead / Dek — Playfair Display italic, 21px, line-height 1.45 */
	--font-lead-size: 21px;
	--font-lead-line-height: 1.45;

	/* Body — Archivo 400, 17px, line-height 1.75 */
	--font-body-size: 17px;
	--font-body-weight: 400;
	--font-body-line-height: 1.75;

	/* Kicker / Label — Archivo 700, caps, 11px, +2.5px tracking */
	--font-label-size: 11px;
	--font-label-weight: 700;
	--font-label-tracking: 2.5px;

	/* Category tag — Archivo 700, caps, 11px, +1.5px tracking, green (--color-primary) */
	--font-tag-size: 11px;
	--font-tag-weight: 700;
	--font-tag-tracking: 1.5px;

	/* Generic base font size (not in style guide's named scale, but still
	   needed as a sane <body> default before any component-specific size
	   applies) */
	--font-size-base: 1rem; /* 16px */

	/* Z-index scale — not present in source; introduced to keep stacking
	   context conflicts (mobile nav overlay vs subscribe modal vs sticky
	   ad rail) predictable once those components are built in Phase 2. */
	--z-sticky: 10;
	--z-header: 100;
	--z-nav-overlay: 200;
	--z-modal: 300;
}

/**
 * Breakpoints — CSS custom properties cannot be used inside @media
 * conditions, so these are documented here as the fixed convention instead
 * (use the literal px values below in every @media rule you write, do not
 * invent new breakpoints ad hoc). Source only used one binary split (768px);
 * tablet/desktop added as a reasonable default — the style guide's own
 * @media block also only targets max-width:720px (close to but not
 * identical to the 768px used elsewhere in Design Refrance — 768px kept
 * as the primary mobile breakpoint since it's used far more consistently
 * across the actual page prototypes).
 *
 *   Mobile:  max-width: 768px   (confirmed from Design Refrance page prototypes)
 *   Tablet:  max-width: 1024px  (not present in source — added convention)
 *   Desktop: min-width: 1025px  (not present in source — added convention)
 *
 * The same three numbers are exported as JS constants in
 * assets/js/utils/utils.js (BREAKPOINTS) for use in matchMedia()/JS logic.
 */