/*
 * WPistic design tokens — single source of truth for CSS.
 * Mirrors theme.json so classic templates, Gutenberg, and Elementor share one palette.
 *
 * Dual mode:
 *   :root / [data-theme="light"]  → PDF "warm editorial" palette (DEFAULT)
 *   [data-theme="dark"]           → Mekong-Navy dark palette
 *
 * The semantic variable NAMES are stable across both modes so every component
 * stylesheet works in either theme. Do not introduce colors/fonts outside this file.
 *
 * Brand source palette (PDF design-system board):
 *   Mekong Navy #102A43 · Jungle Green #2F5D50 · Temple Gold #B8893E
 *   Sunset Clay #C46A3A · Warm Sand #F5E9D3 · Soft White #FAF8F3 · Charcoal #1F2933
 */

:root {
	/* ---- Type (shared across modes) ---- */
	--serif:  "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
	--body:   "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono:   "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* labels/eyebrows (uppercase, tracked) */
	--coord:  ui-monospace, "DM Mono", SFMono-Regular, Menlo, monospace;           /* coordinate flourishes */
	--script: "Caveat", ui-rounded, cursive;                                       /* founder signature only */

	--font-display: var(--serif);
	--font-body:    var(--body);
	--font-mono:    var(--mono);
	--font-script:  var(--script);

	/* ---- Brand constants (mode-independent reference) ---- */
	--c-navy:   #102A43;
	--c-navy-2: #0B1E30;
	--c-green:  #2F5D50;
	--c-gold:   #B8893E;
	--c-clay:   #C46A3A;
	--c-sand:   #F5E9D3;
	--c-white:  #FAF8F3;
	--c-char:   #1F2933;

	/* ---- Layout / motion (shared; --display-scale/--section-pad/--body-base are
	       overridable from Theme Options via inc/dynamic-css.php) ---- */
	--max:  1240px;
	--wrap: 1240px;
	--ease: cubic-bezier(.22, .61, .36, 1);
	--radius: 4px;
	--display-scale: 1;
	--section-pad: 100px;
	--body-base: 17px;

	/* Button text on gold/green fills — recomputed AA-safe per accent by inc/dynamic-css.php. */
	--on-gold: #1F2933;
	--on-green: #FFFFFF;

	/* ===========================================================
	 * LIGHT MODE (default) — PDF warm editorial
	 * =========================================================== */
	--bg:        #FAF8F3;  /* Soft White — page */
	--bg-raise:  #F3EBDC;  /* Warm Sand band */
	--bg-card:   #FFFFFF;  /* card surface */
	--bg-sand:   #F5E9D3;  /* deeper sand accent */

	/* Navy "dark sections" that sit inside a light page (hero, CTA, footer) */
	--surface-dark:    #102A43;
	--surface-dark-2:  #0B1E30;

	--ink:        #1F2933;  /* Charcoal — primary text */
	--ink-soft:   #4A5560;  /* secondary text */
	--ink-muted:  #6A6555;  /* tertiary / meta (AA ≥4.5:1 on Soft White) */

	/* Text that always sits on a dark/navy surface (both modes) */
	--on-dark:        #F4ECDD;
	--on-dark-soft:   rgba(244, 236, 221, .74);
	--on-dark-muted:  rgba(244, 236, 221, .50);

	--gold:        #B8893E;  /* Temple Gold — accent / borders / button fill (use dark text on it) */
	--gold-soft:   #CDA464;  /* gold on dark/navy surfaces */
	--gold-deep:   #9C7330;
	--gold-ink:    #836328;  /* gold as SMALL text on light (AA ≥4.5:1 on white + sand) */
	--gold-accent: #A87A2A;  /* gold as LARGE display text / em accents on light (≥3:1) */
	--green:       #2F5D50;  /* Jungle Green */
	--green-bright:#3C7565;
	--clay:        #C46A3A;  /* Sunset Clay */

	--rule:        rgba(31, 41, 51, .12);
	--rule-s:      rgba(31, 41, 51, .18);
	--rule-strong: rgba(31, 41, 51, .26);

	/* rules used on dark/navy surfaces */
	--rule-on-dark:        rgba(244, 236, 221, .14);
	--rule-on-dark-strong: rgba(244, 236, 221, .26);

	--shadow-card: 0 1px 2px rgba(16, 42, 67, .04), 0 12px 32px -16px rgba(16, 42, 67, .18);
	--shadow-float: 0 24px 60px -24px rgba(16, 42, 67, .35);

	--grain-opacity: .25;
	color-scheme: light;
}

/* ===============================================================
 * DARK MODE — Mekong Navy (carries the prior dark editorial mood)
 * =============================================================== */
[data-theme="dark"] {
	--bg:        #0B1E30;  /* deep navy — page */
	--bg-raise:  #102A43;  /* Mekong Navy band */
	--bg-card:   #16344F;  /* raised card */
	--bg-sand:   #16344F;

	--surface-dark:    #081826;
	--surface-dark-2:  #050F19;

	--ink:        #EDE6D3;  /* warm cream — primary text */
	--ink-soft:   #B7BCC2;
	--ink-muted:  #8A95A2;  /* AA ≥4.5:1 on the navy band + page in dark mode */

	--on-dark:        #F4ECDD;
	--on-dark-soft:   rgba(244, 236, 221, .74);
	--on-dark-muted:  rgba(244, 236, 221, .50);

	--gold:        #CDA464;  /* lift gold for contrast on navy */
	--gold-soft:   #E2C188;
	--gold-deep:   #B8893E;
	--gold-ink:    #CDA464;  /* gold text reads fine on dark navy */
	--gold-accent: #E2C188;
	--green:       #3C7565;
	--green-bright:#4C8B78;
	--clay:        #D07C4C;

	--rule:        rgba(237, 230, 211, .12);
	--rule-s:      rgba(237, 230, 211, .18);
	--rule-strong: rgba(237, 230, 211, .24);

	--rule-on-dark:        rgba(244, 236, 221, .12);
	--rule-on-dark-strong: rgba(244, 236, 221, .24);

	--shadow-card: 0 1px 2px rgba(0, 0, 0, .25), 0 14px 34px -18px rgba(0, 0, 0, .6);
	--shadow-float: 0 26px 64px -22px rgba(0, 0, 0, .7);

	--grain-opacity: .35;
	color-scheme: dark;
}