/*
 * Fluent Commerce 2026 design system — tokens and base layer.
 *
 * Adopted from the Claude Design export ("Fluent Website Build"), where these
 * live as _ds/…/tokens/{colors,typography,space,effects,base}.css. The five
 * files are merged into one here for the obvious reason — five stylesheets is
 * four more requests than the site needs — but the values are the export's,
 * unrounded, and the comments explaining the brand rules are kept because those
 * rules are the point. If a value here disagrees with the export, the export is
 * right and this file is stale.
 *
 * ── WHY EVERYTHING IS SCOPED TO body.fc-ds ─────────────────────────────────
 *
 * The old theme tokens in style.css and the new ones here SHARE A PREFIX AND
 * DISAGREE ON VALUES:
 *
 *     --fc-violet   style.css #9055ee   →   here #793DFF
 *     light surface --fc-paper #eeeeee  →   --fc-bone #F2F1ED (warm)
 *     third face    Trispace            →   retired; Fraunces + JetBrains Mono
 *     spacing       --fc-space-*        →   --sp-8 … --sp-120
 *
 * So these cannot go on :root. A page that loaded both would take whichever
 * cascaded last and silently change colour. Hanging them on body.fc-ds means
 * the new system exists only on pages that opt in, and the live home page, PDP
 * and text pages keep the exact rendering they have today.
 *
 * Belt and braces on top of that: fluent_commerce_assets() returns early for
 * these pages, so style.css and home.css are never even requested here. The
 * scope is what makes that safe to get wrong.
 *
 * The scope comes off when every template has been rebuilt, at which point
 * these become the site's :root tokens and style.css goes away. Until then,
 * two systems coexist on purpose.
 *
 * @package Fluent_Commerce
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * COLOUR
 * Brand-team current values. The brand is a two-surface system — ink and bone —
 * with violet as the single pop.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds {
	/* Neutrals */
	--fc-black: #000000;
	--fc-ink-10: #0a0a0a;
	--fc-ink-12: #121212;        /* PRIMARY dark surface */
	--fc-ink-17: #171717;
	--fc-bone: #f2f1ed;          /* PRIMARY light surface — warm off-white */
	--fc-white: #ffffff;
	--fc-off-white: #f5f5f5;
	--fc-warm-grey: #e9e5df;
	--fc-grey-c4: #c4c4c4;
	--fc-grey-d0: #d0d0d0;
	--fc-grey-70: #707070;       /* muted meta text */
	--fc-grey-44: #444444;

	/* Violet — the single pop colour. AA on white at --fc-violet. */
	--fc-violet: #793dff;
	--fc-violet-light: #8b5cf6;
	--fc-violet-bright: #9747ff; /* hover / stroke highlight */
	--fc-iris: #6b4fa0;
	--fc-lilac: #a98fd2;
	--fc-lilac-pale: #e0daeb;

	/*
	 * Signals — STATUS ONLY. Never used for tags, call-outs, decoration or
	 * category coding. The blog uses two of them: red for a form error, green
	 * for a form success. Nothing else.
	 */
	--fc-gold: #ffd000;
	--fc-green: #36b53f;
	--fc-red: #f34949;

	/* Alpha ramps — how the brand tints text on its two surfaces. */
	--fc-ink-a93: rgba(18, 18, 18, 0.9333);
	--fc-ink-a80: rgba(18, 18, 18, 0.8);
	--fc-ink-a60: rgba(18, 18, 18, 0.6);
	--fc-ink-a50: rgba(18, 18, 18, 0.5);
	--fc-ink-a40: rgba(18, 18, 18, 0.4);
	--fc-ink-a20: rgba(18, 18, 18, 0.2);
	--fc-ink-a06: rgba(18, 18, 18, 0.06);
	--fc-bone-a93: rgba(242, 241, 237, 0.9333);
	--fc-bone-a80: rgba(242, 241, 237, 0.8);
	--fc-bone-a60: rgba(242, 241, 237, 0.6);
	--fc-bone-a50: rgba(242, 241, 237, 0.5);
	/* The placeholder tint on a dark surface, and the mirror of --fc-ink-a40, which
	   is the same job on a light one. Arrived with the contact page's fields. */
	--fc-bone-a40: rgba(242, 241, 237, 0.4);
	--fc-bone-a20: rgba(242, 241, 237, 0.2);
	--fc-bone-a08: rgba(242, 241, 237, 0.08);
	--fc-white-a93: rgba(255, 255, 255, 0.9333);
	--fc-white-a80: rgba(255, 255, 255, 0.8);
	--fc-white-a29: rgba(255, 255, 255, 0.29);   /* the hero kicker's glow, and the meter's spent track */

	/* The one violet tint that is a fill rather than a stroke — highlight wash. */
	--fc-violet-wash: #efeafe;

	/* Semantic aliases — prefer these in page CSS over the raw ramp above. */
	--surface-dark: var(--fc-ink-12);
	--surface-light: var(--fc-bone);
	--surface-lightest: var(--fc-white);
	--surface-accent: var(--fc-violet);

	--text-on-dark: var(--fc-bone);
	--text-on-dark-strong: var(--fc-white-a93);
	--text-on-dark-muted: var(--fc-bone-a80);
	--text-on-light: var(--fc-ink-12);
	--text-on-light-strong: var(--fc-ink-a93);
	--text-on-light-muted: var(--fc-ink-a80);
	--text-meta: var(--fc-grey-70);

	--border-on-dark: var(--fc-bone-a20);
	--border-on-light: var(--fc-ink-a20);
	--border-accent: var(--fc-violet);

	--link-color: var(--fc-ink-12);
	--link-color-hover: var(--fc-violet);

	/* ─────────────────────────────────────────────────────────────────────
	 * TYPE
	 * Three voices: a serif for statements, a grotesk for everything
	 * structural, Fraunces for quotes and numerals. Trispace is retired.
	 * ────────────────────────────────────────────────────────────────── */
	--font-display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
	--font-core: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-quote: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
	/*
	 * Machine-generated strings ONLY — refs, SKUs, GTINs, control identifiers.
	 * Never for body, labels, or a "technical feel". Its presence is a signal:
	 * you did not write this, and you cannot type it.
	 */
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--font-label: var(--font-core);

	/*
	 * Sizes are the export's literal values. The fluid clamp() ramps that
	 * override most of these live in layout.css, because they need the
	 * container to be established first.
	 */
	--type-display-80: 80px;   /* the step above the page hero — see .fc-display-slide */
	--type-display-72: 72px;   /* page hero */
	--type-display-62: 62px;   /* section headline */
	--type-display-48: 48px;
	--type-display-40: 40px;   /* serif inside a column — the home "Why us?" panes */
	--type-h3-48: 48px;        /* grotesk at display size — the rolling vertical list */
	--type-title-32: 32px;
	--type-lead-26: 26px;
	--type-h5-24: 24px;
	--type-body-18: 18px;      /* PRIMARY body size */
	--type-body-16: 16px;      /* long-form body inside a composition */
	--type-body-15: 15px;      /* the smallest body size the brand allows */
	--type-eyebrow-16: 16px;
	--type-caption-12: 12px;

	--type-quote-32: 32px;
	--type-quote-24: 24px;
	--type-numeral-96: 96px;   /* the stat band, and nothing else */
	--type-numeral-48: 48px;
	--type-numeral-32: 32px;
	--type-numeral-24: 24px;

	--type-mono-16: 16px;
	--type-mono-15: 15px;
	--type-mono-14: 14px;
	--type-mono-12: 12px;
	--ls-mono: 0.01em;

	--type-label-18: 18px;
	--type-label-12: 12.46640682220459px;
	--type-label-11: 11.077271461486816px;

	/* Line heights */
	--lh-flush: 1;      /* all display type */
	--lh-tight: 1.1;
	--lh-title: 1.25;   /* a grotesk semibold title — card, bento panel, pattern */
	--lh-snug: 1.3;
	--lh-body: 1.4;
	--lh-loose: 1.5;

	/* Tracking */
	--ls-display: -0.01em;
	--ls-label: 0.04em;     /* uppercase Instrument Sans needs positive tracking */
	--ls-eyebrow: 0.04em;
	--ls-quote: -0.01em;    /* Fraunces set tight, like the display serif */

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ─────────────────────────────────────────────────────────────────────
	 * SPACE, GEOMETRY
	 * Two tiers. SCALE is the seven steps you choose from. The layout
	 * CONSTANTS (gutters, the body indent) are measured facts about the
	 * brand's compositions, not choices — they live in layout.css because
	 * they are the things that go fluid.
	 * ────────────────────────────────────────────────────────────────── */
	--sp-8: 8px;      /* tight pairs: icon↔label, stacked meta */
	--sp-16: 16px;    /* inside a small component */
	--sp-24: 24px;    /* default stack gap inside a text block */
	--sp-32: 32px;    /* headline ↔ body */
	--sp-54: 54px;    /* between blocks within a section */
	--sp-72: 72px;    /* section vertical padding */
	--sp-120: 120px;  /* generous section padding */

	/*
	 * Radius appears in exactly five places and each has a reason:
	 *   0     everything — sections, cards, images, plates. Square is the brand.
	 *   10    controls that read as UI: buttons, fields, nav rows
	 *   16    the rounded nav card
	 *   30    the dashed rail
	 *   pill  the hub pill
	 * If a new radius seems necessary, the answer is one of these.
	 */
	--radius-0: 0px;
	--radius-10: 10.465116500854492px;
	--radius-16: 16px;
	--radius-30: 30px;
	--radius-pill: 200px;

	/* 1px is the brand's elevation cue. 2px dashed for rails, 4px for a frame. */
	--stroke-1: 1px;
	--stroke-2: 2px;
	--stroke-4: 4px;

	/* ─────────────────────────────────────────────────────────────────────
	 * MOTION, SHADOW
	 * Shadows are rare — elevation is normally a 1px border. Motion is
	 * restrained: a short ease-out fade or a straight cross-fade.
	 * ────────────────────────────────────────────────────────────────── */
	--shadow-frame: 0 15px 25px 0 rgba(0, 0, 0, 0.25);
	--shadow-soft: 0 4px 12px 0 rgba(112, 112, 112, 0.2);

	--ease-out: cubic-bezier(0.2, 0, 0, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 150ms;
	--dur-base: 240ms;
	--dur-slow: 600ms;

	/* Protection gradients — an edge fade in the surface colour, never a scrim. */
	--fade-bone-right: linear-gradient(90deg, #f2f1ed 0%, rgba(242, 241, 237, 0) 100%);

	/* ─────────────────────────────────────────────────────────────────────
	 * THE DOT GRID
	 * The brand's one background texture: a 1px dot on a 16px lattice. It
	 * says "this area is a diagram surface". Three places use it — the card
	 * panels on the home page, the route rail, and every DiagramCanvas —
	 * and they must agree, so the cell, the dot and the colour are tokens
	 * and the composed gradient is one too.
	 * ────────────────────────────────────────────────────────────────── */
	--dot-cell: 16px;
	--dot-size: 1px;
	--dot-color: rgba(18, 18, 18, 0.14);
	--dot-grid: radial-gradient(circle at 1px 1px, var(--dot-color) var(--dot-size), transparent 0);

	/*
	 * DIAGRAMS
	 * A diagram is not the page — it is a schematic drawn on its own paper.
	 * Hence a surface a shade off the bone, a heavier hairline than the
	 * page's, a grey plate for headers and attribute rows, and a dead grey
	 * for the wires that are only there to show structure. --diagram-noise
	 * is the "unimportant connection" stroke; accent wires use violet.
	 */
	--diagram-surface: #fafaf8;
	--diagram-edge: rgba(18, 18, 18, 0.16);
	--diagram-plate: #efefef;
	--diagram-noise: #cbcbcb;
	--diagram-fill-gradient: linear-gradient(180deg, rgba(18, 18, 18, 0.55) 0%, rgba(18, 18, 18, 0) 100%);

	/*
	 * The ink vignette — a hard-edged circular mask used to sink a drawing
	 * into the dark surface. Its stops are the export's, to four places;
	 * they are not a smooth ramp on purpose, the near-step at 76% is what
	 * gives it an edge instead of a blur.
	 */
	--vignette-ink: radial-gradient(370.884px 280.036px at 50% 50%, rgba(18, 18, 18, 0) 74.94%, rgba(18, 18, 18, 0.3849) 76.33%, rgb(18, 18, 18) 99.1%);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * BASE
 * The export's base.css, scoped. Deliberately minimal — it sets the two
 * surfaces, the type default and the link idiom, and nothing else.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds,
body.fc-ds *,
body.fc-ds *::before,
body.fc-ds *::after {
	box-sizing: border-box;
}

body.fc-ds {
	margin: 0;
	font-family: var(--font-core);
	font-weight: var(--fw-medium);
	font-size: var(--type-body-18);
	line-height: var(--lh-body);
	color: var(--text-on-light);
	background: var(--surface-light);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*
	 * The design's canvas is 1920 and its compositions are built on gutters
	 * measured against it, so past that width the page is centred rather than
	 * stretched. text-rendering is left alone: optimizeLegibility costs layout
	 * time on long articles for no visible gain at these sizes.
	 */
	overflow-x: clip;
}

/*
 * h1–h3 default to the display serif because that is what they are in almost
 * every composition. The article template overrides h2/h3 to the grotesk — the
 * design sets in-article subheads in Instrument Sans SemiBold, not the serif,
 * so that override is intentional and lives in blog.css next to the prose.
 */
body.fc-ds h1,
body.fc-ds h2,
body.fc-ds h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	line-height: var(--lh-flush);
	letter-spacing: var(--ls-display);
}

body.fc-ds h4,
body.fc-ds h5,
body.fc-ds h6,
body.fc-ds p,
body.fc-ds figure,
body.fc-ds blockquote {
	margin: 0;
}

/*
 * The export's base.css draws a currentColor bottom border on EVERY <a>, which
 * is the brand's link idiom for body copy. That is wrong for chrome — a nav
 * link, a card that happens to be an anchor, a footer column — so rather than
 * setting it globally and then unsetting it in four places (which is what the
 * export's responsive.css ends up doing), links here are bare by default and
 * the underline is opt-in via .fc-body-link, applied to prose links only.
 */
body.fc-ds a {
	color: var(--link-color);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

body.fc-ds a:hover {
	color: var(--fc-black);
}

body.fc-ds [data-surface="dark"] a {
	color: var(--fc-bone);
}

body.fc-ds [data-surface="dark"] a:hover {
	color: var(--fc-white);
}

body.fc-ds ::selection {
	background: var(--fc-violet);
	color: var(--fc-white);
}

/*
 * Focus. The design documents hover states but not focus, so this is ours: a
 * violet ring at the offset the brand's 1px hairlines already use. Only for
 * keyboard users, so it never competes with the hover states on a mouse.
 */
body.fc-ds :focus-visible {
	outline: var(--stroke-2) solid var(--fc-violet);
	outline-offset: 2px;
}

/* Images never exceed their column. Stated once here rather than per component. */
body.fc-ds img,
body.fc-ds svg,
body.fc-ds video {
	max-width: 100%;
}

body.fc-ds img {
	height: auto;
}

/*
 * Motion is decoration in this design — the marquee, the nav reveal, the card
 * hover. All of it is safe to drop.
 */
@media (prefers-reduced-motion: reduce) {
	body.fc-ds *,
	body.fc-ds *::before,
	body.fc-ds *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}