/*
 * tokens.css — Squad Affiliate 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, which is the
 * family prefix rather than this product's: Squad Modules' site theme uses it
 * too, and only one theme is ever active, so the shared name costs nothing and
 * says the two are siblings. The supporting tones (--squad-bg-tint,
 * --squad-line, the mid stops inside the gradients) live here with the rest —
 * this file is the one allowed home for a hex.
 *
 * The three that matter come from docs/BRAND.md and the plugin's own
 * `tests/assets/brand.ts`: Affiliate Emerald #06C167 leads, Teal Abyss #053D3A
 * grounds it, and Squad Violet #5E2EFF appears once, in the mark's source node.
 * Emerald and teal are a hue pair, not a light/dark pair — a tint of emerald is
 * not teal, so both are declared rather than derived.
 *
 * Also registers the self-hosted Plus Jakarta Sans weights via @font-face
 * (font-display: swap). Self-hosted because the plugin ships no webfont at all
 * and a marketing site that phones a font CDN would be a different promise from
 * the product's; the TTFs are OFL and sit in assets/fonts. Loaded first in the
 * enqueue chain so the variables and the typeface are available to every
 * consumer.
 *
 * @author Al Amin Ahamed
 * @since  1.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 — docs/BRAND.md) ---------------------- */
	--squad-emerald:       #06c167;   /* Affiliate Emerald — primary, pills, accents */
	--squad-emerald-deep:  #048a52;   /* Emerald Deep — gradient middle, hover       */
	--squad-teal-deep:     #053d3a;   /* Teal Abyss — deepest background stop        */
	--squad-teal-mid:      #0a6e5c;   /* Teal Mid — the stop between the two above   */
	--squad-ink:           #062e2a;   /* text on light / dark surface   */
	--squad-ink-soft:      #4a5e5a;   /* secondary text                 */
	--squad-mint:          #bfe9d5;   /* reversed accents               */
	--squad-canvas:        #e7fbf2;   /* light background               */
	--squad-green:         #12b886;   /* ready / verified               */
	--squad-red:           #e5484d;   /* error / form failure state     */

	/*
	 * Squad Violet, the family tie to Squad Modules. Not an accent to reach for:
	 * it belongs to the source node in the mark and to nothing else on the page.
	 * Named apart from the palette above so a later hand cannot use it as "the
	 * other brand colour" — the two products are siblings, not one brand
	 * recoloured, and the violet is the one place they touch.
	 */
	--squad-family-violet: #5e2eff;

	/* ---- 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:     #7f938e;   /* placeholder text, lighter than ink-soft */
	--squad-mint-pale:     #dcf5e8;   /* integration icon gradient stop  */
	--squad-bg-tint:       #f2fbf7;   /* faint emerald wash             */
	--squad-line:          #dcefe6;   /* hairline borders on light      */
	--squad-line-strong:   #c4e5d5;
	--squad-doc-prose:     #23403b;   /* doc article body text          */
	--squad-code-text:     #e4f7ee;   /* code text on dark <pre>        */
	--squad-muted:         #9fb8b1;   /* muted separators (breadcrumbs) */

	/* ---- Brand gradients -------------------------------------------- */
	/*
	 * Emerald leads and teal grounds it — the direction the identity runs, and
	 * the reason the mark's slash reads as motion from source to affiliate.
	 */
	--squad-grad-slash:  linear-gradient(180deg, var(--squad-emerald) 0%, var(--squad-emerald-deep) 100%);
	--squad-grad-brand:  linear-gradient(135deg, var(--squad-emerald) 0%, var(--squad-teal-mid) 55%, var(--squad-teal-deep) 100%);
	--squad-grad-text:   linear-gradient(120deg, var(--squad-emerald) 0%, #0fb57e 50%, var(--squad-mint) 100%);
	--squad-grad-dark:   linear-gradient(160deg, var(--squad-teal-deep) 0%, #021f1d 100%);
	--squad-grad-featured: radial-gradient(120% 130% at 50% -20%, #0a6e5c 0%, #042e2b 100%);
	/* The one dark section wash — the home hero. */
	--squad-grad-hero: radial-gradient(125% 130% at 78% -12%, #0b7a63 0%, #053d3a 52%, #032523 100%);
	--squad-grad-promo: linear-gradient(120deg, var(--squad-teal-deep) 0%, #0a4f47 100%);

	/* Faint brand grid — reusable dark-surface texture (mint lines, low alpha). */
	--squad-grid-tex: linear-gradient(rgba(191, 233, 213, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(191, 233, 213, 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-fs-2xl: 1.75rem;       /* 28px */

	/*
	 * Leading is a function of size, so there is a value per size band rather than
	 * one number: a 3.5rem display heading set at 1.65 falls into stripes, and a
	 * 0.96rem paragraph set at 1.1 cannot be read. `--squad-lh-tight` came first and
	 * the admin uses it for chip and stat numerals; the rest name the bands the
	 * marketing pages actually have.
	 *
	 * Before these, eleven components each picked their own value and a bare `h2` or
	 * `p` had none at all — inheriting whatever Divi supplied, which is how the same
	 * heading read differently on two pages.
	 */
	--squad-lh-tight: 1.1;         /* numerals, chips, single-line labels */
	--squad-lh-display: 1.08;      /* h1 and hero-scale type */
	--squad-lh-heading: 1.25;      /* h2–h6 */
	--squad-lh-lead: 1.55;         /* .lead and intro paragraphs */
	--squad-lh-body: 1.65;         /* p, li, everything else */

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

	/* ---- Pill padding — the 1:3 rule -------------------------------- */
	/*
	 * Every pill-shaped interactive element — buttons, nav links, chips, tags,
	 * badges — pads its sides three times as much as its top and bottom. Wide and
	 * shallow, so a row of them reads as one horizontal band rather than as a
	 * stack of separate blocks.
	 *
	 * The vertical value is derived with calc() rather than written out, which is
	 * the whole point: the ratio is the rule, and a hand-written pair drifts the
	 * moment somebody nudges one side. Four sizes, and the horizontal step is the
	 * only number to choose.
	 *
	 * Applies to pills only. A card, a blockquote or a <pre> is a container, and
	 * a container padded 1:3 looks squashed — those keep their own values.
	 */
	--squad-pill-x-xs:  8px;
	--squad-pill-y-xs:  calc(var(--squad-pill-x-xs) / 3);
	--squad-pill-x-sm:  14px;
	--squad-pill-y-sm:  calc(var(--squad-pill-x-sm) / 3);
	--squad-pill-x-md:  24px;
	--squad-pill-y-md:  calc(var(--squad-pill-x-md) / 3);
	--squad-pill-x-lg:  30px;
	--squad-pill-y-lg:  calc(var(--squad-pill-x-lg) / 3);

	/* ---- Admin field widths ----------------------------------------- */
	/*
	 * These were core's numbers until now. Nothing in `admin.css` declared a width
	 * for `regular-text`, `large-text` or `small-text`, so every field in the admin
	 * was whatever size wp-admin's `forms.css` made it.
	 *
	 * The values are core's current ones on purpose, so adopting them changed
	 * nothing on screen. `--squad-field-lg` is 99% rather than 100% for the same
	 * reason: that is what core's `large-text` is, a wp-admin legacy from its float
	 * layouts. 100% is the better value and changing it moves pixels, so it belongs
	 * in its own change.
	 */
	--squad-field-sm:  4em;    /* short codes and counts */
	--squad-field-md:  25em;   /* names, handles, single-line copy */
	--squad-field-lg:  99%;    /* URLs and long copy — fills its cell */

	/* ---- 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);

	/* ---- Admin layout (SaaS two-column settings) -------------------- */
	--site-theme-rail-w:    320px;                 /* dashboard overview side-rail width */

	/* ---- Elevation -------------------------------------------------- */
	/* Shadows are tinted with the brand's own dark (Teal Abyss) rather than a
	 * neutral grey, so a card lifting off a tinted surface does not go muddy. */
	--squad-shadow-sm:  0 1px 2px rgba(5, 61, 58, 0.06), 0 2px 8px rgba(5, 61, 58, 0.05);
	--squad-shadow-md:  0 8px 24px rgba(5, 61, 58, 0.10), 0 2px 6px rgba(5, 61, 58, 0.06);
	--squad-shadow-lg:  0 24px 60px rgba(5, 61, 58, 0.18), 0 6px 16px rgba(5, 61, 58, 0.10);
	--squad-shadow-accent:       0 6px 18px rgba(6, 193, 103, 0.28);   /* primary button rest — crisp, close */
	--squad-shadow-accent-hover: 0 12px 30px rgba(6, 193, 103, 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 mint, 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);
}