/**
 * Başaranlar brand tokens.
 *
 * The six HEX values below are the Başaranlar palette: a graphite/neutral
 * system taken from the company's own identity (dark #313236, light grey
 * #EEEEEE, black text). Everything else in this file is derived from them.
 *
 * ---------------------------------------------------------------------------
 * ACCESSIBILITY NOTE (measured, not assumed)
 *
 * WCAG 2.1 AA needs 4.5:1 for normal-size text and 3:1 for large text and UI
 * components. Measured against Cloud (#EEEEEE):
 *
 *   Onyx      on Cloud       16.40:1  PASS
 *   Ink       on Cloud       11.04:1  PASS
 *   Graphite  on Cloud        7.20:1  PASS
 *   Steel     on Cloud        3.42:1  FAILS normal text, passes large/UI
 *   Cloud     on Graphite     7.20:1  PASS   <-- primary button
 *   Onyx      on Mist        13.45:1  PASS
 *   Mist      on Ink          9.05:1  PASS   <-- footer
 *
 * Unlike the olive palette this replaced, Graphite clears AA for normal text on
 * its own, so the primary button and body links need no compromise. The darker
 * derived steps are kept for hover/pressed states and for links on the Mist
 * surfaces, where they measure 8.72:1 (mist-100) and 7.71:1 (full Mist).
 *
 * Steel is the one value that does not clear AA for normal text; it is reserved
 * for large text, icons, rules and decoration, exactly as the accent it is.
 * --------------------------------------------------------------------------- */

:root {
	/* Mandated brand palette — exact values from the identity guide. */
	--basaranlar-graphite: #4B4E53;
	--basaranlar-ink: #313236;
	--basaranlar-mist: #D7D9DC;
	--basaranlar-steel: #7E8082;
	--basaranlar-cloud: #EEEEEE;
	--basaranlar-onyx: #101010;

	/* Derived, accessibility-safe shades. Same hue, darker value. */
	--basaranlar-graphite-700: #3A3D42; /* 9.40:1 on Cloud — hover-dark links, button fills */
	--basaranlar-graphite-800: #2A2C30; /* hover / pressed */
	--basaranlar-steel-700: #5E6166;  /* 5.36:1 on Cloud — accent text */

	/* Derived tints for surfaces and hairlines. */
	--basaranlar-mist-100: #E4E6E9;
	--basaranlar-mist-300: #D0D3D7;
	--basaranlar-hairline: rgba(49, 50, 54, 0.14);
	--basaranlar-overlay: rgba(16, 16, 16, 0.45);

	/* Semantic aliases. Components reference these, never raw brand names, so a
	   role can be re-pointed without touching every rule. */
	--basaranlar-bg: var(--basaranlar-cloud);
	--basaranlar-bg-alt: var(--basaranlar-mist-100);
	--basaranlar-bg-muted: var(--basaranlar-mist);
	--basaranlar-bg-inverse: var(--basaranlar-ink);

	--basaranlar-text: var(--basaranlar-onyx);
	--basaranlar-text-muted: #5C5F62;
	--basaranlar-text-inverse: var(--basaranlar-cloud);
	--basaranlar-heading: var(--basaranlar-ink);

	--basaranlar-link: var(--basaranlar-graphite-700);
	--basaranlar-link-hover: var(--basaranlar-steel-700);

	/* Graphite-700 links measure 4.37:1 on Mist — just under the 4.5 AA floor
	   for normal text. This darker step is 6.68:1 on sand-100 and 5.09:1 on full
	   Mist, so it clears AA on both sand surfaces. */
	--basaranlar-link-on-mist: #3A3D42;

	--basaranlar-cta-bg: var(--basaranlar-graphite-700);
	--basaranlar-cta-bg-hover: var(--basaranlar-graphite-800);
	--basaranlar-cta-text: var(--basaranlar-cloud);

	--basaranlar-focus: var(--basaranlar-steel-700);

	/* Typography */
	--basaranlar-font-heading: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
	--basaranlar-font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--basaranlar-font-arabic: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;

	/* The wordmark is uppercase with generous tracking; eyebrows echo it. */
	--basaranlar-tracking-eyebrow: 0.18em;
	--basaranlar-tracking-heading: -0.01em;

	/* Spacing scale — restraint and negative space are the brand (PRD 3.1). */
	--basaranlar-space-1: 0.5rem;
	--basaranlar-space-2: 1rem;
	--basaranlar-space-3: 2rem;
	--basaranlar-space-4: 4rem;
	--basaranlar-space-5: 6rem;
	--basaranlar-space-6: 8rem;

	--basaranlar-container: 1280px;
	--basaranlar-container-narrow: 760px;

	/* Minimal, near-flat surfaces. No heavy shadows — controlled contrast only. */
	--basaranlar-radius: 2px;
	--basaranlar-radius-lg: 4px;
	--basaranlar-shadow: 0 1px 2px rgba(16, 16, 16, 0.06), 0 8px 24px rgba(16, 16, 16, 0.05);

	--basaranlar-transition: 180ms ease;
}

/* Arabic swaps the body/heading stack; the rest of the system is unchanged. */
.basaranlar-lang-ar {
	--basaranlar-font-heading: var(--basaranlar-font-arabic);
	--basaranlar-font-body: var(--basaranlar-font-arabic);
	--basaranlar-tracking-eyebrow: 0; /* Arabic script must not be letter-spaced. */
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--basaranlar-transition: 0ms;
	}
}