/*
 * CADchat design tokens
 *
 * All theme colors, spacing, type scale, and motion live as CSS custom properties
 * on :root. Patterns and globals consume them — never re-declare a value.
 *
 * Sources:
 *   - Prototype landing-preview.html and related files (#9346CF purple as primary)
 *   - WCAG AA contrast verified for all text/bg pairs
 *   - Type scale uses clamp() for fluid scaling between mobile and desktop
 *
 * Override pattern: if a section needs a different palette (e.g. a dark CTA banner),
 * declare a scoped --cc-color-text-primary inside that pattern's container, not here.
 */

:root {
	/* === Brand ===
	 * TWO source colors drive the whole palette: brand purple + action blue.
	 * Both are user-overridable from the WP admin: Appearance > Customize >
	 * CADchat Branding > Brand Colors injects new --cc-color-brand-primary /
	 * --cc-color-action values into :root. Every shade, tint, gradient stop,
	 * border, and rgba overlay across the theme DERIVES from these two via
	 * color-mix()/relative-color, so changing either source recolors the
	 * entire site consistently. Do not hardcode brand hexes in pattern CSS —
	 * use these tokens (or rgb(from var(--cc-color-brand-primary) r g b / a)). */
	--cc-color-brand-primary:       #9346CF;
	--cc-color-brand-primary-deep:  color-mix(in srgb, var(--cc-color-brand-primary) 58%, #000000);
	--cc-color-brand-primary-tint:  color-mix(in srgb, var(--cc-color-brand-primary) 18%, #ffffff);
	--cc-color-brand-primary-fade:  color-mix(in srgb, var(--cc-color-brand-primary) 8%,  #ffffff);

	--cc-color-action:              #0072BA;
	--cc-color-action-deep:         color-mix(in srgb, var(--cc-color-action) 79%, #000000);

	/* Brand secondary — alias for backward-compat; same as --cc-color-action. */
	--cc-color-brand-secondary:     var(--cc-color-action);

	/* === Neutrals === */
	--cc-color-text-primary:        #0F0F0F;
	--cc-color-text-heading:        #1A1A2E;
	--cc-color-text-muted:          #52525B;
	--cc-color-text-on-dark:        #FFFFFF;

	--cc-color-bg-page:             #FAFAFA;
	--cc-color-bg-section:          #FFFFFF;
	--cc-color-bg-section-alt:      #F8F8FA;
	--cc-color-bg-section-alt2:     #F4F4F5;

	--cc-color-border-subtle:       #E4E4E7;
	--cc-color-border-medium:       #EBEBEB;
	--cc-color-border-purple:       #EDE4F7;

	/* === Spacing scale (rem-based, 4px = 0.25rem) === */
	--cc-space-1:                   0.25rem;
	--cc-space-2:                   0.5rem;
	--cc-space-3:                   0.75rem;
	--cc-space-4:                   1rem;
	--cc-space-5:                   1.25rem;
	--cc-space-6:                   1.5rem;
	--cc-space-7:                   1.75rem;
	--cc-space-8:                   2rem;
	--cc-space-10:                  2.5rem;
	--cc-space-12:                  3rem;
	--cc-space-16:                  4rem;
	--cc-space-20:                  5rem;
	--cc-space-24:                  6rem;

	/* === Section padding (matched to prototype: 100px 24px desktop / 64px 16px mobile) === */
	--cc-section-pad-y-mobile:      4rem;     /* 64px */
	--cc-section-pad-y-desktop:     6.25rem;  /* 100px */
	--cc-section-pad-x-mobile:      1rem;     /* 16px */
	--cc-section-pad-x-desktop:     1.5rem;   /* 24px */

	/* === Containers === */
	--cc-container-max:             1200px;
	--cc-container-narrow:          820px;
	--cc-container-prose:           680px;

	/* === Type scale (fluid; matched to prototype clamp values) === */
	--cc-type-h1:                   clamp(2.6rem, 6vw, 4.6rem);
	--cc-type-h2:                   clamp(1.8rem, 3.5vw, 2.8rem);
	--cc-type-h3:                   clamp(1.6rem, 3vw, 2.4rem);
	--cc-type-h4:                   clamp(1.2rem, 2.4vw, 1.7rem);
	--cc-type-h5:                   1rem;
	--cc-type-body:                 clamp(1rem, 1.6vw, 1.15rem);
	--cc-type-small:                0.875rem;
	--cc-type-eyebrow:              0.6875rem;  /* 11px — DM Mono in .cc-eyebrow */

	/* === Type weights === */
	--cc-fw-regular:                400;
	--cc-fw-medium:                 500;
	--cc-fw-semibold:               600;
	--cc-fw-bold:                   700;
	--cc-fw-black:                  900;

	/* === Line heights === */
	--cc-lh-tight:                  1.04;
	--cc-lh-snug:                   1.15;
	--cc-lh-normal:                 1.5;
	--cc-lh-relaxed:                1.625;

	/* === Letter spacing (tighter for big headings, looser for eyebrows) === */
	--cc-ls-h1:                     -0.04em;
	--cc-ls-h2:                     -0.035em;
	--cc-ls-h3:                     -0.03em;
	--cc-ls-eyebrow:                0.20em;

	/* === Radii === */
	--cc-radius-sm:                 4px;
	--cc-radius-md:                 8px;
	--cc-radius-lg:                 16px;
	--cc-radius-pill:               9999px;

	/* === Shadows === */
	--cc-shadow-sm:                 0 1px 3px rgba(0, 0, 0, 0.05);
	--cc-shadow-md:                 0 4px 16px rgba(0, 0, 0, 0.06);
	--cc-shadow-lg:                 0 8px 40px rgb(from var(--cc-color-brand-primary) r g b / 0.12);

	/* === Motion === */
	--cc-easing-standard:           cubic-bezier(0.2, 0, 0, 1);
	--cc-easing-emphasis:           cubic-bezier(0.4, 0, 0.2, 1);
	--cc-duration-fast:             150ms;
	--cc-duration-base:             250ms;
	--cc-duration-slow:             400ms;

	/* === Z-index scale === */
	--cc-z-banner:                  90;
	--cc-z-header:                  100;
	--cc-z-drawer:                  120;
	--cc-z-modal-mask:              500;
	--cc-z-modal:                   510;

	/* === Font stacks === */
	--cc-font-body:                 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--cc-font-mono:                 'DM Mono', 'SF Mono', Menlo, Consolas, monospace;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--cc-duration-fast:  0ms;
		--cc-duration-base:  0ms;
		--cc-duration-slow:  0ms;
	}
}