/*
 * Design tokens — Ants Creation.
 *
 * Values are taken from the approved design (Homepage/About/Solutions/… .dc.html).
 * Where the design inlines a literal, it becomes a token here so a change lands in
 * one place rather than across fifty patterns.
 *
 * Two rules the design holds to throughout, encoded below:
 *   1. No border radius. Every corner is square.
 *   2. Red is a single accent, never a large fill except the closing CTA band.
 */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin.woff2") format("woff2-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-italic-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/plex-mono-latin.woff2") format("woff2");
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}

:root {
	/* --- ink and paper ---------------------------------------------------- */
	--ants-ink:        #081120;  /* deepest — hero, header, footer          */
	--ants-ink-2:      #0A1424;  /* secondary dark bands, and body text     */
	--ants-paper:      #FAF8F5;
	--ants-tinted:     #F2EFE9;
	--ants-white:      #FFFFFF;

	/* --- brand ------------------------------------------------------------ */
	--ants-red:        #E1251B;  /* CTA fills, hairline accents             */
	--ants-red-deep:   #C42116;  /* hover, and eyebrows on light — 5.9:1    */
	--ants-rose:       #F2C9C4;  /* eyebrow + H1 accent on dark             */

	/*
	 * Gold marks awards only. Two values because one colour cannot clear 4.5:1
	 * on both grounds: #C9A227 on ink is 7.4:1, on paper only 2.1:1.
	 */
	--ants-gold:       #C9A227;  /* on dark                                 */
	--ants-gold-deep:  #7A5F0A;  /* on light — 5.6:1                        */

	/* --- text on light ---------------------------------------------------- */
	--ants-text:       #0A1424;
	--ants-text-lead:  rgba(10, 20, 36, 0.82);
	--ants-text-body:  rgba(10, 20, 36, 0.72);
	--ants-text-soft:  rgba(10, 20, 36, 0.66);
	--ants-text-mute:  rgba(10, 20, 36, 0.62);  /* 4.9:1 on paper — AA floor */

	/* --- text on dark ----------------------------------------------------- */
	--ants-on-dark:       rgba(250, 248, 245, 0.88);
	--ants-on-dark-lead:  rgba(250, 248, 245, 0.74);
	--ants-on-dark-soft:  rgba(250, 248, 245, 0.66);
	--ants-on-dark-mute:  rgba(250, 248, 245, 0.55);  /* 5.4:1 on ink       */

	/* --- rules ------------------------------------------------------------ */
	--ants-rule:        rgba(10, 20, 36, 0.12);
	--ants-rule-2:      rgba(10, 20, 36, 0.16);
	--ants-rule-3:      rgba(10, 20, 36, 0.22);
	--ants-rule-dash:   rgba(10, 20, 36, 0.28);
	--ants-rule-dark:   rgba(255, 255, 255, 0.09);
	--ants-rule-dark-2: rgba(255, 255, 255, 0.14);
	--ants-rule-dark-3: rgba(255, 255, 255, 0.24);

	/* --- type families ---------------------------------------------------- */
	--ants-font:        "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ants-font-serif:  "Source Serif 4", Georgia, "Times New Roman", serif;
	--ants-font-mono:   "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/*
	 * Type scale. Fluid between 375px and 1280px so the 78px hero does not
	 * overflow a phone — the design is drawn at 1440px and states one value.
	 */
	--ants-h1-hero: clamp(2.75rem, 1.6rem + 4.9vw, 4.875rem);  /* → 78px    */
	--ants-h1:      clamp(2.25rem, 1.45rem + 3.4vw, 3.875rem);  /* → 62px    */
	--ants-h2:      clamp(1.75rem, 1.25rem + 2.1vw, 2.5rem);    /* → 40px    */
	--ants-h2-sm:   clamp(1.625rem, 1.2rem + 1.8vw, 2.125rem);  /* → 34px    */
	--ants-h3:      clamp(1.125rem, 1.02rem + 0.45vw, 1.34rem); /* → 21.5px  */

	--ants-lead:    1.219rem;  /* 19.5px */
	--ants-body:    1.063rem;  /* 17px   */
	--ants-sm:      0.906rem;  /* 14.5px */
	--ants-xs:      0.844rem;  /* 13.5px */
	--ants-eyebrow: 0.656rem;  /* 10.5px */
	--ants-tag:     0.625rem;  /* 10px   */

	--ants-lh-tight: 1.06;
	--ants-lh-head:  1.14;
	--ants-lh-body:  1.66;
	--ants-lh-lead:  1.62;

	--ants-track-hero: -0.035em;
	--ants-track-head: -0.03em;
	--ants-track-mono: 0.2em;
	--ants-track-tag:  0.14em;

	/* --- measure ---------------------------------------------------------- */
	--ants-container: 1280px;
	--ants-gutter:    clamp(1.25rem, 0.5rem + 3vw, 2.5rem);  /* → 40px */
	--ants-measure:   72ch;

	/* --- rhythm ----------------------------------------------------------- */
	--ants-band:    clamp(3.5rem, 2rem + 6vw, 6rem);      /* → 96px */
	--ants-band-lg: clamp(4rem, 2rem + 8vw, 6.5rem);      /* → 104px */
	--ants-band-sm: clamp(2.5rem, 1.5rem + 4vw, 4.25rem); /* → 68px */

	--ants-gap-xs: 0.5rem;
	--ants-gap-sm: 0.875rem;
	--ants-gap:    1.125rem;   /* 18px — the design's spaced-card gap */
	--ants-gap-md: 1.625rem;   /* 26px */
	--ants-gap-lg: 2.75rem;    /* 44px */
	--ants-gap-xl: 3.5rem;     /* 56px */

	/* Hairline card grids: a 1px gap with the rule colour showing through. */
	--ants-hairline: 1px;

	/* --- interaction ------------------------------------------------------ */
	--ants-target:     44px;   /* WCAG 2.2 AA target size */
	--ants-transition: 160ms ease;
	--ants-focus:      2px solid var(--ants-red);
}