/*
 * tokens.css — Squad Website Theme design tokens.
 *
 * Single source of truth for the brand primitives: palette, surfaces,
 * gradients, type, geometry, and elevation, exposed as CSS custom properties
 * on :root and consumed by every other stylesheet. Never hardcode a brand hex
 * outside this file.
 *
 * All custom properties are namespaced with the `--squad-` prefix to avoid
 * collisions with Divi and third-party plugin variables. Values mirror the
 * prototype at _reference/assets/squad.css; the supporting tones
 * (--squad-bg-tint, --squad-line, #8A5BFF in --squad-grad-text, etc.) are part
 * of that locked spec and intentionally live here, the one allowed home for hexes.
 *
 * Also registers the self-hosted Plus Jakarta Sans weights via @font-face
 * (font-display: swap). Loaded first in the enqueue chain so the variables and
 * the typeface are available to every consumer.
 *
 * @author Al Amin Ahamed
 * @since  4.0.0
 */

/* -------------------------------------------------------------------------
 * Plus Jakarta Sans — self-hosted (OFL). TTF only; woff2 can be added later
 * without touching consumers. Weights: 400 / 500 / 600 / 700 / 800.
 * ---------------------------------------------------------------------- */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/PlusJakartaSans-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/PlusJakartaSans-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/PlusJakartaSans-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");
}

:root {
	/* ---- Brand palette (locked — BRAND.md) -------------------------- */
	--squad-violet:        #5e2eff;   /* primary, pills, accents        */
	--squad-violet-deep:   #3d04fa;   /* gradient end / stem base       */
	--squad-royal:         #381c99;   /* deep background stop           */
	--squad-ink:           #1e1733;   /* text on light / dark surface   */
	--squad-ink-soft:      #4a4368;   /* secondary text                 */
	--squad-lavender:      #c9b8ff;   /* reversed accents               */
	--squad-canvas:        #e1ecfd;   /* light background               */
	--squad-green:         #19d27c;   /* ready / verified               */
	--squad-red:           #e5484d;   /* error / form failure state     */

	/* ---- Surfaces --------------------------------------------------- */
	--squad-white:         #ffffff;   /* always-white (text on gradient) */
	--squad-green-ink:     #0c7a48;   /* readable green text on light chip — AA (≥4.5:1) on tinted-green surfaces */
	--squad-green-soft:    #7ef0b8;   /* green text on dark chip         */
	--squad-green-pale:    #b9f5d8;   /* green text on dark stat pill    */
	--squad-green-deep:    #04331f;   /* green text on price badge       */
	--squad-green-bg:      #f1fdf7;   /* pale green notice background    */
	--squad-red-bg:        #fdf1f1;   /* pale red notice background      */
	--squad-red-ring:      rgba(229, 72, 77, 0.15); /* unread status-pill ring */
	--squad-star:          #ffb020;   /* review star gold                */
	--squad-ink-faint:     #9a93b5;   /* placeholder text, lighter than ink-soft */
	--squad-lilac:         #ece6ff;   /* module icon gradient stop       */
	--squad-bg-tint:       #f6f4ff;   /* faint violet wash              */
	--squad-line:          #e7e3f5;   /* hairline borders on light      */
	--squad-line-strong:   #d8d2f0;
	--squad-doc-prose:     #312a4d;   /* doc article body text          */
	--squad-code-text:     #ede9ff;   /* code text on dark <pre>        */
	--squad-muted:         #b8b1d0;   /* muted separators (breadcrumbs) */

	/* ---- Brand gradients -------------------------------------------- */
	--squad-grad-stem:   linear-gradient(180deg, var(--squad-violet) 0%, var(--squad-violet-deep) 100%);
	--squad-grad-brand:  linear-gradient(135deg, var(--squad-violet) 0%, var(--squad-violet-deep) 60%, var(--squad-royal) 100%);
	--squad-grad-text:   linear-gradient(120deg, var(--squad-violet) 0%, #8a5bff 50%, var(--squad-lavender) 100%);
	--squad-grad-dark:   linear-gradient(160deg, var(--squad-ink) 0%, var(--squad-royal) 100%);
	--squad-grad-featured: radial-gradient(120% 130% at 50% -20%, #3a1d9e 0%, #1f0f55 100%);
	/* The one dark section wash — the home hero. */
	--squad-grad-hero: radial-gradient(125% 130% at 78% -12%, #2a1170 0%, #1a0e47 52%, #120a2e 100%);
	--squad-grad-promo: linear-gradient(120deg, var(--squad-ink) 0%, #2a1f52 100%);

	/* Faint brand grid — reusable dark-surface texture (lavender lines, low alpha). */
	--squad-grid-tex: linear-gradient(rgba(201, 184, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(201, 184, 255, 0.06) 1px, transparent 1px);

	/* ---- Typography ------------------------------------------------- */
	--squad-font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system,
		"Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Weights — "Squad" = ExtraBold 800, "Modules" / body = Medium 500. */
	--squad-fw-medium: 500;
	--squad-fw-semibold: 600;
	--squad-fw-bold: 700;
	--squad-fw-extrabold: 800;

	/* Modular type scale (rem). */
	--squad-fs-sm: 0.875rem;       /* 14px */
	--squad-fs-lg: 1.125rem;       /* 18px */
	--squad-fs-xl: 1.375rem;       /* 22px */

	--squad-lh-tight: 1.1;

	--squad-ls-tight: -0.02em;     /* headlines */
	--squad-ls-wide: 0.08em;       /* eyebrows / pills */

	/* ---- Geometry --------------------------------------------------- */
	--squad-radius-sm:    8px;                      /* form fields, code blocks (admin inputs, metabox fields) */
	--squad-radius:       16px;
	--squad-radius-lg:    24px;
	--squad-radius-pill:  999px;
	--squad-maxw:         1200px;
	--squad-readw:        820px;                    /* shared long-form reading column (docs, blog, legal) */
	--squad-gutter:       clamp(20px, 5vw, 48px);

	/* ---- Elevation -------------------------------------------------- */
	--squad-shadow-sm:  0 1px 2px rgba(30, 23, 51, 0.06), 0 2px 8px rgba(30, 23, 51, 0.05);
	--squad-shadow-md:  0 8px 24px rgba(56, 28, 153, 0.10), 0 2px 6px rgba(30, 23, 51, 0.06);
	--squad-shadow-lg:  0 24px 60px rgba(56, 28, 153, 0.18), 0 6px 16px rgba(30, 23, 51, 0.10);
	--squad-shadow-violet:       0 6px 18px rgba(94, 46, 255, 0.28);   /* primary button rest — crisp, close */
	--squad-shadow-violet-hover: 0 12px 30px rgba(94, 46, 255, 0.34);  /* primary button hover — lifts */

	/* ---- Motion ----------------------------------------------------- */
	--squad-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * Baseline brand heading colour.
 *
 * Divi's Customizer prints `h1,h2,…h6 { color:#333 }` inline late in <head>;
 * because our headings carried no colour of their own, that grey won — even on
 * dark sections (the hero title rendered near-invisible). This scoped rule
 * (specificity 0,1,1) outranks Divi's (0,0,1) so headings adopt brand ink.
 *
 * It lives in tokens.css — the FIRST brand sheet — on purpose: every later
 * sheet (footer lavender, the dark-band rules in components.css) overrides
 * it by load order, so this only fills the gap where nothing else sets a
 * heading colour. Do NOT move it into divi-overrides.css (the last sheet)
 * or it would clobber those intentional light headings.
 */
.squad-v4 h1,
.squad-v4 h2,
.squad-v4 h3,
.squad-v4 h4,
.squad-v4 h5,
.squad-v4 h6 {
	color: var(--squad-ink);
}