/*
 * Dixit design tokens — light, gradient-led palette (after tomoro-sugawara.studio.site).
 * No black or dark surfaces anywhere: depth comes from gradients, glass and hairlines.
 * Contrast ratios are WCAG 2.x against the lightest/darkest background each token sits on.
 *
 * Rules that matter:
 *  - --sage (#7C9083) is 2.97:1 on cream: lines, dots and fills only, never text.
 *  - --muted passes on cream/mint/white (4.65:1+) but NOT on sage panels (3.78–4.44:1);
 *    secondary text inside .dx-panel--sage uses --text instead.
 */
:root {
	/* ---- Palette ---- */
	--cream:       #F2F0E3;
	--mint:        #ECF2EC;
	--butter:      #E8E5BF;
	--sage-wash:   #E3EADF;
	--sage-panel:  #D5E0CF;
	--sage-deep-panel: #C9D6C4;
	--sage:        #7C9083;  /* decorative only */
	--white:       #FFFFFF;

	--ink:         #1F2D25;  /* headings  12.56:1 on cream, 9.52:1 on sage panel */
	--text:        #33423A;  /* body       9.26:1 on cream, 7.02:1 on sage panel */
	--muted:       #5B6A61;  /* meta       4.99:1 on cream, 4.65:1 on sage-wash */
	--forest:      #355240;  /* links/UI   7.54:1 on cream, 5.71:1 on sage panel */
	--forest-deep: #234E35;  /*            8.29:1 on cream */
	--forest-grey: #4E5752;

	/* ---- Gradients ---- */
	--grad-page:   linear-gradient(135deg, var(--cream) 0%, var(--mint) 100%);
	--grad-button: linear-gradient(135deg, var(--forest-deep) 0%, var(--forest-grey) 100%); /* white text 7.48–9.49:1 */
	--grad-panel:  linear-gradient(135deg, #E9EDDD 0%, var(--sage-panel) 55%, #DDE5DA 100%);
	--grad-mist:
		radial-gradient(60% 70% at 18% 30%, rgba(232, 229, 191, 0.85) 0%, transparent 70%),
		radial-gradient(55% 65% at 82% 18%, rgba(185, 202, 184, 0.75) 0%, transparent 70%),
		radial-gradient(70% 60% at 60% 95%, rgba(214, 226, 211, 0.9) 0%, transparent 70%);

	/* ---- Semantic ---- */
	--bg:            var(--cream);
	--surface:       rgba(255, 255, 255, 0.62);
	--surface-solid: #FBFBF6;
	--rule:          rgba(124, 144, 131, 0.28);
	--rule-strong:   rgba(124, 144, 131, 0.5);
	--text-strong:   var(--ink);
	--text-muted:    var(--muted);
	--accent:        var(--forest);
	--accent-strong: var(--forest-deep);
	--on-accent:     #FFFFFF;
	--header-glass:  rgba(251, 251, 246, 0.72);
	--shadow:        0 1px 2px rgba(35, 78, 53, 0.06), 0 10px 30px rgba(35, 78, 53, 0.08);
	--shadow-lift:   0 2px 4px rgba(35, 78, 53, 0.06), 0 18px 40px rgba(35, 78, 53, 0.12);

	/* ---- Type ---- */
	--font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
	--step-0:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.15rem);
	--step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
	--step-2:  clamp(1.65rem, 1.45rem + 1vw, 2.3rem);
	--step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.4rem);
	--step-4:  clamp(2.6rem, 1.8rem + 4.2vw, 5.4rem);

	/* ---- Space & shape ---- */
	--radius:    3px;
	--gutter:    clamp(16px, 4vw, 40px);
	--section-y: clamp(56px, 8vw, 112px);
	--max:       1200px;
	--dx-header-h: 60px;
	--ease:      cubic-bezier(0.2, 0.7, 0.2, 1);

	color-scheme: light;
}