/*
 * Equine Exceed — Design tokens.
 *
 * Single source of truth for colours, spacing, typography, radii, shadows.
 * Every block stylesheet must reference these tokens — never hard-code a hex.
 * Mirrors DESIGN.md §6.
 */

:root {
	/* Brand palette */
	--eqx-brand-dark:     #100C55;   /* deep brand blue — hero bg, CTAs on light */
	--eqx-brand-dark-rgb: 16, 12, 85; /* same colour as RGB triplet — for rgba() in gradients */
	--eqx-brand-accent:   #3C9E9B;   /* teal — primary CTAs, eyebrows, highlights, active nav */
	--eqx-brand-accent-dk:#2d7c7a;   /* teal — hover/darker variant */
	--eqx-brand-accent-rgb: 60, 158, 155; /* teal as rgb triplet — for focus rings */
	/* Convenience aliases so hero/header CSS that named teal explicitly still resolves. */
	--eqx-brand-teal:     var(--eqx-brand-accent);
	--eqx-brand-teal-dk:  var(--eqx-brand-accent-dk);
	--eqx-brand-light:    #f5f5f0;   /* off-white — section backgrounds */
	--eqx-warm-white:    #ffffff;
	--eqx-text-primary:  #1a1a1a;
	--eqx-text-muted:    #6b7280;
	--eqx-text-light:    #9ca3af;
	--eqx-border:        #e5e7eb;
	--eqx-border-dark:   rgba(255,255,255,0.18);

	/* Notice tints */
	--eqx-info-bg:    #f3f4f6;
	--eqx-info-fg:    #1f2937;
	--eqx-success-bg: #ecfdf5;
	--eqx-success-fg: #065f46;

	/* Spacing scale (8px base grid) */
	--spacing-xs:  8px;
	--spacing-sm:  16px;
	--spacing-md:  24px;
	--spacing-lg:  40px;
	--spacing-xl:  64px;
	--spacing-2xl: 96px;

	/* Radii */
	--radius-card:    8px;
	--radius-button:  4px;
	--radius-image:   2px;
	--radius-pill:  999px;

	/* Type ramp — fluid */
	--font-display: clamp(2.25rem, 5.5vw, 4rem);
	--font-h1:      clamp(1.875rem, 4vw, 3rem);
	--font-h2:      clamp(1.5rem, 3vw, 2.25rem);
	--font-h3:      1.375rem;
	--font-body:    1rem;
	--font-small:   0.875rem;

	--lh-tight:  1.15;
	--lh-normal: 1.6;

	/* Font stacks — Inter is used for both display and body. */
	--ff-display: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ff-body:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* Layout */
	--container-max: 1200px;
	--mw-narrow:      640px;
	--mw-prose:       780px;
	--mw-standard:    900px;
	--mw-wide:       1100px;

	/* Effects */
	--shadow-card:    0 1px 2px rgba(var(--eqx-brand-dark-rgb), 0.06), 0 4px 12px rgba(var(--eqx-brand-dark-rgb), 0.06);
	--shadow-overlay: 0 6px 24px rgba(var(--eqx-brand-dark-rgb), 0.18);
	--transition-base: 200ms ease-out;

	/* Header sizes */
	--header-h:       88px;
	--announcement-h: 38px;
	--z-header:        100;
	--z-mobile-nav:    200;
	--z-modal:        1000;
}

@media (max-width: 768px) {
	:root {
		--header-h: 64px;
	}
}