/* ==========================================================================
   Design tokens — change brand values HERE and they cascade site-wide.
   The Dental Ethics · brand: navy #0B2C4D · gold #C9AA74 · white.
   ========================================================================== */
:root {
	/* Brand palette (extracted from the logo) */
	--tde-navy:        #0B2C4D;
	--tde-navy-700:    #0E3A66;
	--tde-navy-600:    #14497f;
	--tde-gold:        #C9AA74;
	--tde-gold-bright: #D9BD86;
	--tde-gold-deep:   #B2935C;
	--tde-ink:         #16202B;
	--tde-white:       #ffffff;

	/* Neutrals */
	--tde-bg:          #ffffff;
	--tde-bg-alt:      #F7F5F0;   /* warm off-white that flatters the gold */
	--tde-bg-navy:     var(--tde-navy);
	--tde-line:        #E7E3DA;
	--tde-muted:       #5B6975;
	--tde-text:        #243240;

	/* Typography */
	/* System-font stack: zero external requests, instant render. To use a custom
	   webfont later, add @font-face in main.css and prepend its name here. */
	--tde-font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tde-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tde-fs-base: 1.0625rem;       /* 17px */
	--tde-lh-base: 1.7;

	/* Spacing scale */
	--tde-space-1: .25rem;
	--tde-space-2: .5rem;
	--tde-space-3: .75rem;
	--tde-space-4: 1rem;
	--tde-space-5: 1.5rem;
	--tde-space-6: 2rem;
	--tde-space-7: 3rem;
	--tde-space-8: 4rem;
	--tde-section-y: clamp(3.5rem, 7vw, 6.5rem);

	/* Layout */
	--tde-container: 1400px;
	--tde-container-narrow: 880px;
	--tde-radius: 14px;
	--tde-radius-sm: 9px;
	--tde-radius-lg: 24px;

	/* Effects */
	--tde-shadow-sm: 0 2px 8px rgba(11,44,77,.06);
	--tde-shadow:    0 10px 30px rgba(11,44,77,.10);
	--tde-shadow-lg: 0 24px 60px rgba(11,44,77,.16);
	--tde-ring: 0 0 0 3px rgba(201,170,116,.35);
	--tde-transition: .25s cubic-bezier(.4,0,.2,1);

	/* Header */
	--tde-header-h: 92px;
	--tde-header-h-mobile: 76px;
}