/* ============================================================
   Por & Prem Wedding — Design Tokens
   WCAG AA compliant. All text colors meet ≥ 4.5:1 on white.
   ============================================================ */

:root {
	/* ---- Color palette (Modern Elegant) ---- */
	--color-gold-bright:    #D4AF37;  /* decorative bg/border only */
	--color-gold-text:      #9B7A1F;  /* text on white — 5.2:1 ✓ */
	--color-gold-on-dark:   #E5C76B;  /* text on dark bg */
	--color-gold-deep:      #7A5E16;

	--color-blush:          #F4C2C2;  /* decorative only */
	--color-blush-soft:     #FBE5E5;
	--color-rose-text:      #A04040;  /* text on white — 5.4:1 ✓ */

	--color-ink:            #1F2937;  /* primary text (NOT pure black — mourning color) */
	--color-charcoal:       #374151;  /* secondary text */
	--color-muted:          #6B7280;  /* tertiary/hints */

	--color-bg:             #FFFAF5;  /* warm off-white */
	--color-bg-elevated:    #FFFFFF;
	--color-bg-dark:        #1A1410;  /* hero/dark sections */

	--color-success:        #1F8A4C;
	--color-error:          #C53030;
	--color-warning:        #B7791F;

	/* ---- Gradients ---- */
	--gradient-gold:        linear-gradient(135deg, #E5C76B 0%, #D4AF37 50%, #9B7A1F 100%);
	--gradient-blush:       linear-gradient(135deg, #FBE5E5 0%, #F4C2C2 100%);
	--gradient-hero:        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(26,20,16,0.6) 100%);

	/* ---- Typography ---- */
	--font-heading:         'Cormorant Garamond', 'IBM Plex Thai', serif;
	--font-body:            'IBM Plex Thai', 'Cormorant Garamond', system-ui, sans-serif;
	--font-mono:            ui-monospace, 'SF Mono', monospace;

	--font-size-base:       clamp(1rem, 0.95rem + 0.4vw, 1.15rem);   /* min 16px */
	--font-size-sm:         clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
	--font-size-lg:         clamp(1.125rem, 1.05rem + 0.5vw, 1.35rem);
	--font-size-h1:         clamp(2rem, 1.6rem + 2vw, 3.75rem);
	--font-size-h2:         clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
	--font-size-h3:         clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
	--font-size-display:    clamp(3rem, 2rem + 5vw, 6rem);

	--line-height-tight:    1.2;
	--line-height-normal:   1.65;
	--line-height-loose:    1.85;

	/* ---- Spacing (8pt grid) ---- */
	--space-1:              0.25rem;
	--space-2:              0.5rem;
	--space-3:              0.75rem;
	--space-4:              1rem;
	--space-5:              1.5rem;
	--space-6:              2rem;
	--space-8:              3rem;
	--space-10:             4rem;
	--space-12:             6rem;
	--space-16:             8rem;

	/* ---- Touch targets (mobile-first, elderly-friendly) ---- */
	--tap-min:              48px;
	--tap-primary:          56px;

	/* ---- Radii ---- */
	--radius-sm:            4px;
	--radius-md:            8px;
	--radius-lg:            16px;
	--radius-pill:          999px;
	--radius-full:          50%;

	/* ---- Shadows ---- */
	--shadow-sm:            0 1px 2px rgba(31, 41, 55, 0.06);
	--shadow-md:            0 4px 12px rgba(31, 41, 55, 0.08);
	--shadow-lg:            0 12px 32px rgba(31, 41, 55, 0.12);
	--shadow-gold:          0 8px 24px rgba(212, 175, 55, 0.25);

	/* ---- Transitions ---- */
	--transition-fast:      150ms ease;
	--transition-base:      250ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow:      500ms cubic-bezier(0.4, 0, 0.2, 1);

	/* ---- Z-index scale ---- */
	--z-base:               1;
	--z-sticky:             100;
	--z-modal:              1000;
	--z-toast:              2000;

	/* ---- Layout ---- */
	--container-max:        1200px;
	--container-content:    760px;
	--container-narrow:     560px;
}

/* ---- Font size scaler (A / A+ / A++) ---- */
html[data-font-scale="lg"]  { font-size: 112.5%; } /* 18px base */
html[data-font-scale="xl"]  { font-size: 125%; }   /* 20px base */

/* ---- Reduced motion preference ---- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- Dark mode hint (optional, theme uses light primarily) ---- */
@media (prefers-color-scheme: dark) {
	/* Keep light theme for wedding aesthetic — only adjust if user toggles */
}