/*
 * Brand tokens, mirrored from the Astra Customizer (option `astra-settings`)
 * and the design system (design-system/tokens.json).
 * Source of truth for new code. Hex values on purpose, not Astra variables,
 * so new code does not depend on Astra. Update by hand if the Customizer changes.
 * Astra sets html{font-size:112.5%}, so 1rem = 18px on this site.
 *
 * Contrast: white on primary is ~4.3:1, not AA for normal-size text; use
 * primary-strong (5.5:1) for buttons, links and blue sections with white text.
 * Never use the accent as text on white, or with white text on it (~1.8:1).
 * On navy: white 11.1:1, accent 6.1:1, on-navy-muted 7.3:1.
 */
:root {
	/* Colors */
	--ls-color-primary: #1579e6;        /* --ast-global-color-0 */
	--ls-color-primary-strong: #0366d0; /* deep brand blue: buttons, links, blue sections */
	--ls-color-primary-tint: #e8f1fd;   /* soft blue panels, chips */
	--ls-color-navy: #0e3c6e;           /* dark sections (hero, CTA) */
	--ls-color-navy-deep: #15375c;      /* panels and tiles on navy */
	--ls-color-on-navy-muted: #c3d3e6;  /* secondary text on navy */
	--ls-color-accent: #f7b500;         /* --ast-global-color-1 (and -6, same value) */
	--ls-color-heading: #1e2428;        /* --ast-global-color-2; "ink" in the design system */
	--ls-color-text: #576168;           /* --ast-global-color-3 */
	--ls-color-bg-alt: #f6f7fb;         /* --ast-global-color-4; "surface-alt" */
	--ls-color-bg: #ffffff;             /* --ast-global-color-5; "surface" */
	--ls-color-border: #dfe3e8;         /* hairlines, card and table borders */
	--ls-color-on-dark-link: #8fc3ff;   /* links on ink */
	--ls-color-on-dark-muted: #aab4bd;  /* secondary text on ink */
	--ls-color-black: #030000;          /* --ast-global-color-7 */
	--ls-color-primary-light: #bfd1ff;  /* --ast-global-color-8 */

	--ls-color-link: var(--ls-color-heading);        /* --ast-global-color-2 */
	--ls-color-link-hover: var(--ls-color-accent);   /* --ast-global-color-1 */

	/* Typography */
	--ls-font-body: 'Rubik', sans-serif;
	--ls-font-heading: 'Poppins', sans-serif;
	--ls-font-weight-body: 400;
	--ls-font-weight-body-bold: 500;
	--ls-font-weight-heading: 600;

	/* Customizer sizes (desktop) */
	--ls-font-size-body: 18px;
	--ls-font-size-small: 15px;   /* captions and fine print, never smaller */
	--ls-font-size-h1: 56px;
	--ls-font-size-h2: 40px;
	--ls-font-size-h3: 32px;
	--ls-font-size-h4: 24px;
	--ls-font-size-h5: 18px;
	--ls-font-size-h6: 13px;

	/* Fluid sizes for new pages: from 375px to 1200px viewports */
	--ls-fluid-h1: clamp(36px, 26.9px + 2.42vw, 56px);
	--ls-fluid-h2: clamp(30px, 25.5px + 1.21vw, 40px);
	--ls-fluid-h3: clamp(26px, 23.3px + 0.73vw, 32px);
	--ls-fluid-h4: clamp(21px, 19.6px + 0.36vw, 24px);
	--ls-fluid-body: clamp(17px, 16.5px + 0.12vw, 18px);

	/* Line heights for new pages (the Customizer renders h1 at 1.4) */
	--ls-line-height-body: 1.8571;
	--ls-line-height-h1: 1.15;
	--ls-line-height-h2: 1.2;
	--ls-line-height-h3: 1.25;
	--ls-line-height-h4: 1.35;
	--ls-line-height-h5: 1.4;
	--ls-line-height-h6: 1.4;

	/* Spacing */
	--ls-space-1: 8px;     /* tight gaps inside components */
	--ls-space-2: 16px;    /* gaps between related items */
	--ls-space-3: 24px;    /* card padding on phones, grid gaps */
	--ls-space-4: 32px;    /* card padding on desktop */
	--ls-space-6: 48px;    /* between a heading block and its content */
	--ls-space-10: 80px;   /* section padding on phones */
	--ls-space-15: 120px;  /* section padding on desktop */

	/* Radius */
	--ls-radius-sm: 8px;      /* chips, inputs, small tiles */
	--ls-radius-card: 16px;   /* cards, panels, chat mockups */

	/* Layout */
	--ls-content-width: 1200px;
	/* Astra header height (transparent header sits over the first section) */
	--ls-header-height: 86px;
	--ls-header-height-mobile: 70px;

	/* Buttons */
	--ls-button-bg: var(--ls-color-primary);         /* --ast-global-color-0 */
	--ls-button-bg-hover: var(--ls-color-accent);    /* --ast-global-color-6 */
	--ls-button-color: #ffffff;
	--ls-button-font-family: var(--ls-font-heading);
	--ls-button-font-weight: 600;
	--ls-button-font-size: 15px;
	--ls-button-text-transform: capitalize;
	--ls-button-padding: 14px 30px;
	--ls-button-radius: 24px;
	--ls-button-border-width: 2px;
}