/* =============================================================================
   Trustvane — design tokens (:root)
   Path: C:\NewPD\Peak\Peak\Trustvane.Web\Content\Brand\trustvane-tokens.css

   Load AFTER Bootstrap 5.3.8 so the --bs-* overrides at the bottom win.
   Mobile-first: type sizes are fluid via clamp(); base scale targets small
   viewports and grows with the viewport. No component styles here — tokens only.
   ============================================================================= */

:root {
	/* ---- Brand color primitives (from the weathervane "V" mark) ---- */
	--tv-indigo: #2740A6; /* gradient start (left arm)        */
	--tv-blue: #3E74F0; /* primary brand blue               */
	--tv-teal: #0EA5A4; /* central spine                    */
	--tv-teal-bright: #16BBA8;
	--tv-emerald: #10B981; /* right arm / success              */
	--tv-emerald-deep: #0F9D58;
	--tv-gold: #F3B72E; /* arrow tip / accent (use sparing) */
	--tv-gold-light: #F8D264;
	--tv-gold-deep: #D98814;
	/* ---- Anchors / dark surfaces ---- */
	--tv-indigo-anchor: #1B1F3B; /* dark background / headings       */
	--tv-indigo-wordmark: #1B2440; /* wordmark "Trust"                 */
	--tv-navy-ring: #1E2B57; /* badge ring                       */
	/* ---- Neutrals ---- */
	--tv-ink: #0F172A; /* body text                        */
	--tv-muted: #64748B; /* secondary text                   */
	--tv-surface: #FFFFFF; /* cards / raised surfaces          */
	--tv-surface-alt: #F8FAFC; /* page background                  */
	--tv-border: #E2E8F0; /* hairlines / dividers             */
	/* ---- Signature gradients (mark = blue -> teal -> emerald) ---- */
	--tv-gradient-brand: linear-gradient(90deg, var(--tv-blue) 0%, var(--tv-teal) 52%, var(--tv-emerald) 100%);
	--tv-gradient-vane: linear-gradient(90deg, var(--tv-teal) 0%, var(--tv-emerald) 100%);
	--tv-gradient-dark: linear-gradient(160deg, var(--tv-indigo-anchor) 0%, var(--tv-navy-ring) 100%);
	/* ---- Semantic roles ---- */
	--tv-color-primary: var(--tv-blue);
	--tv-color-secondary: var(--tv-teal);
	--tv-color-success: var(--tv-emerald);
	--tv-color-accent: var(--tv-gold);
	--tv-color-heading: var(--tv-indigo-anchor);
	--tv-color-text: var(--tv-ink);
	--tv-color-text-muted: var(--tv-muted);
	--tv-color-bg: var(--tv-surface-alt);
	--tv-color-link: var(--tv-blue);
	--tv-color-link-hover: var(--tv-indigo);
	/* ---- Typography ---- */
	--tv-font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tv-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--tv-weight-heading: 600;
	--tv-weight-body: 400;
	--tv-weight-medium: 500;
	--tv-weight-bold: 700;
	--tv-leading-tight: 1.15;
	--tv-leading-body: 1.6;
	--tv-tracking-tight: -0.01em;
	/* Fluid type scale (mobile-first: min at ~360px, max at ~1200px) */
	--tv-text-xs: 0.78rem;
	--tv-text-sm: 0.875rem;
	--tv-text-base: 1rem;
	--tv-text-lg: clamp(1.06rem, 1.0rem + 0.3vw, 1.20rem);
	--tv-text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
	--tv-text-2xl: clamp(1.55rem, 1.3rem + 1.2vw, 2.10rem);
	--tv-text-3xl: clamp(1.95rem, 1.5rem + 2.1vw, 3.00rem);
	--tv-text-hero: clamp(2.35rem, 1.7rem + 3.2vw, 3.90rem);
	/* ---- Spacing scale (4px base) ---- */
	--tv-space-1: 0.25rem;
	--tv-space-2: 0.5rem;
	--tv-space-3: 0.75rem;
	--tv-space-4: 1rem;
	--tv-space-5: 1.5rem;
	--tv-space-6: 2rem;
	--tv-space-7: 3rem;
	--tv-space-8: 4rem;
	/* ---- Radius ---- */
	--tv-radius-sm: 0.375rem;
	--tv-radius: 0.625rem;
	--tv-radius-lg: 1rem;
	--tv-radius-pill: 999px;
	/* ---- Elevation ---- */
	--tv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.10);
	--tv-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.06);
	--tv-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
	--tv-focus-ring: 0 0 0 0.2rem rgba(62, 116, 240, 0.35);
	/* ---- Motion ---- */
	--tv-transition: 160ms ease;
}

/* ---- Map tokens onto Bootstrap 5.3 theme variables (load this file AFTER Bootstrap) ---- */
:root,
[data-bs-theme="light"] {
	--bs-primary: var(--tv-blue);
	--bs-secondary: var(--tv-teal);
	--bs-success: var(--tv-emerald);
	--bs-warning: var(--tv-gold);
	--bs-body-color: var(--tv-ink);
	--bs-body-bg: var(--tv-surface-alt);
	--bs-border-color: var(--tv-border);
	--bs-link-color: var(--tv-color-link);
	--bs-link-hover-color: var(--tv-color-link-hover);
	--bs-body-font-family: var(--tv-font-body);
	--bs-heading-color: var(--tv-color-heading);
	--bs-border-radius: var(--tv-radius);
	/* Bootstrap builds tints/shades from the RGB triples — keep these in sync with the hexes above */
	--bs-primary-rgb: 62, 116, 240;
	--bs-secondary-rgb: 14, 165, 164;
	--bs-success-rgb: 16, 185, 129;
	--bs-warning-rgb: 243, 183, 46;
}

/* Headings pick up Poppins 600 globally */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--tv-font-heading);
	font-weight: var(--tv-weight-heading);
	color: var(--tv-color-heading);
	line-height: var(--tv-leading-tight);
	letter-spacing: var(--tv-tracking-tight);
}