/*
  Platform design tokens. THE single source for colour, type, spacing, radii
  and elevation. Customer-neutral: no customer colour, font or logo is
  defined here.

  Brand tokens (--brand-*) have neutral defaults. At runtime theme.js
  overrides them from the customer's branding (GET /branding). Everything
  that should follow the brand derives from them with color-mix(), so one
  colour change re-skins every tint, hover and focus ring.

  Status colours are semantic and deliberately NOT tied to the brand:
  "ok" stays green for a customer whose brand colour is purple.
*/
:root {
  /* ---- Brand (runtime-overridable) ---------------------------------- */
  --brand-primary: #2f6690;     /* active nav, primary actions, focus */
  --brand-on-primary: #ffffff;  /* text on primary; theme.js picks for contrast */
  --brand-sidebar: #1f2633;     /* sidebar, hero, assistant header */
  --brand-secondary: #3a5a6a;   /* brief headings, ghost buttons */
  --brand-accent: #b8c7d4;      /* light accent used on the sidebar colour */
  --brand-font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Derived from the brand, never hard-coded */
  --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 87%, #000);
  --brand-tint-1: color-mix(in srgb, var(--brand-primary) 3.5%, transparent);
  --brand-tint-2: color-mix(in srgb, var(--brand-primary) 5%, transparent);
  --brand-tint-3: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  --brand-tint-4: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --brand-ring: color-mix(in srgb, var(--brand-primary) 25%, transparent);
  --secondary-tint-1: color-mix(in srgb, var(--brand-secondary) 9%, transparent);
  --secondary-line: color-mix(in srgb, var(--brand-secondary) 14%, transparent);
  --secondary-border: color-mix(in srgb, var(--brand-secondary) 22%, transparent);
  --secondary-glow: color-mix(in srgb, var(--brand-secondary) 35%, transparent);
  --on-sidebar: #ffffff;
  --on-sidebar-82: rgb(255 255 255 / .82);
  --on-sidebar-45: rgb(255 255 255 / .45);
  --on-sidebar-hover: rgb(255 255 255 / .07);
  --on-sidebar-line: rgb(255 255 255 / .12);

  /* ---- Neutrals ------------------------------------------------------ */
  --ink: #1f2633;
  --ink-60: color-mix(in srgb, var(--ink) 60%, transparent);
  --ink-40: color-mix(in srgb, var(--ink) 40%, transparent);
  --ink-07: color-mix(in srgb, var(--ink) 7%, transparent);
  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --paper: #ffffff;
  --wash: #f5f6f5;
  --scrim: color-mix(in srgb, var(--ink) 45%, transparent);

  /* ---- Status (semantic, brand-independent) -------------------------- */
  --ok: #12965a;           --ok-ink: #00753a;     --ok-bg: color-mix(in srgb, var(--ok) 10%, transparent);
  --warn: #fcd757;         --warn-ink: #8a6400;   --warn-bg: color-mix(in srgb, var(--warn) 28%, transparent);
  --danger: #f8485e;       --danger-ink: #c41230; --danger-bg: color-mix(in srgb, var(--danger) 12%, transparent);
  --info: #0077c8;         --info-ink: #0077c8;   --info-bg: color-mix(in srgb, var(--info) 10%, transparent);
  --neutral-bg: var(--ink-07);

  /* ---- Type ---------------------------------------------------------- */
  --font: var(--brand-font);
  --fs-3xs: .58rem;  /* micro labels */
  --fs-2xs: .62rem;  /* source lines, nav labels */
  --fs-xs: .68rem;   /* chips, eyebrow */
  --fs-sm: .75rem;   /* secondary text */
  --fs-body: .85rem; /* default */
  --fs-md: .95rem;   /* panel titles */
  --fs-lg: 1.05rem;  /* section titles */
  --fs-xl: 1.7rem;   /* stat figures */
  --fs-hero: 1.8rem;
  --tracking-label: .09em;
  --tracking-eyebrow: .12em;

  /* ---- Space, shape, elevation -------------------------------------- */
  --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px;
  --sp-6: 14px; --sp-7: 16px; --sp-8: 18px; --sp-9: 20px; --sp-10: 28px;
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 99px;
  --shadow-float: 0 16px 44px color-mix(in srgb, var(--ink) 18%, transparent);
  --shadow-modal: 0 24px 60px color-mix(in srgb, var(--ink) 30%, transparent);
  --shadow-pill: 0 8px 24px var(--secondary-glow);

  /* ---- Layout -------------------------------------------------------- */
  --sidebar-w: 248px;
  --content-max: 1240px;
}