/* ══════════════════════════════════════════════════════════════
   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:    #6B7075;   /* was #82878C — 3.47:1 on a sunk panel, below AA */

	--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:    #7F8789;

	--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:    #7F8789;

		--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;
	}
}

/* ── Deep Grow ────────────────────────────────────────────────────
   A fourth mode, never inferred from the system — always an explicit
   choice, because a cinematic treatment is not something to impose on
   someone who only asked for dark.

   Deeper ground than dark mode, warmer accent, and enough contrast
   left in the type that the atmosphere never costs legibility. Every
   effect keyed to this attribute switches itself off under
   prefers-reduced-motion. */

:root[data-an-theme="deep"] {
	--an-bg:        #070A08;
	--an-surface:   #0D1210;
	--an-surface-2: #121815;
	--an-sunk:      #050807;
	--an-line:      #1B231E;
	--an-line-soft: #131916;

	--an-text:      #EDF2EE;
	--an-text-2:    #9BA8A0;
	--an-text-3:    #76837C;

	--an-accent:    #E8703A;   /* laterite, lifted so it can carry a bloom */
	--an-warn:      #D9A038;
	--an-danger:    #E0614C;

	--an-canvas:    #0D1210;

	/* Only Deep Grow defines these; the other modes leave them empty so
	   the same rules render inert rather than needing to be duplicated. */
	--an-bloom:  0 0 18px color-mix(in srgb, var(--an-accent) 45%, transparent);
	--an-grain:  .05;
	--an-lift:   14px;
}


/* ══════════════════════════════════════════════════════════════════════
   SENSORIUM — the instrument layer.

   Added to the tokens above, never in place of them. Every --an-* name that
   existed before this block still exists and still means the same thing,
   because eleven module stylesheets read them and a renamed custom property
   fails silently rather than loudly.

   The palette is deliberately narrow. An intelligence surface earns trust by
   being legible at a glance in a bright field and at night in a shed, and a
   product that spends colour on decoration has none left to spend on meaning.
   So: one ground, one ink, and exactly four signal colours, each with a fixed
   job that never changes anywhere in the product.

       open    something became possible
       close   something is about to stop being possible
       gap     the system cannot see this
       hold    steady; nothing to do

   Nothing else is coloured. Not a heading, not a button, not a card.
   ══════════════════════════════════════════════════════════════════════ */

:root {
	/* ── the four signals ─────────────────────────────────── */
	--sx-open:   #1F6B4A;
	--sx-close:  #A2521A;
	--sx-gap:    #5C6470;
	--sx-hold:   #3A5FA8;

	--sx-open-w:  color-mix(in srgb, var(--sx-open) 12%, transparent);
	--sx-close-w: color-mix(in srgb, var(--sx-close) 12%, transparent);
	--sx-gap-w:   color-mix(in srgb, var(--sx-gap) 10%, transparent);

	/* ── instrument geometry ──────────────────────────────── */
	--sx-rail:   268px;
	--sx-rail-min: 76px;
	--sx-bar:    60px;
	--sx-gut:    clamp(18px, 2.6vw, 40px);
	--sx-max:    1480px;
	--sx-read:   68ch;

	/* ── the dial ─────────────────────────────────────────── */
	--sx-core-in:  color-mix(in srgb, var(--an-surface) 92%, var(--sx-open));
	--sx-core-out: var(--an-surface);
	--sx-track:    var(--an-line);
	--sx-hand:     var(--an-accent);

	/* ── motion ───────────────────────────────────────────── */
	--sx-slow: 900ms;
	--sx-ease: cubic-bezier(.22, .68, .24, 1);

	/* Ambient breathing. Six seconds is roughly a resting breath and is slow
	   enough that it reads as "alive" rather than "loading" — the difference
	   between a system that is thinking and one that is waiting. */
	--sx-breath: 6.2s;
}

:root[data-an-theme="dark"],
:root[data-an-theme="deep"] {
	--sx-open:   #5FBF8E;
	--sx-close:  #E8934F;
	--sx-gap:    #7A838F;
	--sx-hold:   #7C9BE0;
	--sx-track:  var(--an-line);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-an-theme="light"]) {
		--sx-open:   #5FBF8E;
		--sx-close:  #E8934F;
		--sx-gap:    #7A838F;
		--sx-hold:   #7C9BE0;
	}
}