/* ============================================================
   Invariant Consulting - design tokens
   version 1.3.6

   Reusable, machine-consumed values for Invariant Consulting.
   Nine colours, one accent in two lightnesses, ten gaps, two
   weights, two families, structural and portrait radii. Destination constraints
   and specimen geometry remain local - see ../MASTER.a.md.

   GENERATED FILE. Edit tokens/tokens.json and re-run:
     repo-tools branding build-tokens

   Primitive tokens are followed by the binding semantic theme
   roles. Consumers use the roles, not conditional primitives.
   ============================================================ */

:root {

  /* ---- color ----------------------------------------- */
  /* Nine values: the seven-step ink and paper ramp, plus two lightnesses */
  /* of one accent. Emphasis is still carried by fill, not by hue - the */
  /* accent is a second channel on top of it and never the only carrier */
  /* of meaning. See decision 32. */
  --color-ink-100:             #F0F2F5;              /* The light alternate surface and dark primary text (15.5:1 on ink-900; 13.7:1 on ink-800). */
  --color-ink-200:             #D2D7E0;              /* Decorative separators that carry no meaning. 1.4:1 on paper. */
  --color-ink-400:             #8794AB;              /* Secondary text and meaningful lines on the ink ground (5.7:1). On paper it is 3.1:1: legal for large text, never for body. */
  --color-ink-600:             #495569;              /* Secondary text and meaningful lines on paper (7.5:1) and on the tinted band (6.7:1). Fails on the ink ground at 2.3:1 - never use it there. */
  --color-ink-800:             #1A2539;              /* Alternate surface in the dark scheme. Body text ink-100 is 13.7:1; muted text and meaningful lines ink-400 are 5.0:1. */
  --color-ink-900:             #101A2E;              /* The mark, light-scheme primary text and emphasis fill, and dark-scheme ground. Taken from invariant-mark.svg, which is already published. */
  --color-paper:               #FFFFFF;              /* The light ground, strong text in the dark scheme, and the dark-scheme emphasis fill. */
  --color-signal-500:          #5CC197;              /* Dark-scheme accent. 7.9:1 on ink-900 and 7.0:1 on ink-800. Fails on paper at 2.2:1 - never use it on a light ground. */
  --color-signal-700:          #19764F;              /* Light-scheme accent, and the only legal green as text on white. 5.6:1 on paper and 5.0:1 on ink-100. Fails on ink-900 at 3.1:1 - never use it on a dark ground. */

  /* ---- space ----------------------------------------- */
  /* Ten values, all multiples of four, growing geometrically because */
  /* perception of difference is proportional rather than absolute. Pick */
  /* by relationship, never by eye. */
  --space-1:                   4px;                  /* Bonded: a label to the thing it labels. */
  --space-2:                   8px;                  /* Bonded. */
  --space-3:                   12px;                 /* Same group: a heading to its paragraph. */
  --space-4:                   16px;                 /* Same group. */
  --space-5:                   24px;                 /* Adjacent groups: paragraph to paragraph. */
  --space-6:                   32px;                 /* Adjacent groups: column gutter. */
  --space-7:                   48px;                 /* Sections. Mobile band padding. */
  --space-8:                   64px;                 /* Sections. */
  --space-9:                   96px;                 /* Major divisions. Desktop band padding, slide margin. */
  --space-10:                  128px;                /* Major divisions. */

  /* ---- font ------------------------------------------ */
  --font-family-sans:          "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; /* All running text: headings, body, buttons, slide copy, banner headlines. Confirmed as the pairing the wordmark spec left open. */
  --font-family-mono:          "IBM Plex Mono", ui-monospace, Menlo, monospace; /* The identity voice. Wordmark, technical labels, figures, code, file paths. Never running text - the wordmark is the only place Mono carries a whole idea. */
  --font-weight-regular:       400;
  --font-weight-semibold:      600;                  /* Two weights. If you want a third, what you actually want is more space. */
  --font-line-height-display:  1.05;                 /* 49px and above. */
  --font-line-height-heading:  1.15;                 /* 25 to 39px. */
  --font-line-height-small:    1.45;                 /* 13px labels and captions. */
  --font-line-height-body:     1.6;                  /* 16 to 20px. Line height is inverse to size - a rule, not a preference. */
  --font-tracking-display:     -0.03em;
  --font-tracking-heading:     -0.02em;
  --font-tracking-body:        0;
  --font-tracking-caps:        0.08em;               /* Capitals always need loosening. Three words maximum. */

  /* ---- size ------------------------------------------ */
  --size-web-13:               13px;                 /* Technical labels, captions, footer. */
  --size-web-16:               16px;                 /* Body. Absolute floor on any medium. */
  --size-web-20:               20px;                 /* Lede paragraph. */
  --size-web-25:               25px;                 /* h3. */
  --size-web-31:               31px;                 /* h2. */
  --size-web-39:               39px;                 /* h1 below the breakpoint. */
  --size-web-49:               49px;                 /* h1. */
  --size-slide-28:             28px;                 /* Eyebrow label and footer only. Never a sentence anyone must read from the back. */
  --size-slide-36:             36px;                 /* Supporting body. Absolute floor for anything that must be read. */
  --size-slide-48:             48px;                 /* List items, subtitle, diagram node labels. */
  --size-slide-64:             64px;                 /* Slide title when the title runs to two lines. */
  --size-slide-84:             84px;                 /* Slide title, and the statement slide. There is no larger step - 84px on two lines already fills the canvas. */
  --size-banner-28:            28px;                 /* Absolute floor. Anything finer disappears in a feed thumbnail. */
  --size-banner-32:            32px;                 /* Supporting line. */
  --size-banner-48:            48px;                 /* Headline when it runs to three lines. */
  --size-banner-64:            64px;                 /* Headline. The tagline sets on two lines at this size. */

  /* ---- radius ---------------------------------------- */
  --radius-portrait:           50%;                  /* Circular crop for a real practitioner portrait. Controls, diagram nodes and panels keep radius-all. */
  --radius-all:                0px;                  /* Zero radius for controls and structure: buttons, panels, diagram nodes and surfaces. Real practitioner portraits use the separate portrait radius. */

  /* ---- line ------------------------------------------ */
  --line-width-decorative:     1px;                  /* Low-contrast separators that are not required to understand content or identify a control. */
  --line-width-meaningful:     2px;                  /* Diagram structure and other lines that carry information. */

  /* ---- border ---------------------------------------- */
  --border-shadow:             none;                 /* Separation order is space, then line, then fill. Never shadow. */

  /* ---- motion ---------------------------------------- */
  --motion-interaction:        120ms;                /* Website hover and focus only. No scroll animation, no entrance animation, nothing in a static asset or a deck. */

  /* ---- layout ---------------------------------------- */
  --layout-web-container:      1120px;               /* Maximum layout width. */
  --layout-web-prose:          68ch;                 /* Maximum text column. */
  --layout-web-gutter-mobile:  24px;
  --layout-web-gutter-desktop: 48px;
}

/* ---- semantic theme roles ----------------------------- */
:root {
  color-scheme: light dark;
  --surface-ground: var(--color-paper);
  --surface-alternate: var(--color-ink-100);
  --text-primary: var(--color-ink-900);
  --text-strong: var(--color-ink-900);
  --text-muted: var(--color-ink-600);
  --line-decorative: var(--color-ink-200);
  --line-meaningful: var(--color-ink-600);
  --fill-emphasis: var(--color-ink-900);
  --text-on-emphasis: var(--color-paper);
  --fill-hover: var(--color-ink-600);
  --accent: var(--color-signal-700);
  --text-link: var(--color-signal-700);
  --focus-ring: var(--color-signal-700);
  --mark-color: var(--color-ink-900);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --surface-ground: var(--color-ink-900);
    --surface-alternate: var(--color-ink-800);
    --text-primary: var(--color-ink-100);
    --text-strong: var(--color-paper);
    --text-muted: var(--color-ink-400);
    --line-decorative: var(--color-ink-600);
    --line-meaningful: var(--color-ink-400);
    --fill-emphasis: var(--color-paper);
    --text-on-emphasis: var(--color-ink-900);
    --fill-hover: var(--color-ink-200);
    --accent: var(--color-signal-500);
    --text-link: var(--color-signal-500);
    --focus-ring: var(--color-signal-500);
    --mark-color: var(--color-paper);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface-ground: var(--color-paper);
  --surface-alternate: var(--color-ink-100);
  --text-primary: var(--color-ink-900);
  --text-strong: var(--color-ink-900);
  --text-muted: var(--color-ink-600);
  --line-decorative: var(--color-ink-200);
  --line-meaningful: var(--color-ink-600);
  --fill-emphasis: var(--color-ink-900);
  --text-on-emphasis: var(--color-paper);
  --fill-hover: var(--color-ink-600);
  --accent: var(--color-signal-700);
  --text-link: var(--color-signal-700);
  --focus-ring: var(--color-signal-700);
  --mark-color: var(--color-ink-900);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-ground: var(--color-ink-900);
  --surface-alternate: var(--color-ink-800);
  --text-primary: var(--color-ink-100);
  --text-strong: var(--color-paper);
  --text-muted: var(--color-ink-400);
  --line-decorative: var(--color-ink-600);
  --line-meaningful: var(--color-ink-400);
  --fill-emphasis: var(--color-paper);
  --text-on-emphasis: var(--color-ink-900);
  --fill-hover: var(--color-ink-200);
  --accent: var(--color-signal-500);
  --text-link: var(--color-signal-500);
  --focus-ring: var(--color-signal-500);
  --mark-color: var(--color-paper);
}