/* Innovadata design tokens: the one place for colour, type, spacing, control
   and motion values on /new. Every page loads this first: the hand-built pages
   (base.css), the reskinned live site pages (skin-site.css), the portal
   (skin-portal.css) and the monitoring page (monitor.css). Component files use
   these names only; a hex value outside this file is a bug.

   Source: the developer's DESIGN.md / COMPONENTS.md (2026-10-05) with the
   owner's decisions: Onest 700 for display and page headings (no Data Corner),
   IBM Plex Sans 400/500 for everything else. */

:root{
  /* Palette (DESIGN.md). Verdite is decorative only: never a primary action,
     selection or status colour. */
  --carbon:#1C262C; --carbon-hover:#10191E;
  --lime:#D5F05B; --lime-hover:#DDF37C;
  --paper:#F5F7F4; --surface:#FCFDF9; --selection:#F1F4EC;
  --muted:#58615E; --border:#CBD2C8; --control-rule:#778276;
  --dark-muted:#B8C3BA; --dark-surface:#2B373C;
  --verdite:#9E98D6; --support-surface:#F0EEF8;
  /* Status: the colour never carries the meaning alone; the text does. */
  --error:#8D3928; --error-surface:#F6ECE9;
  --warning:#80591D; --warning-surface:#F5EEDF;
  --success:#047857;
  --scrim:rgb(28 38 44 / 55%);
  /* The only shadow: transient overlays (menus, dialogs). */
  --shadow-overlay:0 8px 32px rgb(28 38 44 / 16%);

  /* Families */
  --font-body:Plex,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:Onest,Plex,system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Type roles. display = the home H1; page = the H1 of every other page and
     portal screen; section = H2; sub = H3 and leads; body; label = short
     metadata and field labels; control = buttons and inputs. */
  --text-display:56px; --lh-display:1.12;
  --text-page:40px;    --lh-page:1.12;
  --text-section:28px; --lh-section:1.25;
  --text-lead:20px;    --lh-sub:1.25; --lh-lead:1.5;
  --text-body:16px;    --lh-body:1.5;
  --text-sm:14px;      --text-label:14px; --lh-label:1.5;
  --text-control:16px; --lh-control:1.25;
  --text-mono:13px;
  --text-number:40px;
  --tracking-display:-.025em;
  --weight-regular:400; --weight-medium:500; --weight-display:700;

  /* Spacing (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64, plus the 96 chapter gap). */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s24:96px;

  /* Shape and controls. Touch targets at least 44 px; standard controls 48 px. */
  --radius-control:4px; --radius-panel:8px; --rule:1px;
  --touch-min:44px; --control-size:48px; --control-size-sm:44px;
  --icon:20px; --icon-large:24px; --corner-size:24px;
  --support-corner:20px; --brand-cut:24px; --panel-corner:12px;
  --focus-ring:3px solid var(--carbon); --focus-offset:2px;

  /* Motion (COMPONENTS.md: corner grows 240 ms, pulses in a 600 ms cycle,
     returns in 160 ms). */
  --time-hover:140ms; --time-select:170ms; --time-press:70ms;
  --time-enter:240ms; --time-exit:160ms; --time-pulse:300ms;
  --ease:cubic-bezier(.2,.8,.2,1);
  --corner-rest:.38; --corner-hover:2.3005; --corner-pulse:2.3861;

  /* Layout */
  --max-width:1280px; --gutter:64px; --section-space:96px; --hero-space:64px; --header-space:24px;
  --logo-width:184px; --app-main:1120px;

  /* Light surface (default). Components read these instead of fixed colours,
     so a dark surface only has to swap them (see .nd-dark below). */
  --fg:var(--carbon); --fg-muted:var(--muted); --rule-color:var(--border); --link-mark:var(--verdite);
  --focus-color:var(--carbon); --panel-bg:var(--surface); --panel-border:var(--border);

  /* The tree checkbox (components.css): a 20 px box drawn inside a 44 px target,
     Lime tick on Carbon when checked. */
  --check-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='.5' y='.5' width='19' height='19' rx='2' fill='%23FCFDF9' stroke='%23778276'/%3E%3C/svg%3E");
  --check-hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='.5' y='.5' width='19' height='19' rx='2' fill='%23F1F4EC' stroke='%231C262C'/%3E%3C/svg%3E");
  --check-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='.5' y='.5' width='19' height='19' rx='2' fill='%231C262C' stroke='%231C262C'/%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23D5F05B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mark-fail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='2' fill='%238D3928'/%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' stroke='%23FCFDF9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --check-mixed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='.5' y='.5' width='19' height='19' rx='2' fill='%231C262C' stroke='%231C262C'/%3E%3Cpath d='M5 10h10' stroke='%23D5F05B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Button roles (components.css). */
  --btn-primary-bg:var(--carbon); --btn-primary-fg:var(--surface); --btn-primary-border:var(--carbon);
  --btn-primary-cell:var(--lime); --btn-primary-arrow-hover:var(--carbon); --btn-primary-hover-bg:var(--carbon);
  --btn-accent-bg:var(--lime); --btn-accent-fg:var(--carbon); --btn-accent-border:var(--carbon);
  --btn-accent-cell:var(--carbon); --btn-accent-arrow-hover:var(--lime); --btn-accent-hover-bg:var(--lime-hover);
  --btn-secondary-bg:transparent; --btn-secondary-fg:var(--carbon); --btn-secondary-border:var(--control-rule);
  --btn-secondary-hover-bg:var(--selection); --btn-secondary-hover-border:var(--carbon);
  --btn-destructive-fg:var(--error); --btn-destructive-border:var(--error); --btn-destructive-hover-bg:var(--error-surface);
  --btn-disabled-bg:var(--selection); --btn-disabled-fg:var(--carbon); --btn-disabled-border:var(--border); --btn-disabled-cell:var(--border);

  color-scheme:light;
}

@media(max-width:1023px){:root{--gutter:32px;--section-space:64px;--hero-space:48px}}
@media(max-width:767px){:root{--gutter:24px;--section-space:56px;--hero-space:32px;--header-space:16px;--logo-width:168px;
  --text-display:40px;--text-page:32px;--text-section:24px;--text-number:32px}}
@media(max-width:374px){:root{--gutter:16px;--text-display:36px}}

/* Dark surface: Carbon ground, Surface text, Dark-muted secondary text
   (9.4:1 on Carbon), Lime focus. A primary action on Carbon would vanish, so
   inside a dark surface the primary role takes the Lime accent look. */
.nd-dark,.on-dark{
  --fg:var(--surface); --fg-muted:var(--dark-muted); --rule-color:var(--control-rule); --link-mark:var(--lime);
  --focus-color:var(--lime); --panel-bg:var(--carbon); --panel-border:var(--carbon);
  --btn-primary-bg:var(--lime); --btn-primary-fg:var(--carbon); --btn-primary-border:var(--lime);
  --btn-primary-cell:var(--carbon); --btn-primary-arrow-hover:var(--lime); --btn-primary-hover-bg:var(--lime-hover);
  --btn-secondary-fg:var(--surface); --btn-secondary-border:var(--dark-muted);
  --btn-secondary-hover-bg:var(--dark-surface); --btn-secondary-hover-border:var(--surface);
  --btn-disabled-bg:var(--dark-surface); --btn-disabled-fg:var(--surface); --btn-disabled-border:var(--control-rule);
  background:var(--panel-bg); color:var(--fg);
}