/* Design tokens: the one place colour, type, space and shape are decided.

   The brand colour is a single hue and chroma. The whole scale, the tinted greys included, is
   derived from them in OKLCH, so changing --hue and --chroma re-colours everything at once.
   Colours that differ between light and dark are light-dark() pairs; html[data-theme] picks a
   scheme, and without it the system decides. */

:root {
  color-scheme: light dark;

  /* The brand colour. Everything below follows these two. */
  --hue: 188;
  --chroma: 0.095;

  --brand-50: oklch(0.975 calc(var(--chroma) * 0.14) var(--hue));
  --brand-100: oklch(0.95 calc(var(--chroma) * 0.3) var(--hue));
  --brand-200: oklch(0.9 calc(var(--chroma) * 0.5) var(--hue));
  --brand-300: oklch(0.83 calc(var(--chroma) * 0.72) var(--hue));
  --brand-400: oklch(0.73 calc(var(--chroma) * 0.92) var(--hue));
  --brand-500: oklch(0.63 var(--chroma) var(--hue));
  --brand-600: oklch(0.53 var(--chroma) var(--hue));
  --brand-700: oklch(0.45 calc(var(--chroma) * 0.92) var(--hue));
  --brand-800: oklch(0.37 calc(var(--chroma) * 0.78) var(--hue));
  --brand-900: oklch(0.29 calc(var(--chroma) * 0.6) var(--hue));

  /* Greys: the brand hue at a whisper, so they feel warm rather than dead. */
  --n-0: oklch(1 0 0);
  --n-50: oklch(0.982 calc(var(--chroma) * 0.05) var(--hue));
  --n-100: oklch(0.962 calc(var(--chroma) * 0.07) var(--hue));
  --n-200: oklch(0.925 calc(var(--chroma) * 0.09) var(--hue));
  --n-300: oklch(0.87 calc(var(--chroma) * 0.1) var(--hue));
  --n-400: oklch(0.72 calc(var(--chroma) * 0.12) var(--hue));
  --n-500: oklch(0.55 calc(var(--chroma) * 0.14) var(--hue));
  --n-600: oklch(0.47 calc(var(--chroma) * 0.15) var(--hue));
  --n-700: oklch(0.38 calc(var(--chroma) * 0.15) var(--hue));
  --n-800: oklch(0.28 calc(var(--chroma) * 0.14) var(--hue));
  --n-900: oklch(0.2 calc(var(--chroma) * 0.12) var(--hue));
  --n-950: oklch(0.15 calc(var(--chroma) * 0.1) var(--hue));

  /* Surfaces, lines and text. */
  --bg: light-dark(var(--n-50), oklch(0.165 calc(var(--chroma) * 0.12) var(--hue)));
  --surface: light-dark(var(--n-0), oklch(0.205 calc(var(--chroma) * 0.13) var(--hue)));
  --surface-2: light-dark(var(--n-100), oklch(0.24 calc(var(--chroma) * 0.14) var(--hue)));
  --surface-3: light-dark(var(--n-200), oklch(0.285 calc(var(--chroma) * 0.15) var(--hue)));
  --border: light-dark(var(--n-200), oklch(0.3 calc(var(--chroma) * 0.14) var(--hue)));
  --border-strong: light-dark(var(--n-300), oklch(0.39 calc(var(--chroma) * 0.15) var(--hue)));
  --text: light-dark(var(--n-900), oklch(0.96 calc(var(--chroma) * 0.05) var(--hue)));
  --text-2: light-dark(var(--n-600), oklch(0.77 calc(var(--chroma) * 0.1) var(--hue)));
  --text-3: light-dark(var(--n-500), oklch(0.64 calc(var(--chroma) * 0.12) var(--hue)));
  --overlay: light-dark(oklch(0.2 0.02 var(--hue) / 0.42), oklch(0 0 0 / 0.6));

  /* The brand in use: actions, soft backgrounds, text on those, links, the focus ring. */
  --brand: light-dark(var(--brand-600), var(--brand-400));
  --brand-hover: light-dark(var(--brand-700), var(--brand-300));
  --on-brand: light-dark(oklch(1 0 0), oklch(0.2 0.03 var(--hue)));
  --brand-soft: light-dark(var(--brand-50), oklch(0.255 calc(var(--chroma) * 0.3) var(--hue)));
  --brand-soft-2: light-dark(var(--brand-100), oklch(0.31 calc(var(--chroma) * 0.42) var(--hue)));
  --brand-ink: light-dark(var(--brand-800), var(--brand-200));
  --link: light-dark(var(--brand-700), var(--brand-300));
  --ring: oklch(0.63 var(--chroma) var(--hue) / 0.42);

  /* Status roles: solid (dots, bars), soft (backgrounds) and ink (text on soft). Fixed hues, so
     "waiting" never turns into the brand colour whatever the brand is. */
  --ok: light-dark(oklch(0.6 0.14 155), oklch(0.76 0.15 155));
  --ok-soft: light-dark(oklch(0.962 0.04 155), oklch(0.28 0.055 155));
  --ok-ink: light-dark(oklch(0.4 0.1 155), oklch(0.86 0.1 155));
  --warn: light-dark(oklch(0.74 0.15 75), oklch(0.8 0.15 80));
  --warn-soft: light-dark(oklch(0.968 0.05 85), oklch(0.3 0.055 75));
  --warn-ink: light-dark(oklch(0.45 0.1 65), oklch(0.88 0.1 85));
  --danger: light-dark(oklch(0.58 0.2 25), oklch(0.72 0.17 25));
  --danger-soft: light-dark(oklch(0.962 0.03 20), oklch(0.29 0.07 25));
  --danger-ink: light-dark(oklch(0.46 0.17 25), oklch(0.87 0.09 20));
  --on-danger: light-dark(oklch(1 0 0), oklch(0.2 0.04 25));
  --info: light-dark(oklch(0.58 0.15 250), oklch(0.74 0.12 250));
  --info-soft: light-dark(oklch(0.962 0.025 250), oklch(0.29 0.05 250));
  --info-ink: light-dark(oklch(0.44 0.13 255), oklch(0.86 0.07 250));
  --human: light-dark(oklch(0.56 0.16 300), oklch(0.74 0.13 300));
  --human-soft: light-dark(oklch(0.962 0.03 300), oklch(0.29 0.06 300));
  --human-ink: light-dark(oklch(0.44 0.15 300), oklch(0.87 0.08 300));

  /* Type. Plex Sans and Plex Sans Arabic are drawn as a pair, so a line that mixes scripts keeps
     one voice. Comfortaa, round and even like the logo's letters, is for page titles and big numbers
     only. It is wide, so display sizes are smaller than a narrow serif's would be. */
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, "Segoe UI", sans-serif;
  --font-display: "Comfortaa", "IBM Plex Sans Arabic", system-ui, "Segoe UI", sans-serif;
  --fw-display: 700;
  --font-mono:
    "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  /* Negative tracking breaks the joins in Arabic, so right-to-left sets both to zero. */
  --tracking-tight: -0.012em;
  --tracking-caps: 0.07em;

  /* Space (a 4 px base), shape, depth, motion. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --r-xs: 0.25rem;
  --r-sm: 0.375rem;
  --r-md: 0.625rem;
  --r-lg: 1rem;
  --r-xl: 1.375rem;
  --shadow-c: light-dark(oklch(0.3 0.04 var(--hue) / 0.13), oklch(0 0 0 / 0.5));
  --shadow-xs: 0 1px 2px var(--shadow-c);
  --shadow-sm: 0 1px 3px var(--shadow-c), 0 1px 2px var(--shadow-c);
  --shadow-md: 0 8px 20px -6px var(--shadow-c), 0 2px 4px var(--shadow-c);
  --shadow-lg: 0 24px 48px -14px var(--shadow-c), 0 6px 14px -4px var(--shadow-c);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
}

:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Right-to-left: a touch larger and looser, no tracking. */
:root[dir="rtl"] {
  --fs-xs: 0.78rem;
  --fs-sm: 0.85rem;
  --fs-base: 0.9375rem;
  --tracking-tight: 0;
  --tracking-caps: 0;
}