/* The app's only two colour literals. Every other colour — surfaces, text,
   borders, card faces, translucent accents — is mixed from these in css/app.css
   and the shared css/variables.css, so a re-skin is these two lines.

   Card-table felt: saturated, deep enough in light mode to carry white button
   text, brighter in dark so it still reads against a near-black surface. The two
   are kept as separate scalars rather than one light-dark() value because
   color-mix() cannot take a light-dark() as an input — see css/app.css. */
:root {
	--primary-l: #0b7a4f;
	--primary-d: #35c98a;

	--color-primary: light-dark(var(--primary-l), var(--primary-d));

	--color-primary-light: color-mix(in oklch, var(--primary-l) 45%, white);
	--color-primary-dark:  color-mix(in oklch, var(--primary-l) 78%, black);
	--color-surface-alt:   color-mix(in oklch, var(--primary-l) 7%, white);
	--color-border:        color-mix(in oklch, var(--primary-l) 18%, white);

	--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 rgb(from var(--color-primary) r g b / 0.10),
	                 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);
}