/* The design tokens of the client portal (login.html), /editors/ and /admin/: colours for both themes, fonts and the
   size scales. Loaded first, before every other stylesheet, so a page can still override a token with its own :root rule.
   Dark is the default; [data-theme="light"] on <html> switches. Aspect (aspect/styles/base.css) is its own project and
   keeps its own copy; the landing pages (index.html, pricing.html, waitlist.html, 404.html) have a look of their own. */
:root{
  color-scheme:dark;
  --brand-white:#FFFFFF; --brand-charcoal:#181818;
  --bg:#181b22; --panel:#222630; --panel-2:#2c313d; --line:#3c4350;
  --text:#F5F7FA; --muted:#BDC5D1; --dim:#969FAE;

  /* Accent surfaces must be visible against --bg in both themes. */
  --accent:#F0F0F0; --accent-2:#D4D4D4;
  --on-accent:var(--brand-charcoal); --accent-ink:var(--brand-white);
  --accent-soft:rgba(255,255,255,.12);
  --focus:#93A0A8;
  --focus-soft:rgba(147,160,168,.25);

  --ok:#E6E6E6; --warn:#9A9A9A;

  /* Feedback tones: the UI is greyscale, so these are the only place red/green/amber appear. */
  --success-text:#91deb1; --success-bg:#1c4436; --success-border:#2d6952;
  --error-text:#ffb3bc; --error-bg:#4c3036; --error-border:#79505a;
  --warning-text:#f0ca81; --warning-bg:#493b24; --warning-border:#79603a;
  --icon-error:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12A10 10 0 0 1 2 12A10 10 0 0 1 22 12ZM13.13 7A1.13 1.13 0 0 0 10.88 7L10.88 13A1.13 1.13 0 0 0 13.13 13L13.13 7ZM13.3 17A1.3 1.3 0 0 0 10.7 17A1.3 1.3 0 0 0 13.3 17Z'/%3E%3C/svg%3E");
  --icon-success:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2m-1.94 14.23c.41.37 1.04.34 1.42-.06l5.75-6.25c.37-.41.34-1.04-.06-1.42s-1.04-.34-1.42.06l-5.07 5.52-2.51-2.32c-.41-.38-1.04-.35-1.42.05-.37.41-.34 1.04.06 1.41z'/%3E%3C/svg%3E");
  --icon-warning:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.7 4.3A1.5 1.5 0 0 1 13.3 4.3L21.23 18.26A1.5 1.5 0 0 1 19.92 20.5L4.08 20.5A1.5 1.5 0 0 1 2.77 18.26ZM13.13 9A1.13 1.13 0 0 0 10.88 9L10.88 14.25A1.13 1.13 0 0 0 13.13 14.25L13.13 9ZM13.3 17.25A1.3 1.3 0 0 0 10.7 17.25A1.3 1.3 0 0 0 13.3 17.25Z'/%3E%3C/svg%3E");

  /* Fonts: define once so var(--font-heading) / var(--font-body) resolve everywhere. */
  --font-heading:'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,sans-serif;

  /* Pill buttons: dark enough for white icons in both themes. */
  --pill-bg:#3A3C3E; --pill-bg-hover:#4A4D50;
  --pill-bg-linked:#356B47; --pill-bg-linked-hover:#B83B3B;

  /* Scales for the shared components (controls.css), from UI-UX-DESIGN.md: spacing and radii on the 4 px grid,
     at most six text sizes and two weights. Same in both themes. */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  --text-xs:12px; --text-sm:14px; --text-md:16px; --text-lg:20px; --text-xl:24px; --text-2xl:32px;
  --weight-regular:400; --weight-strong:600;
  /* Hit area of a control: 36 px with a pointer, 44 px on touch (set below). */
  --control-h:36px;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F7F7F5; --panel:var(--brand-white); --panel-2:#F0F0F0; --line:#DCDCDC;
  --text:var(--brand-charcoal); --muted:#4A4A4A; --dim:#5C5C5C;

  --accent:#181818; --accent-2:#2B2B2B;
  --on-accent:var(--brand-white); --accent-ink:var(--brand-charcoal);
  --accent-soft:#EDEDED;
  --focus:#7D8B94;
  --focus-soft:rgba(125,139,148,.22);

  --ok:#181818; --warn:#5E5E5E;
  --success-text:#1f6a3d; --success-bg:#e8f6ed; --success-border:#bde4ca;
  --error-text:#a63427; --error-bg:#fff1ee; --error-border:#f3c2ba;
  --warning-text:#7a5200; --warning-bg:#fff4dc; --warning-border:#efd49b;
}
@media(pointer:coarse){:root{--control-h:44px}}