/* Slipway design tokens. Owner: foundation. Every colour, size, radius, shadow and duration of the page is
   named here; the other style sheets use these names and no literal value.

   Layout idea: the 3D view is the page. Everything else is a panel floating over it.
   Colour idea: blue-black hull, thin grey-blue lines, one cold signal (measured, selected, running, done)
   and one warm signal (the action to take, things to look at). Red is kept for failure only.

   Contrast rules these values were chosen for (checked by webdev/harness/foundation-check.mjs):
   - text is 4.5:1 or more on its real background, with a white model behind the panel;
   - the edge of a control (--line-control, --cold-line) is 3:1 or more on every hull colour;
   - the smallest text is 12 px, secondary text is 13 px, running text is 15 px. */

@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-semi-condensed-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-semi-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Sometype Mono"; src: url("../fonts/sometype-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sometype Mono"; src: url("../fonts/sometype-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Sometype Mono"; src: url("../fonts/sometype-mono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* ---- colour: space (the 3D view behind everything) ---- */
  --space-core: #1a2635;
  --space-mid: #0c131c;
  --space-edge: #05080c;

  /* ---- colour: hull (panels over the view) ---- */
  --hull: #0b1118;
  --hull-glass: rgb(11 17 24 / 0.95);   /* panels: 5 % of the view shows through, no blur */
  --hull-veil: rgb(5 8 12 / 0.86);      /* the veil shown while a file is dragged over the window */
  --hull-raise: #131b26;                /* buttons, chips */
  --hull-raise-2: #1b2532;              /* hover */
  --hull-sunk: #070b10;                 /* input wells, pressed */

  /* ---- colour: lines ---- */
  --line: rgb(158 186 214 / 0.15);          /* rules between groups: decoration */
  --line-strong: rgb(158 186 214 / 0.30);   /* frames of cards and bars: decoration */
  --line-control: #63768a;                  /* the edge of a control: 3.3:1 to 4.2:1 on the hull colours */
  --line-bright: rgb(158 186 214 / 0.72);   /* the edge of a control under the pointer */

  /* ---- colour: ink ---- */
  --ink: #e7eef6;                       /* 16:1 on the hull */
  --ink-2: #aebccb;                     /* 9.8:1 */
  --ink-3: #93a2b4;                     /* 7.3:1; 5.9:1 on the lightest hull colour */
  --ink-inverse: #0a0f15;               /* on a warm or cold fill */

  /* ---- colour: signals ---- */
  --cold: #84d2e6;                      /* measured, selected, running, done */
  --cold-strong: #b9e8f3;
  --cold-wash: rgb(132 210 230 / 0.11);
  --cold-line: rgb(132 210 230 / 0.60);
  --warm: #f3aa58;                      /* the action to take, things to look at, the core unit */
  --warm-strong: #ffc682;
  --warm-wash: rgb(243 170 88 / 0.11);
  --warm-line: rgb(243 170 88 / 0.58);
  --hot: #ff8a78;                       /* failure only; always with an icon and a word */
  --hot-wash: rgb(255 123 104 / 0.10);
  --hot-line: rgb(255 123 104 / 0.62);

  /* ---- colour: 3D view (read by js/viewer) ---- */
  --view-grid: #9ebad6;
  --view-clay: #a9b6c4;
  --view-key-light: #fff3e2;
  --view-rim-light: #79c6e6;
  --view-sky-light: #c6d8f2;
  --view-ground-light: #1a2230;

  /* ---- type ---- */
  --font-ui: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-label: "Barlow Semi Condensed", "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-num: "Sometype Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --fs-label: 0.75rem;        /* 12  capital labels, tags: the smallest text of the page */
  --fs-small: 0.8125rem;      /* 13  secondary text, small numbers */
  --fs-control: 0.875rem;     /* 14  text inside controls */
  --fs-body: 0.9375rem;       /* 15  text */
  --fs-lead: 1.0625rem;       /* 17  names */
  --fs-title: 1.375rem;       /* 22  headings */
  --fs-readout: 1.875rem;     /* 30  clock, percentage */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.45;
  --track-caps: 0.08em;

  /* ---- space ---- */
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 8px;
  --s-4: 12px;
  --s-5: 16px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;

  /* ---- size: lines ---- */
  --hair: 1px;                /* every border and rule */
  --stripe: 2px;              /* accent stripe of an active row, corner marks, slider track */
  --focus-w: 2px;             /* focus outline */
  --focus-off: 2px;           /* its distance from the control */
  --focus-ring: var(--cold-strong);

  /* ---- size: icons and marks ---- */
  --icon: 16px;
  --icon-s: 12px;
  --icon-l: 20px;
  --icon-xl: 28px;
  --chip: 14px;               /* colour chip, radio dot */
  --thumb: 18px;              /* switch thumb */
  --swatch: 32px;             /* honeycomb swatch */
  --swatch-s: 22px;
  --swatch-l: 44px;
  --gizmo: 80px;              /* axes indicator */

  /* ---- size: controls ---- */
  --target: 24px;             /* smallest pointer target */
  --h-control: 32px;
  --h-control-lg: 42px;
  --h-mini: 26px;             /* filters, small icon buttons, faces of a segmented choice */
  --h-cap: 40px;              /* segmented choice with a caption under each word */
  --h-switch: 24px;
  --h-tag: 20px;
  --h-line: 22px;             /* one text line of a step row */
  --h-row: 26px;              /* one row of the log */
  --h-bar: 6px;               /* meters and progress bars */
  --h-bar-s: 4px;
  --h-list: 132px;            /* short list inside a panel */
  --h-list-l: 272px;          /* a list with a line for each kind of element */
  --w-switch: 52px;
  --w-value: 64px;            /* number field next to a slider */
  --w-stepper: 36px;
  --w-btn-lg: 200px;          /* the two buttons of the start card */
  --w-num: 62px;              /* number column */
  --w-num-l: 80px;            /* wide number column */
  --w-time: 84px;             /* time column of the log */
  --w-level: 84px;            /* level column of the log */
  --w-step: 168px;            /* step column of the log */
  --w-menu: 320px;
  --w-menu-s: 264px;
  --w-pop: 380px;             /* popover */
  --h-pop: 420px;
  --w-tip: 260px;             /* widest tooltip */

  /* ---- size: layout ---- */
  --gutter: 12px;
  --h-top: 46px;
  --h-head: 42px;             /* panel head */
  --h-log-head: 38px;
  --h-log: 236px;             /* head + 7 rows + padding; the log module replaces it by the user's height */
  --w-left: 328px;
  --w-right: 384px;
  --w-rail: 46px;
  --w-label: 92px;
  --w-seq: 800px;             /* widest progress read-out */
  --w-drop: 680px;            /* start card */
  --w-log-max: 1000px;

  /* ---- shape ---- */
  --r-1: 2px;
  --r-2: 3px;
  --r-3: 5px;
  --r-round: 999px;

  /* ---- depth ---- */
  --shadow-panel: 0 0 0 1px rgb(0 0 0 / 0.38), 0 20px 44px -16px rgb(0 0 0 / 0.7);
  --shadow-pop: 0 0 0 1px rgb(0 0 0 / 0.5), 0 14px 36px -8px rgb(0 0 0 / 0.8);

  /* ---- opacity ---- */
  --o-disabled: 0.5;
  --o-muted: 0.55;
  --o-soft: 0.82;

  /* ---- motion ---- */
  --t-1: 100ms;
  --t-2: 180ms;
  --t-3: 360ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---- light theme: the colours only, chosen by the button of the top strip (js/ui/theme.js) ----
   A drawing sheet: pale grey-blue paper, white panels, dark ink. The two signals keep their meaning and get
   dark enough to be read as text: 4.7:1 or more on every panel colour, with a black model behind the panel.
   The lines of the signals are more opaque than in the dark theme to stay at 3:1. The lights of the 3D view
   are the same in both themes, so a model keeps its colours. */
:root[data-theme="light"] {
  color-scheme: light;

  --space-core: #f3f6f9;
  --space-mid: #e4eaf0;
  --space-edge: #d3dbe4;

  --hull: #f6f8fa;
  --hull-glass: rgb(246 248 250 / 0.95);
  --hull-veil: rgb(211 219 228 / 0.88);
  --hull-raise: #ffffff;
  --hull-raise-2: #e6ebf1;
  --hull-sunk: #eaeef3;

  --line: rgb(32 54 80 / 0.14);
  --line-strong: rgb(32 54 80 / 0.28);
  --line-control: #6b7c90;                  /* 3.6:1 to 4.3:1 on the hull colours */
  --line-bright: rgb(32 54 80 / 0.78);

  --ink: #0f1a26;                       /* 16:1 on the hull */
  --ink-2: #3a4a5c;                     /* 8.5:1 */
  --ink-3: #526276;                     /* 5.8:1; 5.2:1 on the darkest hull colour */
  --ink-inverse: #ffffff;               /* 5.7:1 or more on a warm, cold or hot fill */

  --cold: #0c6b86;
  --cold-strong: #084a5c;
  --cold-wash: rgb(12 107 134 / 0.09);
  --cold-line: rgb(12 107 134 / 0.80);
  --warm: #a84c08;
  --warm-strong: #7f3804;
  --warm-wash: rgb(168 76 8 / 0.09);
  --warm-line: rgb(168 76 8 / 0.80);
  --hot: #c0321f;
  --hot-wash: rgb(192 50 31 / 0.08);
  --hot-line: rgb(192 50 31 / 0.80);

  --view-grid: #34506e;
  --view-clay: #9aa8b8;

  --shadow-panel: 0 0 0 1px rgb(32 54 80 / 0.16), 0 18px 40px -18px rgb(32 54 80 / 0.38);
  --shadow-pop: 0 0 0 1px rgb(32 54 80 / 0.24), 0 14px 32px -10px rgb(32 54 80 / 0.42);
}

@media (max-width: 1279px) {
  :root {
    --w-right: 356px;
    --w-label: 84px;
    --h-log: 184px;           /* 5 rows */
  }
}