/*
 * REACH Supply storefront design tokens
 *
 * Canonical visual values shared by ReachSupply.ca and ReachSupplyCo.com.
 * Components must consume these values instead of introducing page-specific
 * colours, spacing scales, radii, shadows, or control dimensions.
 *
 * Authoritative documentation: docs/REACH-DESIGN-SYSTEM.md
 */

:root {
	/* Brand and neutral colours */
	--rs-color-page: #f6f5f2;
	--rs-color-surface: #ffffff;
	--rs-color-surface-soft: #faf9f7;
	--rs-color-surface-hover: #f3f1ed;
	--rs-color-disabled: #eef0f2;
	--rs-color-ink: #1b2a38;
	--rs-color-ink-hover: #111f2b;
	--rs-color-muted: #5d6872;
	--rs-color-subtle: #667078;
	--rs-color-border: #dfe3e6;
	--rs-color-border-strong: #b9c0c5;
	--rs-color-gold: #e2a63c;
	--rs-color-gold-hover: #c9902f;
	--rs-color-focus: #3a5a73;

	/* Semantic colours: use only for genuine interface states */
	--rs-color-error: #a33a3a;
	--rs-color-error-soft: #fff4f3;
	--rs-color-success: #3f6f52;
	--rs-color-success-soft: #f2f8f4;
	--rs-color-warning: #8a5a18;
	--rs-color-warning-soft: #fff8e8;
	--rs-color-info: #3a5a73;
	--rs-color-info-soft: #f3f7fa;

	/* On-colour text */
	--rs-color-on-ink: #ffffff;
	--rs-color-on-gold: #1b2a38;

	/* Spacing scale */
	--rs-space-0: 0;
	--rs-space-1: 0.25rem;  /* 4px */
	--rs-space-2: 0.5rem;   /* 8px */
	--rs-space-3: 0.75rem;  /* 12px */
	--rs-space-4: 1rem;     /* 16px */
	--rs-space-5: 1.5rem;   /* 24px */
	--rs-space-6: 2rem;     /* 32px */
	--rs-space-7: 3rem;     /* 48px */
	--rs-space-8: 4rem;     /* 64px */
	--rs-space-9: 5rem;     /* 80px */

	/* Responsive section and page gutters */
	--rs-page-gutter: clamp(1rem, 3vw, 2rem);
	--rs-section-space: clamp(2.5rem, 6vw, 4rem);
	--rs-component-space: clamp(1.25rem, 3vw, 2rem);

	/* Typography */
	--rs-font-family-sans: inherit;
	--rs-font-size-xs: 0.75rem;
	--rs-font-size-sm: 0.875rem;
	--rs-font-size-base: 1rem;
	--rs-font-size-lg: 1.125rem;
	--rs-font-size-xl: 1.25rem;
	--rs-font-size-card-title: clamp(1.125rem, 2vw, 1.375rem);
	--rs-font-size-section-title: clamp(1.5rem, 3vw, 2.25rem);
	--rs-font-size-page-title: clamp(2rem, 4vw, 3rem);
	--rs-line-height-tight: 1.2;
	--rs-line-height-heading: 1.3;
	--rs-line-height-body: 1.6;
	--rs-font-weight-regular: 400;
	--rs-font-weight-medium: 500;
	--rs-font-weight-semibold: 600;
	--rs-font-weight-bold: 700;

	/* Borders and radii */
	--rs-border-width: 1px;
	--rs-border-default: var(--rs-border-width) solid var(--rs-color-border);
	--rs-border-strong: var(--rs-border-width) solid var(--rs-color-border-strong);
	--rs-radius-sm: 0.5rem;   /* 8px */
	--rs-radius-md: 0.75rem;  /* 12px */
	--rs-radius-lg: 1rem;     /* 16px */
	--rs-radius-pill: 999px;

	/* Shadows */
	--rs-shadow-xs: 0 1px 2px rgb(27 42 56 / 5%);
	--rs-shadow-sm: 0 6px 18px rgb(27 42 56 / 7%);
	--rs-shadow-md: 0 12px 32px rgb(27 42 56 / 9%);

	/* Focus and interaction */
	--rs-focus-ring: 0 0 0 3px rgb(58 90 115 / 20%);
	--rs-transition-fast: 140ms ease;
	--rs-transition-base: 200ms ease;

	/* Sizing */
	--rs-control-height-sm: 2.5rem;   /* 40px */
	--rs-control-height: 3rem;        /* 48px */
	--rs-touch-target-min: 2.75rem;   /* 44px */
	--rs-container-width: 80rem;      /* 1280px */
	--rs-content-width: 52rem;        /* 832px */
	--rs-form-width: 61.25rem;        /* 980px */

	/* Layering */
	--rs-z-dropdown: 100;
	--rs-z-sticky: 200;
	--rs-z-overlay: 900;
	--rs-z-modal: 1000;
	--rs-z-toast: 1100;
}