/* RetainrWorks design tokens — from design_handoff_retainrworks_site_admin/tokens. */
/* RetainrWorks color tokens. Dark is the default theme; light is a scoped override. */
:root {
  /* Base palette */
  --rw-ink-950: #0E1114;
  --rw-ink-900: #141920;
  --rw-ink-850: #1A2028;
  --rw-ink-100: #EEF1F4;
  --rw-ink-300: #A3ACB6;
  --rw-paper-50: #F3F4F5;
  --rw-paper-100: #ECEEF0;
  --rw-paper-0: #FFFFFF;
  --rw-paper-900: #121519;
  --rw-paper-600: #565E68;
  --rw-blue-300: #6E9BF0;
  --rw-blue-500: #2F6FE0;
  --rw-blue-600: #2459B8;
  --rw-green-500: oklch(0.74 0.14 155);
  --rw-red-500: oklch(0.70 0.17 25);
  --rw-amber-400: oklch(0.82 0.12 75);

  /* Semantic: surfaces */
  --bg: var(--rw-ink-950);
  --surface: var(--rw-ink-900);
  --raise: var(--rw-ink-850);
  /* Semantic: text */
  --text: var(--rw-ink-100);
  --muted: var(--rw-ink-300);
  /* Semantic: lines */
  --divider: rgba(238,241,244,.12);
  --mark: rgba(238,241,244,.5);
  --grid: rgba(238,241,244,.055);
  --stripe: rgba(238,241,244,.07);
  /* Semantic: accent */
  --accent: var(--rw-blue-500);
  --accent-hi: var(--rw-blue-300);
  --accent-press: var(--rw-blue-600);
  --on-accent: #FFFFFF;
  --accent-tint: color-mix(in srgb, var(--rw-blue-500) 16%, transparent);
  /* Semantic: status */
  --ok: var(--rw-green-500);
  --err: var(--rw-red-500);
  --err-tint: color-mix(in srgb, var(--rw-red-500) 10%, transparent);
  /* Annotation only (library labels in design files, never in product UI) */
  --lib: var(--rw-amber-400);
  --lib-b: oklch(0.82 0.12 75 / .45);
}
[data-theme="light"] {
  --bg: var(--rw-paper-50);
  --surface: var(--rw-paper-100);
  --raise: var(--rw-paper-0);
  --text: var(--rw-paper-900);
  --muted: var(--rw-paper-600);
  --divider: rgba(18,21,25,.14);
  --mark: rgba(18,21,25,.5);
  --grid: rgba(18,21,25,.06);
  --stripe: rgba(18,21,25,.07);
  --accent-hi: var(--rw-blue-500);
}
/* Type tokens. Latin: Barlow Condensed display + Barlow body. Arabic: IBM Plex Sans Arabic for both. */
:root {
  --font-display-latin: "Barlow Condensed", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body-latin: "Barlow", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;
  --font-logo: "Manrope", system-ui, sans-serif;

  /* Active (language-aware) aliases — always style with these */
  --fh: var(--font-display-latin);
  --fb: var(--font-body-latin);
  --mono: var(--font-mono);
  --logo: var(--font-logo);

  /* Scale */
  --hero: clamp(48px, 8.2vw, 124px);
  --h2: clamp(36px, 4.8vw, 64px);
  --h3: clamp(24px, 2.2vw, 30px);
  --text-lead: clamp(16px, 1.35vw, 19px);
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 13px;
  --text-mono: 12px;
  --text-micro: 11px;

  --weight-display: 600;
  --weight-body: 400;
  --lh-h: .95;
  --lh-body: 1.6;
  --ls-h: -0.012em;
  --ls-btn: .02em;
  --ls-mono: .08em;
}
[data-lang="ar"], [lang="ar"] {
  --fh: var(--font-arabic);
  --fb: var(--font-arabic);
  --hero: clamp(40px, 6.2vw, 92px);
  --h2: clamp(30px, 3.8vw, 50px);
  --h3: clamp(22px, 2vw, 27px);
  --lh-h: 1.22;
  --ls-h: 0;
  --ls-btn: 0;
  --ls-mono: 0;
}
/* Spacing, layout, radii, borders, control sizes, elevation. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-section: clamp(72px, 9vw, 120px);

  --container: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --grid-cell: 72px;

  /* Square by default. Pill only for status dots. */
  --radius-0: 0px;
  --radius-dot: 999px;

  --border-hair: 1px;

  --control-sm: 38px;
  --control-md: 44px;
  --control-input: 46px;
  --control-lg: 52px;

  --shadow-pop: 0 12px 32px rgba(0,0,0,.35);
}
/* Motion: quick, eased-out, no bounces. */
:root {
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;
}
@keyframes rw-shimmer { 0% { background-position: 160% 0 } 60%, 100% { background-position: -60% 0 } }
@keyframes rw-spin { to { transform: rotate(360deg) } }
@keyframes rw-marquee { to { transform: translateX(-50%) } }
@keyframes rw-beam { 0% { transform: translateY(-180px) } 100% { transform: translateY(1100px) } }
@keyframes rw-toast-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
/* Landing-only: kicker casing differs by language. */
:root { --tt: uppercase; --ls-k: .1em; }
[data-lang="ar"] { --tt: none; --ls-k: 0; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body { color: var(--text); font-family: var(--fb); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-hi); text-decoration: none; }
a:hover { color: var(--text); }
::selection { background: rgba(47,111,224,.35); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select, textarea, button { font: inherit; color: inherit; }
select option { background: var(--raise); color: var(--text); }
button { cursor: pointer; }
button:disabled { cursor: default; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Logo: retainr•works — always Latin, LTR */
.logo { display: inline-flex; align-items: center; direction: ltr; font-family: var(--logo); font-weight: 800; font-size: 23px; letter-spacing: -0.045em; line-height: 1; color: var(--text); }
.logo:hover { color: var(--text); }
.logo-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin: 0 3px; align-self: flex-end; margin-bottom: 4px; }
.logo-works { font-weight: 500; color: var(--muted); letter-spacing: -0.02em; }

/* Shared keyframes */
@keyframes rwToast { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes rwBeamX { 0% { transform: translateX(-200px) } 100% { transform: translateX(1900px) } }
@keyframes rwSpin { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}