/* Semanticus site kit: the app's design tokens, translated for the web.

   Source of truth: Semanticus.VSCode/webview/src/tokens.css ("One Visual Language", 23 Sep 2026, and
   "Instrument", look B, with colour level B and surface option B, 27 and 28 Sep 2026). Every name that exists
   in the app keeps its name and its value here, so a page on the site and a page in Studio are built from the
   same parts. The app takes its greys from the VS Code theme; the web has no theme to borrow from, so the two
   grounds below are VS Code's own Light Modern and Dark Modern values, the themes the app is tested in.

   What the web adds, and only this: a larger type scale for reading (still on the 4 px line grid), three
   section spacing steps (48, 64, 96, all on the 4 px base), a 40 px button for touch, a strong text colour for
   display type, and [data-ground] so any band of a page can take the other ground.

   Theme: light on :root, dark when the visitor's system asks for it, and [data-theme] on <html> overrides both
   ways. Colours are mixed with color-mix(), which every current browser supports; where the browser also
   supports relative colour (oklab(from ...)), the app's exact formulas for the mark and the hover take over. */

:root {
  /* spacing: the only lengths for padding, margin and gap (same as the app) */
  --sem-space-1: 4px;   /* icon to text */
  --sem-space-2: 8px;   /* between lines inside a card */
  --sem-space-3: 12px;  /* THE gap between cards and sections; grid gutter */
  --sem-space-4: 16px;  /* card padding; phone page margin */
  --sem-space-6: 24px;  /* page margin */
  --sem-space-8: 32px;
  /* web only: section rhythm */
  --sem-space-12: 48px;
  --sem-space-16: 64px;
  --sem-space-24: 96px;

  /* layout (same as the app, plus the page width) */
  --sem-page-margin: var(--sem-space-6);
  --sem-gap: var(--sem-space-3);
  --sem-grid-columns: 12;
  --sem-card-pad: var(--sem-space-4);
  --sem-inset-pad: var(--sem-space-3);
  --sem-stack: var(--sem-space-2);
  --sem-container: 1200px;
  --sem-section-pad: var(--sem-space-16);
  --sem-measure: 64ch;          /* a paragraph never runs wider than this */

  /* heights (same as the app, plus the site header and a touch-size button) */
  --sem-bar-h: 40px;
  --sem-row: 32px;
  --sem-row-2: 48px;
  --sem-control-h: 28px;
  --sem-control-h-sm: 24px;
  --sem-chip-h: 20px;
  --sem-site-header-h: 56px;
  --sem-button-h: 40px;         /* a call to action in the page body */
  --sem-button-h-sm: 32px;      /* the call to action in the site header */

  /* type, app scale: used inside product pictures so they match Studio exactly */
  --sem-text-label: 11px;  --sem-lh-label: 16px;
  --sem-text-meta: 12px;   --sem-lh-meta: 16px;
  --sem-text-body: 13px;   --sem-lh-body: 20px;
  --sem-text-title: 14px;  --sem-lh-title: 20px;
  --sem-text-page: 22px;   --sem-lh-page: 28px;
  /* type, web scale: for reading. Line heights stay on the 4 px grid. Sentence case everywhere. */
  --sem-web-meta: 13px;     --sem-web-lh-meta: 20px;
  --sem-web-body: 16px;     --sem-web-lh-body: 24px;
  --sem-web-lead: 18px;     --sem-web-lh-lead: 28px;
  --sem-web-title: 20px;    --sem-web-lh-title: 28px;
  --sem-web-section: 28px;  --sem-web-lh-section: 36px;
  --sem-web-display: 44px;  --sem-web-lh-display: 52px;
  --sem-weight: 400;
  --sem-weight-strong: 600;
  /* The app uses the VS Code UI font, which is the system font on each platform, so the site does too. The
     display face is only for the wordmark and page and section headings. Numbers use the mono face with
     tabular figures, like the app. Self-host both named faces (see README). */
  --sem-font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, Roboto, "Helvetica Neue", sans-serif;
  --sem-font-display: "Instrument Sans", var(--sem-font-ui);
  --sem-font-num: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  /* corners: small and square-ish, an instrument, not a toy (same as the app) */
  --sem-radius-control: 3px;
  --sem-radius-inner: 3px;
  --sem-radius-card: 4px;
  --sem-radius-chip: 2px;
  --sem-radius-tile: 16px;      /* the app icon tile only (16 on a 128 tile) */

  /* borders and elevation: hairline rules instead of boxes, and nothing floats */
  --sem-hairline: 1px;
  --sem-elev: none;
}

/* ---- the two grounds ----------------------------------------------------------------------------------- */

/* Light (VS Code Light Modern). Declared first so every colour has a value in every state. */
:root, [data-ground="light"] {
  color-scheme: light;
  --sem-bg: #FFFFFF;
  --sem-fg: #3B3B3B;
  --sem-fg-strong: #1F1F1F;     /* web only: display type and the wordmark */
  --sem-accent: #0A7A55;        /* jade, darkened so it holds 4.5:1 as a fill under white and as a line */
  --sem-on-accent: #FFFFFF;
  --sem-link: #005FB8;
  --sem-focus: #005FB8;
  --sem-lift: 8%;
  --sem-muted-mix: 74%;
  --sem-hue-mix: 55%;
  --sem-tint-mix: 7%;
  --sem-shadow-pop-alpha: .10;
  --sem-chart-green: #388A34;
  --sem-chart-yellow: #BF8803;
  --sem-chart-red: #E51400;
  --sem-chart-blue: #1A85FF;
  --sem-chart-orange: #D18616;
  --sem-chart-purple: #652D90;
}

/* Dark (VS Code Dark Modern), when the system asks for it and the visitor has not picked light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sem-bg: #1F1F1F;
    --sem-fg: #CCCCCC;
    --sem-fg-strong: #E8E8E8;
    --sem-accent: #3CC08F;
    --sem-on-accent: #04241A;
    --sem-link: #4DAAFC;
    --sem-focus: #0078D4;
    --sem-hue-mix: 70%;
    --sem-tint-mix: 9%;
    --sem-shadow-pop-alpha: .28;
    --sem-chart-green: #89D185;
    --sem-chart-yellow: #CCA700;
    --sem-chart-red: #F14C4C;
    --sem-chart-blue: #59A4F9;
    --sem-chart-orange: #D18616;
    --sem-chart-purple: #B180D7;
  }
}
/* The same dark values when the visitor picks dark, and on any band marked data-ground="dark". */
:root[data-theme="dark"], [data-ground="dark"] {
  color-scheme: dark;
  --sem-bg: #1F1F1F;
  --sem-fg: #CCCCCC;
  --sem-fg-strong: #E8E8E8;
  --sem-accent: #3CC08F;
  --sem-on-accent: #04241A;
  --sem-link: #4DAAFC;
  --sem-focus: #0078D4;
  --sem-hue-mix: 70%;
  --sem-tint-mix: 9%;
  --sem-shadow-pop-alpha: .28;
  --sem-chart-green: #89D185;
  --sem-chart-yellow: #CCA700;
  --sem-chart-red: #F14C4C;
  --sem-chart-blue: #59A4F9;
  --sem-chart-orange: #D18616;
  --sem-chart-purple: #B180D7;
}
/* An explicit light band inside a dark page wins over the dark block above. */
[data-ground="light"] { color-scheme: light; }

/* ---- colours worked out from the ground (the app's formulas) ------------------------------------------- */
/* Declared on :root and on every [data-ground] band, so a band works them out again from its own values. */
:root, [data-ground] {
  /* Content surfaces sit one clear step off the page: lighter in dark, darker in light, because mixing in the
     text colour moves toward it either way (Kane, 27 Sep 2026, option B). */
  --sem-surface: color-mix(in srgb, var(--sem-fg) var(--sem-lift), var(--sem-bg));
  --sem-ground: var(--sem-bg);
  /* A mark (an inset, a picked row, the current item) sits halfway between the page and a card. */
  --sem-surface-2: color-mix(in srgb, var(--sem-surface) 50%, var(--sem-bg));
  --sem-muted: color-mix(in srgb, var(--sem-fg) var(--sem-muted-mix), var(--sem-surface));
  --sem-faint: color-mix(in srgb, var(--sem-fg) 44%, var(--sem-bg));   /* marks and ticks only, never text */
  --sem-border: color-mix(in srgb, var(--sem-fg) 16%, var(--sem-ground));
  --sem-rule: color-mix(in srgb, var(--sem-fg) 11%, var(--sem-ground));
  /* Hover: a mark tinted jade. The thin jade edge is what a hover inside a card adds (Kane, 28 Sep 2026). */
  --sem-hover: color-mix(in srgb, var(--sem-surface-2) 93%, var(--sem-accent));
  --sem-edge: color-mix(in srgb, var(--sem-accent) 60%, var(--sem-border));
  --sem-accent-soft: color-mix(in srgb, var(--sem-accent) 16%, transparent);
  /* Meaning colour (colour level B): status and who did a step. Never the accent, never a coloured pill. */
  --sem-good: color-mix(in srgb, var(--sem-chart-green) var(--sem-hue-mix), var(--sem-fg));
  --sem-warn: color-mix(in srgb, var(--sem-chart-yellow) var(--sem-hue-mix), var(--sem-fg));
  --sem-bad: color-mix(in srgb, var(--sem-chart-red) var(--sem-hue-mix), var(--sem-fg));
  --sem-doer-engine: color-mix(in srgb, var(--sem-chart-blue) var(--sem-hue-mix), var(--sem-fg));
  --sem-doer-you: color-mix(in srgb, var(--sem-chart-orange) var(--sem-hue-mix), var(--sem-fg));
  --sem-doer-agent: color-mix(in srgb, var(--sem-chart-purple) var(--sem-hue-mix), var(--sem-fg));
  --sem-tint-engine: color-mix(in srgb, var(--sem-doer-engine) var(--sem-tint-mix), var(--sem-bg));
  --sem-tint-you: color-mix(in srgb, var(--sem-doer-you) var(--sem-tint-mix), var(--sem-bg));
  --sem-tint-agent: color-mix(in srgb, var(--sem-doer-agent) var(--sem-tint-mix), var(--sem-bg));
  --sem-shadow-pop: 0 8px 24px rgba(0, 0, 0, var(--sem-shadow-pop-alpha));
  background: var(--sem-bg);
  color: var(--sem-fg);
}

/* The lifted rule (as in the app): inside a content surface, marks, hovers, rules and edges are drawn against
   the surface. A mark steps BACK toward the page, and rules take two points more of the text colour. */
:where(.sem-card, .sem-panel) > * {
  --sem-ground: var(--sem-surface);
  --sem-surface-2: color-mix(in srgb, var(--sem-surface) 55%, var(--sem-bg));
  --sem-hover: color-mix(in srgb, var(--sem-surface-2) 93%, var(--sem-accent));
  --sem-border: color-mix(in srgb, var(--sem-fg) 18%, var(--sem-ground));
  --sem-rule: color-mix(in srgb, var(--sem-fg) 13%, var(--sem-ground));
}

/* The app's exact formulas, where the browser has relative colour. A mark inside a card steps back toward the
   page by --sem-recess (darker in dark, lighter in light), and a hover pushes that mark's hue toward jade at
   its own lightness, so its text holds wherever a mark's does. */
:root { --sem-recess: -0.03; --sem-jade-a: -0.024; --sem-jade-b: 0.007; }
:root:not([data-theme="dark"]) { --sem-recess: 0.03; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sem-recess: -0.03; } }
@supports (color: oklab(from red l a b)) {
  :root, [data-ground] {
    --sem-hover: oklab(from var(--sem-surface-2) l calc(a + var(--sem-jade-a)) calc(b + var(--sem-jade-b)));
  }
  [data-ground="light"] { --sem-recess: 0.03; }
  [data-ground="dark"] { --sem-recess: -0.03; }
  :where(.sem-card, .sem-panel) > * {
    --sem-surface-2: oklab(from var(--sem-surface) calc(l + var(--sem-recess)) a b);
    --sem-hover: oklab(from var(--sem-surface-2) l calc(a + var(--sem-jade-a)) calc(b + var(--sem-jade-b)));
  }
}

/* Windows high contrast (the web's version of the app's high contrast mapping): surfaces go flat, rules and
   edges take the system text colour, and the primary button is outlined. */
@media (forced-colors: active) {
  :root, [data-ground] { --sem-surface: Canvas; --sem-surface-2: Canvas; --sem-hover: Canvas;
    --sem-border: CanvasText; --sem-rule: CanvasText; --sem-edge: Highlight; --sem-muted: CanvasText; }
  .sem-btn--primary { border: var(--sem-hairline) solid ButtonText; }
}

/* Phone widths step the page margin down the same scale, never off it. */
@media (max-width: 720px) {
  :root {
    --sem-page-margin: var(--sem-space-4);
    --sem-section-pad: var(--sem-space-12);
    --sem-web-display: 32px;  --sem-web-lh-display: 40px;
    --sem-web-section: 24px;  --sem-web-lh-section: 32px;
  }
}

/* ---- primitives: the few shared parts every page is built from ----------------------------------------- */

body {
  margin: 0;
  background: var(--sem-bg);
  color: var(--sem-fg);
  font: var(--sem-weight) var(--sem-web-body)/var(--sem-web-lh-body) var(--sem-font-ui);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sem-link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--sem-focus); outline-offset: 2px; }

.sem-container { max-width: var(--sem-container); margin-inline: auto; padding-inline: var(--sem-page-margin); }
.sem-grid { display: grid; grid-template-columns: repeat(var(--sem-grid-columns), minmax(0, 1fr)); gap: var(--sem-gap); }

.sem-card, .sem-panel {
  background: var(--sem-surface);
  border: var(--sem-hairline) solid var(--sem-border);
  border-radius: var(--sem-radius-card);
  padding: var(--sem-card-pad);
  box-shadow: var(--sem-elev);
}
/* A card that is a link: hover steps back toward the page with a thin jade edge. */
a.sem-card { color: inherit; text-decoration: none; display: block; }
a.sem-card:hover { background: var(--sem-surface-2); border-color: var(--sem-edge); }
/* A row inside a card: hover is the step back, tinted jade, with the jade edge. */
.sem-row:hover { background: var(--sem-hover); box-shadow: inset 0 0 0 var(--sem-hairline) var(--sem-edge); }

.sem-btn {
  display: inline-flex; align-items: center; gap: var(--sem-space-2);
  height: var(--sem-button-h); padding: 0 var(--sem-space-4);
  border: var(--sem-hairline) solid var(--sem-border); border-radius: var(--sem-radius-control);
  background: transparent; color: var(--sem-fg-strong);
  font: var(--sem-weight-strong) var(--sem-web-meta)/1 var(--sem-font-ui); text-decoration: none; white-space: nowrap;
}
.sem-btn:hover { background: var(--sem-hover); border-color: var(--sem-edge); }
/* Jade is for "do this" only: the primary button, the current tab, kept lines, the selected plan. */
.sem-btn--primary { background: var(--sem-accent); border-color: var(--sem-accent); color: var(--sem-on-accent); }
.sem-btn--primary:hover { background: color-mix(in srgb, var(--sem-accent) 88%, var(--sem-fg-strong)); border-color: transparent; }

.sem-num { font-family: var(--sem-font-num); font-variant-numeric: tabular-nums; }
.sem-rule { border: 0; border-top: var(--sem-hairline) solid var(--sem-rule); margin: 0; }
.sem-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }