/* ══════════════════════════════════════════════════════════════
   FIELD INTELLIGENCE DESIGN SYSTEM — tokens
   Every colour, type, space and motion value lives here. Dark
   mode is a token swap, never a duplicated component style.
   ══════════════════════════════════════════════════════════════ */

/* ── IBM Plex, self-hosted. Latin subset, 148 KB total. ──────── */
@font-face {
	font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
	font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500;
	font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
	font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Serif"; font-style: normal; font-weight: 400;
	font-display: swap; src: url("../fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Serif"; font-style: normal; font-weight: 600;
	font-display: swap; src: url("../fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
	font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
	font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

:root {
	/* ── type ─────────────────────────────────────────────── */
	--an-font-ui:        "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--an-font-editorial: "IBM Plex Serif", Charter, "Iowan Old Style", Cambria, Georgia, serif;
	--an-font-mono:      "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Fluid scale. Clamps are tuned so 390px mobile and 1920px
	   desktop both land on comfortable sizes without a jump. */
	--an-t-display: clamp(2.75rem, 1.4rem + 5.6vw, 5rem);     /* 44 → 80 */
	--an-t-h1:      clamp(2.25rem, 1.3rem + 4vw, 4rem);        /* 36 → 64 */
	--an-t-h2:      clamp(1.75rem, 1.2rem + 2.4vw, 3rem);      /* 28 → 48 */
	--an-t-h3:      clamp(1.375rem, 1.1rem + 1.2vw, 2.25rem);  /* 22 → 36 */
	--an-t-h4:      clamp(1.1875rem, 1.05rem + 0.6vw, 1.75rem);/* 19 → 28 */
	--an-t-body:    clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); /* 17 → 19 */
	--an-t-small:   0.9375rem;
	--an-t-micro:   0.8125rem;

	--an-lh-tight: 1.04;
	--an-lh-snug:  1.2;
	--an-lh-body:  1.65;

	/* ── space: 4px base, geometric-ish ───────────────────── */
	--an-space-1: 4px;   --an-space-2: 8px;   --an-space-3: 12px;
	--an-space-4: 16px;  --an-space-5: 24px;  --an-space-6: 32px;
	--an-space-7: 48px;  --an-space-8: 64px;  --an-space-9: 96px;
	--an-space-10: 128px;

	/* ── radius ───────────────────────────────────────────── */
	--an-radius-sm: 6px;  --an-radius-md: 10px;
	--an-radius-lg: 16px; --an-radius-xl: 24px;

	/* ── motion ───────────────────────────────────────────── */
	--an-ease: cubic-bezier(.2, .7, .3, 1);
	--an-fast: 140ms;
	--an-med:  240ms;

	/* ── layout ───────────────────────────────────────────── */
	--an-rail: 84px;
	--an-gutter: clamp(16px, 3vw, 48px);
	--an-max: 1600px;
	--an-measure: 68ch;
}

/* ══ LIGHT (default) ═══════════════════════════════════════════
   Warm editorial neutrals rather than pure white — paper, not
   screen. Green is restrained and used for state, not decoration. */
:root,
:root[data-an-theme="light"] {
	--an-bg:        #F4F4F2;
	--an-surface:   #FFFFFF;
	--an-surface-2: #FAFAF8;
	--an-sunk:      #EAEAE6;
	--an-line:      #DEDEDA;
	--an-line-soft: #EBEBE7;

	--an-text:      #16181A;
	--an-text-2:    #52565A;
	--an-text-3:    #82878C;

	--an-primary:   #1F6B4A;   /* agricultural green, desaturated */
	--an-primary-c: #FFFFFF;
	--an-accent:    #B4501C;   /* laterite, editorial emphasis */
	--an-warn:      #9A6A00;
	--an-danger:    #A32C1E;

	/* contextual, used sparingly as category signals */
	--an-c-science: #3A5FA8;
	--an-c-tech:    #5B4A9C;
	--an-c-market:  #8A6A12;
	--an-c-climate: #17697B;

	--an-shadow-1: 0 1px 2px rgba(20,22,24,.05), 0 4px 12px rgba(20,22,24,.05);
	--an-shadow-2: 0 2px 4px rgba(20,22,24,.06), 0 12px 32px rgba(20,22,24,.09);
	--an-chrome:   rgba(244,244,242,.85);
	--an-canvas:   #FFFFFF;   /* product photography backdrop */
	color-scheme: light;
}

/* ══ DARK ══════════════════════════════════════════════════════ */
:root[data-an-theme="dark"] {
	--an-bg:        #0C0E0F;
	--an-surface:   #15181A;
	--an-surface-2: #1B1F21;
	--an-sunk:      #101314;
	--an-line:      #262B2E;
	--an-line-soft: #1D2225;

	--an-text:      #ECEEEC;
	--an-text-2:    #A2A9A6;
	--an-text-3:    #71797B;

	--an-primary:   #5FBF8E;
	--an-primary-c: #06110C;
	--an-accent:    #E8763F;
	--an-warn:      #D9A521;
	--an-danger:    #E06A56;

	--an-c-science: #7C9BE0;
	--an-c-tech:    #A493E8;
	--an-c-market:  #D6B14A;
	--an-c-climate: #4FB0C4;

	--an-shadow-1: 0 4px 16px rgba(0,0,0,.4);
	--an-shadow-2: 0 12px 40px rgba(0,0,0,.55);
	--an-chrome:   rgba(12,14,15,.8);
	--an-canvas:   #F2F2F0;   /* stays light: products photograph on white */
	color-scheme: dark;
}

/* System preference drives the default when no explicit choice is
   stored. The attribute selectors above always win over this. */
@media (prefers-color-scheme: dark) {
	:root:not([data-an-theme="light"]) {
		--an-bg:        #0C0E0F;
		--an-surface:   #15181A;
		--an-surface-2: #1B1F21;
		--an-sunk:      #101314;
		--an-line:      #262B2E;
		--an-line-soft: #1D2225;

		--an-text:      #ECEEEC;
		--an-text-2:    #A2A9A6;
		--an-text-3:    #71797B;

		--an-primary:   #5FBF8E;
		--an-primary-c: #06110C;
		--an-accent:    #E8763F;
		--an-warn:      #D9A521;
		--an-danger:    #E06A56;

		--an-c-science: #7C9BE0;
		--an-c-tech:    #A493E8;
		--an-c-market:  #D6B14A;
		--an-c-climate: #4FB0C4;

		--an-shadow-1: 0 4px 16px rgba(0,0,0,.4);
		--an-shadow-2: 0 12px 40px rgba(0,0,0,.55);
		--an-chrome:   rgba(12,14,15,.8);
		--an-canvas:   #F2F2F0;
		color-scheme: dark;
	}
}