/* ==========================================================================
   Teconya — token layer.

   Values mirror the group design system (2xA) exactly: the same breakpoints,
   the same --font-scale mechanism, the same greys, accent, easings, radii and
   the same "no shadow" rule.
   ========================================================================== */

:root {
	--xl: 1512px;
	--lg: 1280px;
	--md: 1024px;
	--sm: 768px;
	--xs: 584px;

	/* Arabic faces sit inside the stack rather than replacing it: their
	   unicode-range covers only Arabic, so Latin keeps the Latin faces. */
	--font-sans: "HelveticaProRoman", "IBM Plex Sans Arabic", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-mono: "TECONYAMONOVF", "Noto Kufi Arabic", "JetBrains Mono", ui-monospace, monospace;

	--font-scale: 1;
	/* The small size never drops below 16px: the scale shrinks it on narrower
	   screens, and 1rem is the floor at which the mono face still reads on a
	   phone. --font-xs is for tags, and sits on the same floor. */
	--font-sm: max(1rem, calc(1.0625rem * var(--font-scale)));
	--font-xs: 1rem;
	--font-sd: calc(1.25rem * var(--font-scale));
	--font-md: calc(1.5625rem * var(--font-scale));
	--font-lg: calc(1.875rem * var(--font-scale));

	/* Paragraph copy: 28px everywhere, phones included. Not scaled with
	   --font-scale on purpose: it is a fixed reading size, not a display one. */
	--font-p: 1.75rem;

	--pad: 1rem;
	--gap: 0.625rem;
	--nav-height: calc(var(--font-md) + var(--pad) * 2);

	/* The mono face carries a wght axis of 50–200. Anything above 200 clamps,
	   so weights are expressed through font-variation-settings, not font-weight. */
	--wght-light: 50;
	--wght-regular: 100;
	--wght-medium: 150;
	--wght-bold: 200;
}

@media only screen and (max-width: 1512px) { :root { --font-scale: 0.95; } }
@media only screen and (max-width: 1024px) { :root { --font-scale: 0.9; } }
@media only screen and (max-width: 768px)  { :root { --font-scale: 0.8; } }
@media only screen and (max-width: 584px)  { :root { --pad: 0.5rem; --gap: 0.5rem; } }

:root {
	--white: #fdfdfd;
	--grey: #cecece;
	--ash: #858585;
	--coal: #1a1a1a;
	--black: #0f0f0f;
	--vanta: #000000;
	--blue: #0000ff;

	/* The accent lightened toward white. A literal value, not a color-mix():
	   canvas fillStyle cannot parse an unresolved color-mix() and silently
	   ignores it, which draws the ink in whatever colour was set before. */
	--blue-bright: #8b8bfe;
	--red: #d4373a;
	--transparent: transparent;

	--foreground: var(--grey);
	--foreground-dim: var(--ash);
	--foreground-dimmed: var(--coal);
	--background: var(--black);
	--accent: var(--blue);

	--ease-out: cubic-bezier(0, 1, 1, 1);
	--ease-out-expo: cubic-bezier(0, 1, 0, 1);
	--ease-in: cubic-bezier(1, 0, 1, 1);
	--ease-in-expo: cubic-bezier(1, 0, 1, 0);
	--ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);

	--border-radius: 0.1rem;
	--border-radius-text: 0.15rem;
	--box-shadow: none;
	--border-width: 1px;

	--duration-fast: 120ms;
	--duration-base: 320ms;
	--duration-slow: 800ms;
}

.theme--light {
	--foreground: var(--coal);
	--foreground-dim: var(--ash);
	--foreground-dimmed: var(--grey);
	--background: var(--white);
}

.theme--dark {
	--foreground: var(--grey);
	--foreground-dim: var(--ash);
	--foreground-dimmed: var(--coal);
	--background: var(--black);
}