/* 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. */
/* Tajawal, self-hosted — the fleet's typeface, set up exactly as in kmusic
   (css/identity.css there). Its Latin is drawn to match its Arabic, so a mixed
   line reads as one face. Static weights only: 400, 500 and 700 (also the
   nearest match for the type scale's 600); no italic, so the browser synthesizes
   an oblique. font-display: swap, so an offline-first boot never waits on it.
   Licence: fonts/Tajawal-OFL.txt.

   size-adjust: 110% brings Tajawal up to the proportions the type scale was tuned
   on (Cairo's: Tajawal's x-height is 0.45em and cap height 0.63em against 0.50 and
   0.70). The 77/23 ascent/descent overrides re-centre it: its own metrics reserve
   deep room for Arabic descenders, so Latin otherwise rides ~18% high in buttons
   and pills. They override every platform's metrics alike. Measured in kmusic. */
@font-face {
	font-family: "Tajawal";
	src: url("../fonts/Tajawal-Regular.woff2") format("woff2");
	font-weight: 400;
	size-adjust: 110%;
	ascent-override: 77%;
	descent-override: 23%;
	line-gap-override: 0%;
	font-display: swap;
}

@font-face {
	font-family: "Tajawal";
	src: url("../fonts/Tajawal-Medium.woff2") format("woff2");
	font-weight: 500;
	size-adjust: 110%;
	ascent-override: 77%;
	descent-override: 23%;
	line-gap-override: 0%;
	font-display: swap;
}

@font-face {
	font-family: "Tajawal";
	src: url("../fonts/Tajawal-Bold.woff2") format("woff2");
	font-weight: 700;
	size-adjust: 110%;
	ascent-override: 77%;
	descent-override: 23%;
	line-gap-override: 0%;
	font-display: swap;
}


:root {
	--color-primary: light-dark(#c8283c, #ff5a6a);

	/* Deliberate, separately-tuned accents (not a function of --color-primary). */
	--color-primary-light: #ff8a96;
	--color-primary-dark: #9e1c2e;
	--color-surface-alt: #fff5f6;
	--color-border: #ffe0e4;

	/* 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);
}

/* The shared css/variables.css names "Cairo" in --font-family, and editing it
   would fan out to every app, so the family is overridden here (as in kmusic). */
:root {
	--font-family: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}