/* Written by Richard Christopher, Copyright 2026 Mindfull */
/*
 * THE ENGINE SEAM. Everything the canvas layer says about CloudCanvas rather
 * than about us, in one file: the host it paints into and the `--cc-*`
 * properties it themes itself through. Not one rule here names a view.
 *
 * The panel sizing chain and the window-body rules that hid the plane behind a
 * promoted legacy panel went with those panels (M1b): the unified shell mounts
 * its views as presentations inside its own panes.
 *
 * LOADED BEFORE canvas.css, because the token bridge has to be in force before
 * anything reads a `--cc-*` value.
 */

/* ------------------ THE TOKEN BRIDGE ------------------ */
/*
 * CloudCanvas themes itself through `--cc-*` custom properties with built-in
 * dark fallbacks. Redefining them here FROM the product tokens means one
 * `data-theme` attribute on the document root repaints the engine's host,
 * cards, menus and resize handles together with our own chrome - one palette,
 * two theme systems retired to one.
 *
 * ON THE DOCUMENT ROOT, NOT ON THE HOST. A custom property is inherited, so a
 * bridge declared on `#canvas-host` reaches only what is mounted inside the
 * host. Declared here it reaches every element in the document, wherever the
 * engine or its UI kit mounts it.
 */
:root {
  --cc-bg: var(--bg);
  --cc-grid-dot: var(--border);
  --cc-grid-size: 24px;
  /* The product's body face: every kit control and the canvas host take their family from this. Monospace is
   * for ids and timers, which ask for `--font-mono` by name. */
  --cc-font: var(--font-sans);
  --cc-text: var(--text);
  --cc-text-muted: var(--text-dim);
  --cc-accent: var(--accent);
  --cc-focus-ring: var(--accent);
  --cc-card-bg: var(--bg-raised);
  --cc-card-border: var(--border);
  --cc-card-border-hover: var(--border-strong);
  --cc-card-blur: 0px;
  --cc-radius-md: var(--radius-lg);
  --cc-radius-sm: var(--radius);
  --cc-shadow-1: var(--elevation-2);
  --cc-shadow-2: var(--elevation-3);
  --cc-scope-bg: var(--bg-sunken);
  --cc-scope-border: var(--border);
  --cc-menu-border: var(--border);
  --cc-btn-bg-hover: var(--accent-wash);
  --cc-resize-handle-bg: var(--accent);
  --cc-connector: var(--border-strong);

  /*
   * THE CORE'S CONTROL COLOURS: what the UI kit's sheet paints its buttons,
   * its fields and its four status tones with. They are the core's tokens, in
   * no kit catalogue, so `tests/token-bridge.test.js` reads the kit sheet
   * itself and fails by name for one that is read there and not mapped here.
   */
  --cc-btn-bg: var(--bg-raised);
  --cc-btn-border: var(--border-strong);
  --cc-btn-text: var(--text);
  --cc-input-bg: var(--bg-sunken);
  --cc-input-border: var(--border-field);
  --cc-tone-success: var(--ok);
  --cc-tone-warning: var(--warn);
  --cc-tone-danger: var(--fail);
  --cc-tone-info: var(--info);

  /*
   * THE UI KIT'S COLOURS. The kit lists them in `UI_TOKENS`, and
   * `tests/token-bridge.test.js` holds this block to that list: a colour the
   * kit adds and this block does not map fails by name.
   */
  --cc-ui-surface: var(--bg-raised);
  --cc-ui-backdrop: var(--bg-overlay);
  --cc-ui-selected: var(--accent-wash);
  --cc-ui-on-accent: var(--text-inverse);
  --cc-ui-grid-line: var(--border);
  /* An image, not a colour: the kit paints it as a `background-image`, one
   * rule per hour. Its period is the kit's `--cc-ui-hour-height` with the
   * kit's own default, and it is resolved HERE: an hour height set below the
   * root would move the kit's rows and not these rules. */
  --cc-ui-hour-lines: repeating-linear-gradient(
    to bottom,
    var(--border) 0 1px,
    transparent 1px var(--cc-ui-hour-height, 48px)
  );
  --cc-ui-bar: var(--accent);
  --cc-ui-bar-text: var(--text-inverse);
  --cc-ui-drop: var(--accent);
  /* A fill, as the kit means it: it sets `--cc-ui-on-accent` text on this, which no wash can carry. */
  --cc-ui-today: var(--accent);
  /* A folder layer behind a tab: one wash of shade for each step back it stands, and the shadow the tab in
   * front casts on it. */
  --cc-ui-tab-layer: var(--layer-shade);
  --cc-ui-tab-layer-shadow: var(--elevation-1);
  /* The ring inside the item a view marks as selected: the accent, at the width every focus ring here has. */
  --cc-ui-selected-ring: inset 0 0 0 2px var(--accent);
  /* A flag marker's light, shade and cast shadow: the same in both themes. */
  --cc-ui-flag-light: var(--flag-light);
  --cc-ui-flag-shade: var(--flag-shade);
  --cc-ui-flag-shadow: var(--flag-shadow);
  /* The kit's eight tones are the categorical palette, one for one. */
  --cc-ui-tone-1: var(--cat-1);
  --cc-ui-tone-2: var(--cat-2);
  --cc-ui-tone-3: var(--cat-3);
  --cc-ui-tone-4: var(--cat-4);
  --cc-ui-tone-5: var(--cat-5);
  --cc-ui-tone-6: var(--cat-6);
  --cc-ui-tone-7: var(--cat-7);
  --cc-ui-tone-8: var(--cat-8);
}

/* ------------------ THE HOST AND ITS LAYER LADDER ------------------ */
/*
 * THE LAYER LADDER, DECLARED HERE AND NOWHERE ELSE.
 *
 * CloudCanvas gives each of its layers a `--cc-z-*` token and documents them as
 * reorderable by the consumer without the elements moving
 * (`engine/host.js#mountLayers`). Its defaults are not ours to write against, so
 * the tokens are restated here: connectors at 10, the plane (every pin) at 20,
 * and the overlay at 70, above the shell's own layers, because CloudCanvas
 * mounts its context menu inside the overlay at `--cc-z-menu: 1200` and that
 * number is scoped inside whatever stacking context the overlay opens. The
 * overlay is `pointer-events: none` at the layer, so nothing below it is made
 * unreachable.
 */
#canvas-host {
  background: var(--bg);
  /* Clipped, not hidden (the kit's sheet says hidden): the kit's focus veil lies 100000px about the plane, so a hidden host could be
     scrolled by a program (a focus, a scrollIntoView) up to 100000px, and the page jumped with no way back on a phone. Clipped
     cannot be scrolled at all; the panes inside it scroll as they did. */
  overflow: clip;
  --cc-z-svg: 10;
  --cc-z-plane: 20;
  --cc-z-overlay: 70;
}