/* Kapable design language 1.37.7: fleet chrome bridge (D62; follows a look since 1.32.1).
   Dresses the platform header and dock (kapable-header.js, kapable-dock.js and their
   body-mounted panels, all styled from kapable-theme.css's --kp-* variables) in the
   /next look, on a page that has moved to this language but still mounts the fleet
   chrome because it opens as a top-level page, outside a /next window.

   Load order, all in <head>:
     1. kapable-theme.css, kapable-header.css, kapable-dock.css   (the fleet's own)
     2. tokens.css                                               (this package)
     3. kapable-theme-bridge.css                                 (this file)
   Without tokens.css every var() below is invalid and the chrome loses its colours.

   Why `body` and not `:root`: kapable-accent-audition.js writes the --kp-accent family
   as inline style on <html>, which no stylesheet selector outranks. Declared on
   <body>, these values win for the header, the dock and every panel they mount inside
   body, while the language's own tokens (on <html>, including the runtime accent from
   applyAccent) still resolve here by inheritance.

   Theme: kapable-theme.js puts data-theme="light" or "dark" on <html>; tokens.css keys
   on the same attribute, so the chrome and the page switch together.

   A look (taste presets, presets/dossier DESIGN 2.4) is a stylesheet linked after tokens.css
   that changes the language's tokens. Every value below reads a token, so the chrome follows
   the look: colours, faces and their OpenType features, corners and glyph strokes here, and
   density (padding and gaps times --pad-factor) and type sizes in the fleet's own sheets
   (kapable-header.css, kapable-dock.css, kapable-bar.css). Under the default look every value
   is the one this file pinned before (presets D36). Each read carries that value as its
   fallback, because an app may still ship a tokens.css older than the preset tokens (1.30.0).

   Not mapped: --kp-icon-* (the old launchpad's tile hues). The fleet chrome draws no
   coloured app tile: its menu and switcher glyphs are one-colour line drawings, which take
   the text and accent colours and the look's glyph stroke, cap and join. The --lp-* layout
   sizes stay as they are: a look changes values, never layout (presets D8). */

/* The chrome's glyph stroke is a number, so the browser works the ratio below out to one
   (2 under kapable) instead of keeping it as a calc() expression. */
@property --kp-glyph-stroke {
  syntax: '<number>';
  inherits: true;
  initial-value: 2;
}

body {
  /* Surfaces: a page ground, not the desk. */
  --kp-bg: var(--surface);
  --kp-surface: var(--surface);
  --kp-surface-hi: var(--surface-3);
  /* Lines. */
  --kp-border: var(--line);
  --kp-border-strong: var(--line-strong);
  --kp-border-subtle: var(--line);
  --kp-rule: var(--line);
  /* Text. */
  --kp-text: var(--text);
  --kp-text-dim: var(--text-2);
  --kp-text-muted: var(--text-3);
  --kp-text-disabled: var(--text-3);
  /* The org accent: text and selection, as on /next. On a fill, the text-on-accent colour (white,
     or a look's own ink: presets D45; white with a tokens.css older than 1.35.0). */
  --kp-accent: var(--accent-text);
  --kp-accent-hi: var(--accent-text);
  --kp-accent-bg: var(--accent-soft);
  --kp-on-accent: var(--on-accent, #fff);
  /* States. */
  --kp-danger: var(--bad);
  --kp-danger-bg: color-mix(in srgb, var(--bad) 12%, transparent);
  --kp-success: var(--ok);
  --kp-success-bg: var(--ok-soft);
  --kp-warn: var(--warn);
  --kp-warn-bg: color-mix(in srgb, var(--warn) 12%, transparent);
  --kp-info: var(--text-2);
  --kp-info-bg: var(--surface-2);
  /* Elevation: the fleet's popovers take /next's popover shadow. */
  --kp-shadow: var(--shadow-pop);
  --kp-shadow-lg: var(--shadow-pop);
  /* Radius: fields and buttons share one corner in the fleet's theme; it takes the field corner
     (8 in kapable), because a look may round its buttons fully and a round field reads as a
     search pill. Small text buttons take the tag corner (6), cards the card corner (12), and
     the bars' popovers (menus, the switcher, the status bar's panels) the card corner scaled to
     their 8 under kapable. */
  --kp-radius: var(--radius-field, 8px);
  --kp-radius-pop: calc(var(--radius-card, 12px) * 8 / 12);
  --kp-radius-sm: var(--radius-tag, 6px);
  --kp-radius-lg: var(--radius-card, 12px);
  /* The look's faces. The fleet's machine register (JetBrains Mono) becomes the UI face with
     tabular figures: no monospace labels (DESIGN.md section 12). */
  --kp-font: var(--font-ui, var(--font-sans));
  --kp-font-mono: var(--font-ui, var(--font-sans));
  --kp-font-display: var(--font-display, var(--font-sans));
  /* The look's body face, for prose, row titles and second lines (presets D45): the UI face under
     the default look. A fleet sheet reads it as var(--kp-font-body, var(--kp-font)), so a page
     without this bridge keeps its own face (1.37.7, PLAT-1342). */
  --kp-font-body: var(--font-body, var(--font-ui, var(--font-sans)));
  /* Line glyphs. The fleet draws its menu and switcher glyphs on a 24-unit grid at 2, where
     the desktop's control glyphs are 1.6, so the chrome keeps that ratio to the look's stroke. */
  --kp-glyph-stroke: calc(var(--glyph-stroke, 1.6) * 1.25);
}

/* The look's features, then tabular figures for the clock, counts and indexes. */
#kapable-header, #kapable-dock { font-feature-settings: var(--font-ui-features, 'cv11', 'ss01'), 'tnum'; } /* raw: tabular figures on top of the look's own features, so the clock and counts line up */
#kapable-header .kp-switcher-name { font-feature-settings: var(--font-display-features, 'cv11', 'ss01'), 'tnum'; } /* raw: tabular figures on top of the look's own features, so the clock and counts line up */