/* Estate token layer (wordpress/estate/layer). Every colour, font, radius, space and motion value the estate theme
   and the estate plugins' screens use on this network comes from the --es-* tokens below. No component rule carries a
   value of its own.

   PLACEHOLDER, NOT A DESIGN. Owner direction 2026-10-29: the Nexus look and the D28 Nexus Standards colours are not
   ours, and a new design system is being made (content/site/design-system/, the "Design system v4 tokens" block of
   platform.css). Until it lands, each --es-* token reads its design-system token (--ds-*) and falls back to a neutral
   value taken from the black and white base: ink, canvas and greys only, no hue, no gradient. When the design system
   sets --ds-* tokens, they win here without any other change. The mapping is in docs/site/ESTATE.md. */

:root {
  /* Surfaces and text, light */
  --es-canvas: var(--ds-canvas, #ffffff);
  --es-surface: var(--ds-surface, #ffffff);
  --es-raised: var(--ds-raised, #f6f6f6);
  --es-muted: var(--ds-muted, #f0f0f0);
  --es-hover: var(--ds-hover, #ebebeb);
  --es-ink: var(--ds-ink, #000000);
  --es-ink-2: var(--ds-ink-2, #3d3d3d);
  --es-ink-3: var(--ds-ink-3, #5c5c5c);
  --es-line: var(--ds-line, rgba(0, 0, 0, 0.12));
  --es-line-strong: var(--ds-line-strong, rgba(0, 0, 0, 0.28));
  /* The one primary action: inverted ink */
  --es-primary: var(--ds-primary, #000000);
  --es-primary-ink: var(--ds-primary-ink, #ffffff);
  --es-primary-hover: var(--ds-primary-hover, #262626);
  /* Accent: placeholder ink until the design system names the community colours */
  --es-accent: var(--ds-accent, #000000);
  --es-accent-soft: var(--ds-accent-soft, rgba(0, 0, 0, 0.06));
  --es-rule: var(--ds-rule, var(--es-ink));
  --es-series-1: var(--ds-series-1, #000000);
  --es-series-2: var(--ds-series-2, #4d4d4d);
  --es-series-3: var(--ds-series-3, #808080);
  --es-series-4: var(--ds-series-4, #b3b3b3);
  /* States: a word always carries them; the colour only marks */
  --es-ok: var(--ds-ok, #1d6b35);
  --es-warn: var(--ds-warn, #7a5300);
  --es-crit: var(--ds-crit, #b3261e);
  --es-info: var(--ds-info, #1f4f8f);
  --es-focus: var(--ds-focus, #000000);
  /* Type: the network's self-hosted faces (the Site Kit's fonts.css); per script below */
  --es-font: var(--ds-font, "IBM Plex Sans", system-ui, sans-serif);
  --es-font-head: var(--ds-font-head, var(--es-font));
  --es-font-mono: var(--ds-font-mono, "IBM Plex Mono", ui-monospace, monospace);
  --es-text-xs: var(--ds-text-xs, 0.75rem);
  --es-text-sm: var(--ds-text-sm, 0.875rem);
  --es-text-md: var(--ds-text-md, 1rem);
  --es-text-lg: var(--ds-text-lg, 1.25rem);
  --es-text-xl: var(--ds-text-xl, 1.75rem);
  --es-text-2xl: var(--ds-text-2xl, 2.25rem);
  --es-leading: var(--ds-leading, 1.55);
  --es-leading-tight: var(--ds-leading-tight, 1.2);
  --es-weight-head: var(--ds-weight-head, 500);
  /* Shape and space: buttons keep the network's 5 px */
  --es-radius-button: var(--ds-radius-button, 5px);
  --es-radius: var(--ds-radius, 5px);
  --es-radius-chip: var(--ds-radius-chip, 4px);
  --es-space-1: var(--ds-space-1, 4px);
  --es-space-2: var(--ds-space-2, 8px);
  --es-space-3: var(--ds-space-3, 12px);
  --es-space-4: var(--ds-space-4, 16px);
  --es-space-6: var(--ds-space-6, 24px);
  --es-space-8: var(--ds-space-8, 32px);
  --es-space-12: var(--ds-space-12, 48px);
  --es-target: var(--ds-target, 44px);
  --es-shadow: var(--ds-shadow, none);
  /* Motion */
  --es-motion-fast: var(--ds-motion-fast, 120ms);
  --es-motion: var(--ds-motion, 200ms);
  --es-ease: var(--ds-ease, cubic-bezier(0.2, 0, 0, 1));
  color-scheme: light;
}

/* Dark: the BuddyX Pro switch decides (html[data-bx-mode], dark-mode classes); System follows the reader's device. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bx-mode="light"]):not(.light-mode) {
    --es-canvas: var(--ds-canvas-dark, #000000); --es-surface: var(--ds-surface-dark, #0a0a0a); --es-raised: var(--ds-raised-dark, #141414);
    --es-muted: var(--ds-muted-dark, #141414); --es-hover: var(--ds-hover-dark, #1f1f1f);
    --es-ink: var(--ds-ink-dark, #ffffff); --es-ink-2: var(--ds-ink-2-dark, #d4d4d4); --es-ink-3: var(--ds-ink-3-dark, #a3a3a3);
    --es-line: var(--ds-line-dark, rgba(255, 255, 255, 0.14)); --es-line-strong: var(--ds-line-strong-dark, rgba(255, 255, 255, 0.32));
    --es-primary: var(--ds-primary-dark, #ffffff); --es-primary-ink: var(--ds-primary-ink-dark, #000000); --es-primary-hover: var(--ds-primary-hover-dark, #e0e0e0);
    --es-accent: var(--ds-accent-dark, #ffffff); --es-accent-soft: var(--ds-accent-soft-dark, rgba(255, 255, 255, 0.08));
    --es-series-1: var(--ds-series-1-dark, #ffffff); --es-series-2: var(--ds-series-2-dark, #bfbfbf); --es-series-3: var(--ds-series-3-dark, #8c8c8c); --es-series-4: var(--ds-series-4-dark, #595959);
    --es-ok: var(--ds-ok-dark, #81c995); --es-warn: var(--ds-warn-dark, #fdd663); --es-crit: var(--ds-crit-dark, #f28b82); --es-info: var(--ds-info-dark, #8ab4f8);
    --es-focus: var(--ds-focus-dark, #ffffff);
    color-scheme: dark;
  }
}
html[data-bx-mode="dark"], html.dark-mode, html:has(body.dark-mode), html:has(body.buddyx-dark-theme) {
  --es-canvas: var(--ds-canvas-dark, #000000); --es-surface: var(--ds-surface-dark, #0a0a0a); --es-raised: var(--ds-raised-dark, #141414);
  --es-muted: var(--ds-muted-dark, #141414); --es-hover: var(--ds-hover-dark, #1f1f1f);
  --es-ink: var(--ds-ink-dark, #ffffff); --es-ink-2: var(--ds-ink-2-dark, #d4d4d4); --es-ink-3: var(--ds-ink-3-dark, #a3a3a3);
  --es-line: var(--ds-line-dark, rgba(255, 255, 255, 0.14)); --es-line-strong: var(--ds-line-strong-dark, rgba(255, 255, 255, 0.32));
  --es-primary: var(--ds-primary-dark, #ffffff); --es-primary-ink: var(--ds-primary-ink-dark, #000000); --es-primary-hover: var(--ds-primary-hover-dark, #e0e0e0);
  --es-accent: var(--ds-accent-dark, #ffffff); --es-accent-soft: var(--ds-accent-soft-dark, rgba(255, 255, 255, 0.08));
  --es-series-1: var(--ds-series-1-dark, #ffffff); --es-series-2: var(--ds-series-2-dark, #bfbfbf); --es-series-3: var(--ds-series-3-dark, #8c8c8c); --es-series-4: var(--ds-series-4-dark, #595959);
  --es-ok: var(--ds-ok-dark, #81c995); --es-warn: var(--ds-warn-dark, #fdd663); --es-crit: var(--ds-crit-dark, #f28b82); --es-info: var(--ds-info-dark, #8ab4f8);
  --es-focus: var(--ds-focus-dark, #ffffff);
  color-scheme: dark;
}
html[data-bx-mode="light"], html.light-mode { color-scheme: light; }

/* Type per script, on WordPress screens as on built pages (the faces are the Site Kit's, self-hosted, SIL OFL). */
:root:lang(fa), :root:lang(prs), :root:lang(azb), :root:lang(ar), :root:lang(ur) { --es-font: var(--ds-font-arabic, "Vazirmatn", "Estedad", system-ui, sans-serif); --es-font-head: var(--ds-font-arabic-head, "Estedad", "Vazirmatn", system-ui, sans-serif); }
:root:lang(ckb), :root:lang(sdh), :root:lang(hac), :root:lang(lki), :root:lang(kmr-Arab) { --es-font: var(--ds-font-kurdish, "Estedad", "Vazirmatn", system-ui, sans-serif); --es-font-head: var(--es-font); }
:lang(ckb), :lang(sdh), :lang(hac) { font-family: "Estedad", "Vazirmatn", system-ui, sans-serif; }

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