/*
 * Design tokens — the only place raw values (colors, sizes, timings) live.
 *
 * Two layers:
 * 1. Palette tokens (--gb-color-*): raw values, each labelled with its status.
 * 2. Semantic tokens (--gb-bg, --gb-text, ...): what components use. Rebranding
 *    or adding a dark scheme later means remapping semantics, not editing components.
 */

:root {
	/* ---------- Palette ---------- */

	/* OFFICIAL — approved Growth Beginning primary turquoise. */
	--gb-color-turquoise: #00CABE;

	/*
	 * SAMPLED — measured from the company's official social posts (2026-10-04),
	 * pending the brand guide's exact values (decisions.md D-27).
	 * Navy is the dark scene background; orange is a SMALL accent only
	 * (start point, energy, tiny details) — never large areas, never body text.
	 */
	--gb-color-navy: #0C2342;
	--gb-color-orange: #FA5F1E;

	/*
	 * SAMPLED from the official logo files (2026-10-04): the printed logo's own
	 * colours. Since 2026-10-05 (owner: «لون البذرة لنفس لون الشعار والشرطة
	 * لنفس اللون الموجود ف اللوجو») the seed and the dash use them everywhere,
	 * not only in the favicon; the frame/arrow stay the official turquoise.
	 */
	--gb-color-logo-teal: #5BC0B8;
	--gb-color-logo-navy: #004888;
	--gb-color-logo-seed: #00A3C4;
	--gb-color-logo-seed: #00A3C4;

	/*
	 * SAMPLED from the company profile 2026 (pages 3, 5, 6): its pages fade
	 * from a lighter navy on one side to almost black on the other. Used by
	 * the «profile chapter» of the home page (About + Values, D-45).
	 */
	--gb-color-profile-light: #13325E;
	--gb-color-profile-deep: #030C15;
	--gb-color-profile-star: #E6F8FF;
	--gb-color-profile-glow: #39B6FF;

	/* Foundation neutrals (functional greys, not brand colors). */
	--gb-color-neutral-0: #FFFFFF;
	--gb-color-neutral-50: #F5F7F8;
	--gb-color-neutral-200: #DDE3E6;
	--gb-color-neutral-300: #B8C4CE;
	--gb-color-neutral-600: #56636C;

	/*
	 * Translucent tints of the OFFICIAL turquoise (rgb 0 202 190 = #00CABE).
	 * Written as rgb()/alpha rather than color-mix(): an unsupported color-mix()
	 * inside an SVG stop-color makes the gradient fall back to BLACK, whereas
	 * rgb()/alpha is universally supported.
	 */
	--gb-color-turquoise-a0: rgb(0 202 190 / 0);
	--gb-color-turquoise-a10: rgb(0 202 190 / 0.1);
	--gb-color-turquoise-a20: rgb(0 202 190 / 0.2);
	--gb-color-turquoise-a35: rgb(0 202 190 / 0.35);
	--gb-color-turquoise-a60: rgb(0 202 190 / 0.6);
	--gb-color-white-a35: rgb(255 255 255 / 0.35);
	/* Translucent tints of the sampled navy (rgb 12 35 66), for marks drawn on turquoise. */
	--gb-color-navy-a0: rgb(12 35 66 / 0);
	--gb-color-navy-a20: rgb(12 35 66 / 0.2);
	--gb-color-navy-a60: rgb(12 35 66 / 0.6);
	/* Translucent tints of the logo's seed (rgb 0 163 196 = #00A3C4). */
	--gb-color-seed-a0: rgb(0 163 196 / 0);
	--gb-color-seed-a35: rgb(0 163 196 / 0.35);
	/* Translucent tints of the sampled orange (rgb 250 95 30). */
	--gb-color-orange-a0: rgb(250 95 30 / 0);
	--gb-color-orange-a35: rgb(250 95 30 / 0.35);
	--gb-color-neutral-900: #11181D;

	/* ---------- Semantic colors ---------- */

	--gb-bg: var(--gb-color-neutral-0);
	--gb-surface: var(--gb-color-neutral-50);
	--gb-surface-inverse: var(--gb-color-navy);
	--gb-text: var(--gb-color-neutral-900);
	--gb-text-muted: var(--gb-color-neutral-600);
	--gb-text-inverse: var(--gb-color-neutral-0);
	--gb-primary: var(--gb-color-turquoise);
	/*
	 * Turquoise on white is ~2:1 contrast — too low for text. Text placed ON a
	 * turquoise surface therefore uses the dark neutral, and links use the body
	 * text color with a turquoise underline instead of turquoise text.
	 */
	--gb-primary-contrast: var(--gb-color-neutral-900);
	--gb-accent: var(--gb-color-orange);
	/*
	 * The seed (the logo's point) wherever it appears: the journey's start
	 * point, the seed that travels (about, wheel, service hero), the small
	 * start-point dots. The logo's own colour (2026-10-05). Orange stays the
	 * small accent for everything that is not the seed (wheel ray, energy,
	 * details inside the service tools).
	 */
	--gb-seed: var(--gb-color-logo-seed);
	--gb-seed-glow: var(--gb-color-seed-a35);
	/*
	 * The small dot before a section's eyebrow («الخطوة التالية») and before
	 * a chapter's or a topic's title: one of the site's light orange touches
	 * (owner, 2026-10-06), with the buttons under the pointer. Not a seed of
	 * the logo — the logo never turns orange.
	 */
	--gb-dot: var(--gb-accent);
	--gb-border: var(--gb-color-neutral-200);
	--gb-link: var(--gb-text);
	--gb-link-decoration: var(--gb-primary);
	/* Dark ring + turquoise halo stays visible on light, dark and turquoise backgrounds. */
	--gb-focus: var(--gb-color-neutral-900);
	--gb-focus-halo: var(--gb-color-turquoise);
	/* For dark/inverse surfaces: the dark ring would disappear there. */
	--gb-focus-inverse: var(--gb-color-neutral-0);

	/* ---------- Scene (cinematic surfaces: home Hero + Seed Journey) ---------- */

	/* Built on the SAMPLED navy: confirming/replacing navy re-themes every scene from here. */
	--gb-scene-bg: var(--gb-color-navy);
	--gb-scene-text: var(--gb-color-neutral-0);
	--gb-scene-text-muted: var(--gb-color-neutral-300);
	--gb-scene-glow: var(--gb-color-turquoise-a10);

	/*
	 * The profile's page background: dark side under the text (reading start),
	 * lighter side at the reading end where the picture sits, as in the
	 * profile. --gb-profile-bg-dir flips with the direction (see below).
	 */
	--gb-profile-bg-dir: to right;
	--gb-profile-bg: linear-gradient(var(--gb-profile-bg-dir), var(--gb-color-profile-deep) 0%, var(--gb-color-profile-light) 100%);

	/* Growth Line / Seed Journey visual language. Stroke widths are in SVG user units. */
	--gb-growth-line-color: var(--gb-color-turquoise);
	--gb-growth-line-width: 4px;
	--gb-growth-line-glow: var(--gb-color-turquoise-a20);
	--gb-growth-line-glow-width: 14px;
	--gb-root-color: var(--gb-color-turquoise-a60);
	--gb-root-width: 2.5px;
	--gb-rootlet-color: var(--gb-color-turquoise-a35);
	--gb-rootlet-width: 1.5px;
	/* Growth point (components/growth-point): the start of the journey = the logo's seed. */
	--gb-point-color: var(--gb-seed);
	--gb-point-glow: var(--gb-color-seed-a35);
	--gb-point-glow-clear: var(--gb-color-seed-a0);
	--gb-point-ring: var(--gb-color-turquoise-a60);
	--gb-point-highlight: rgb(255 255 255 / 0.6);
	/* Foundation nodes at the end of each line (clickable concepts). */
	--gb-node-color: var(--gb-color-turquoise);

	/*
	 * Brand mark (official symbol rebuilt as SVG, D-36). Frame + arrow use the
	 * primary turquoise so the Growth Line flows into the arrow in one colour.
	 * The dash and the seed carry the logo's own colours on every background
	 * (owner, 2026-10-05; until then the dash was light on dark scenes and the
	 * seed orange).
	 */
	--gb-mark-stroke: var(--gb-color-turquoise);
	--gb-mark-dash: var(--gb-color-logo-navy);
	--gb-mark-sheen: var(--gb-color-white-a35);
	/* The seed on the dash = the journey's start point (--gb-seed). */
	--gb-mark-point: var(--gb-seed);
	/*
	 * Energy that races up the arrow while it "charges" (concept portal):
	 * white light, like the heartbeat's light — the logo itself carries only
	 * its own colours (owner, 2026-10-05; it was orange).
	 */
	--gb-energy: var(--gb-color-neutral-0);

	/* Marks text that is a temporary placeholder awaiting owner copy. */
	--gb-placeholder-mark: var(--gb-color-turquoise-a60);

	/* ---------- Spacing (fluid between ~375px and ~1920px viewports) ---------- */

	--gb-space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.3125rem);
	--gb-space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);
	--gb-space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.9375rem);
	--gb-space-s: clamp(1rem, 0.93rem + 0.35vw, 1.25rem);
	--gb-space-m: clamp(1.5rem, 1.39rem + 0.5vw, 1.875rem);
	--gb-space-l: clamp(2rem, 1.85rem + 0.7vw, 2.5rem);
	--gb-space-xl: clamp(3rem, 2.78rem + 1vw, 3.75rem);
	--gb-space-2xl: clamp(4rem, 3.4rem + 2.6vw, 6rem);
	--gb-space-3xl: clamp(6rem, 5rem + 4.3vw, 9rem);

	/* ---------- Radius ---------- */

	--gb-radius-s: 0.25rem;
	--gb-radius-m: 0.5rem;
	--gb-radius-l: 1rem;
	--gb-radius-pill: 999px;

	/* ---------- Containers ---------- */

	--gb-gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
	--gb-container: 80rem;
	--gb-container-wide: 100rem;
	--gb-container-prose: 42rem;

	/* ---------- Type scale (fluid; ~375px → ~1920px) ---------- */

	--gb-step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
	--gb-step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	--gb-step-1: clamp(1.2rem, 1.12rem + 0.35vw, 1.4rem);
	--gb-step-2: clamp(1.44rem, 1.3rem + 0.6vw, 1.75rem);
	--gb-step-3: clamp(1.73rem, 1.5rem + 1vw, 2.2rem);
	--gb-step-4: clamp(2.07rem, 1.7rem + 1.6vw, 2.75rem);
	--gb-step-5: clamp(2.49rem, 1.9rem + 2.6vw, 3.8rem);
	/* Hero display size only. */
	--gb-step-6: clamp(2.9rem, 1.95rem + 4vw, 5.25rem);

	/* Arabic script needs taller lines than Latin for diacritics and descenders. */
	--gb-leading-body: 1.75;
	--gb-leading-heading: 1.3;

	/* ---------- Motion ---------- */

	--gb-duration-fast: 150ms;
	--gb-duration-base: 250ms;
	--gb-duration-slow: 500ms;
	--gb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--gb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	/* Slow start, long settle: reads as growth rather than mechanical movement. */
	--gb-ease-organic: cubic-bezier(0.45, 0, 0.15, 1);

	/* Intro budgets per experience level (scope: always under 4 seconds). */
	--gb-duration-intro: 3000ms;
	--gb-duration-intro-optimized: 2400ms;
	--gb-duration-intro-light: 1200ms;
	/* LIGHT-level one-shot reveals. */
	--gb-duration-reveal: 600ms;

	/* Concept portal: how long the arrow "charges" before the content appears. */
	--gb-duration-charge: 760ms;
	--gb-duration-charge-optimized: 560ms;
	--gb-duration-charge-light: 320ms;

	/* Scroll distance of the sticky Seed Journey (FULL / OPTIMIZED). */
	--gb-journey-length-full: 420vh;
	--gb-journey-length-optimized: 300vh;

	/* ---------- Direction ---------- */

	/*
	 * Sign of the inline axis: 1 in LTR, -1 in RTL. Only for the rare cases a
	 * physical value is unavoidable (e.g. a translate() that centres a box on a
	 * point given by a logical inset). Everything else uses logical properties.
	 */
	--gb-dir: 1;

	/* ---------- Layers ---------- */

	--gb-z-header: 100;
	--gb-z-skip-link: 1000;
}

[dir="rtl"] {
	--gb-dir: -1;
	--gb-profile-bg-dir: to left;
}

/* Collapsing timings at the token level means any component using them is
   automatically still for users who asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--gb-duration-fast: 0ms;
		--gb-duration-base: 0ms;
		--gb-duration-slow: 0ms;
		--gb-duration-intro: 0ms;
		--gb-duration-intro-optimized: 0ms;
		--gb-duration-intro-light: 0ms;
		--gb-duration-reveal: 0ms;
		--gb-duration-charge: 0ms;
		--gb-duration-charge-optimized: 0ms;
		--gb-duration-charge-light: 0ms;
	}
}