/* Per-app visual identity — the typeface and the accent palette. Loaded after css/variables.css,
   which derives all other accent shades (--color-primary-100..900, --border-accent,
   etc.) from --color-primary. Change these to re-skin this app. */
/* Cairo, self-hosted. The shared css/variables.css already names "Cairo" first in
   --font-family for the whole fleet; without this declaration it simply fell
   through to system-ui (which is what kintact still does — it ships the file and
   never declares it). Declared here rather than in css/general.css because that
   file is shared: an @font-face in it would fan out to every app on the next push.

   One variable file, both axes: `font-weight: 200 1000` is the wght range, so
   every weight the app asks for comes out of the same 140KB rather than a static
   face each; `oblique -11deg 11deg` is the slnt range, which is what italics in a
   note body render with instead of a synthesised slant. woff2-variations, since
   the source is a variable TTF (353KB) and the Brotli container takes it to 140KB
   — the same conversion kplants and kintact already carry, byte for byte.

   font-display: swap: an Arabic note is readable in the fallback while 140KB is
   on the wire, and this app boots offline-first — blocking the first paint on a
   font would undo that. */
@font-face {
	font-family: "Cairo";
	src: url("../fonts/Cairo.woff2") format("woff2-variations");
	font-weight: 200 1000;
	font-style: oblique -11deg 11deg;
	font-display: swap;
}

:root {
	--color-primary: light-dark(#0f766e, #14b8a6);

	/* Deliberate, separately-tuned accents (not a function of --color-primary). */
	--color-primary-light: #5eead4;
	--color-primary-dark: #0f766e;
	--color-surface-alt: #f0fdfa;
	--color-border: #ccfbf1;

	/* Translucent accents: the brand color at reduced alpha, derived from
	   --color-primary so they track any re-skin automatically. */
	--color-outline:    rgb(from var(--color-primary) r g b / 0.55);
	--color-focus-ring: rgb(from var(--color-primary) r g b / 0.30);

	--shadow-button: 0 2px 4px rgba(0, 0, 0, 0.05),
	                 0 4px 10px rgb(from var(--color-primary) r g b / 0.25);

	--border-subtle: 1px solid rgb(from var(--color-primary) r g b / 0.12);
}