/*
 * Design tokens derived from the Trisilco hexagon mark: a purple → indigo → teal
 * gradient stroke/mark with a solid purple wordmark. Swap the hex values below
 * to retune the whole theme — nothing else in the CSS hardcodes a color.
 *
 * Breakpoints used throughout the theme (kept here as a comment since CSS
 * custom properties can't be used inside @media queries):
 *   --bp-sm: 480px   (large phones)
 *   --bp-md: 768px   (tablets — bottom nav switches off above this)
 *   --bp-lg: 1024px  (small laptops)
 *   --bp-xl: 1280px  (desktop max content width)
 */

:root {
	/* Brand — purple family (from the wordmark + gradient start) */
	--tc-purple-900: #3E1856;
	--tc-purple-700: #5B2470;
	--tc-purple-500: #8A3B93; /* primary brand color — matches wordmark */
	--tc-purple-300: #C08FCB;
	--tc-purple-100: #F1E6F4;

	/* Brand — indigo (gradient midpoint) */
	--tc-indigo-500: #4E4FA0;
	--tc-indigo-300: #A8A9D6;

	/* Brand — teal family (gradient end / accent) */
	--tc-teal-600: #157E82;
	--tc-teal-400: #22ABA3;
	--tc-teal-300: #4FC3BE;
	--tc-teal-100: #DFF5F3;

	/* Brand gradient, matching the hexagon mark's diagonal */
	--tc-gradient-brand: linear-gradient(135deg, var(--tc-purple-700) 0%, var(--tc-indigo-500) 52%, var(--tc-teal-400) 100%);
	--tc-gradient-brand-soft: linear-gradient(135deg, var(--tc-purple-100) 0%, #EFEFF8 52%, var(--tc-teal-100) 100%);

	/* Neutrals — purple-tinted so grays feel related to the brand */
	--tc-ink-900: #211A2C;
	--tc-ink-700: #423A54;
	--tc-ink-500: #6B6380;
	--tc-ink-300: #A8A0BC;
	--tc-ink-150: #D8D3E4;
	--tc-ink-100: #E7E3F0;
	--tc-ink-50: #F5F3FA;
	--tc-white: #FFFFFF;

	/* Semantic */
	--tc-success: #1E9E6C;
	--tc-success-bg: #E4F7EF;
	--tc-warning: #C98A00;
	--tc-warning-bg: #FBF0DA;
	--tc-danger: #D14559;
	--tc-danger-bg: #FBE7EA;
	--tc-info: var(--tc-indigo-500);
	--tc-info-bg: #EBEBF7;

	/* Surfaces */
	--tc-bg: var(--tc-ink-50);
	--tc-surface: var(--tc-white);
	--tc-surface-raised: var(--tc-white);
	--tc-border: var(--tc-ink-100);

	/* Typography */
	--tc-font-body: 'Saira', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--tc-font-heading: 'Saira Condensed', 'Saira', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	/* Spacing scale */
	--tc-space-1: 4px;
	--tc-space-2: 8px;
	--tc-space-3: 12px;
	--tc-space-4: 16px;
	--tc-space-5: 24px;
	--tc-space-6: 32px;
	--tc-space-7: 48px;
	--tc-space-8: 64px;
	--tc-space-9: 96px;

	/* Radii */
	--tc-radius-sm: 6px;
	--tc-radius-md: 10px;
	--tc-radius-lg: 16px;
	--tc-radius-pill: 999px;

	/* Shadows */
	--tc-shadow-sm: 0 1px 2px rgba(33, 26, 44, 0.06), 0 1px 3px rgba(33, 26, 44, 0.08);
	--tc-shadow-md: 0 4px 10px rgba(33, 26, 44, 0.08), 0 2px 4px rgba(33, 26, 44, 0.06);
	--tc-shadow-lg: 0 16px 32px rgba(33, 26, 44, 0.14);
	--tc-shadow-focus: 0 0 0 3px rgba(138, 59, 147, 0.35);

	/* Layout */
	--tc-container-max: 1280px;
	--tc-header-height: 76px;
	--tc-header-height-scrolled: 60px;
	--tc-bottom-nav-height: 64px;

	/* Fixed logo box — identical at every header state (normal/scrolled), so
	   a very large uploaded logo file can never blow out the header layout.
	   This is the base/tablet size; layout.css bumps it larger at the
	   desktop breakpoint and mobile-nav.css shrinks it on phones. */
	--tc-logo-box-width: 160px;
	--tc-logo-box-height: 40px;

	/* Footer/login logo boxes (see trisilco_render_logo_variant()) — same
	   base/desktop-larger pattern as the header logo box above. */
	--tc-footer-logo-height: 32px;
	--tc-login-logo-height: 56px;

	/* General footer body text (copyright line, footer menu links, any
	   widget content) — kept separate from --tc-ink-150 (used globally
	   elsewhere) so it can be overridden just for the footer from
	   Appearance → Customize → Footer without affecting anything else. */
	--tc-footer-text-color: #D8D3E4;

	/* Motion */
	--tc-transition-fast: 150ms ease;
	--tc-transition-base: 220ms ease;

	/* Z-index scale */
	--tc-z-header: 100;
	--tc-z-bottom-nav: 100;
	--tc-z-overlay: 200;
	--tc-z-modal: 300;
}