/* Copied into this app — do not load docs/brand identity at runtime.
 * Source of truth: /var/www/ai/docs/brand identity/semantek-tokens.css
 */
/*
 * SEMANTEK visual identity tokens
 * Version: 1.0 — 2026-09-01
 *
 * Put data-product="ai" | "memory" | "tenders" and
 * data-theme="light" | "dark" on the same root element.
 * Light and AI are the safe defaults.
 */

:root {
  color-scheme: light;

  /* Logo-derived reference colours. These are raster samples, not lockups. */
  --sem-logo-cyan: #1b87da;
  --sem-logo-blue: #4274cb;
  --sem-logo-indigo: #5c69c3;
  --sem-logo-violet: #7a5ab6;
  --sem-logo-silver: #e0e0e0;
  --sem-logo-black: #000000;
  --sem-logo-spectrum: linear-gradient(
    100deg,
    var(--sem-logo-cyan) 0%,
    var(--sem-logo-blue) 38%,
    var(--sem-logo-indigo) 66%,
    var(--sem-logo-violet) 100%
  );

  /* Typography — Inter and JetBrains Mono are optional self-hosted OFL fonts. */
  --sem-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --sem-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas,
    "Liberation Mono", Menlo, monospace;

  --sem-font-weight-regular: 400;
  --sem-font-weight-medium: 500;
  --sem-font-weight-semibold: 600;
  --sem-font-weight-bold: 700;

  --sem-font-size-xs: 0.75rem;   /* 12px */
  --sem-font-size-sm: 0.875rem;  /* 14px */
  --sem-font-size-md: 1rem;      /* 16px */
  --sem-font-size-lg: 1.125rem;  /* 18px */
  --sem-font-size-xl: 1.25rem;   /* 20px */
  --sem-font-size-2xl: 1.5rem;   /* 24px */
  --sem-font-size-3xl: 1.875rem; /* 30px */
  --sem-font-size-4xl: 2.25rem;  /* 36px; brand/display only */

  --sem-line-height-xs: 1rem;    /* 12/16 */
  --sem-line-height-sm: 1.25rem; /* 14/20 */
  --sem-line-height-md: 1.5rem;  /* 16/24 */
  --sem-line-height-lg: 1.75rem; /* 18/28 */
  --sem-line-height-xl: 1.75rem; /* 20/28 */
  --sem-line-height-2xl: 2rem;   /* 24/32 */
  --sem-line-height-3xl: 2.5rem; /* 30/40 */
  --sem-line-height-4xl: 2.75rem;/* 36/44 */
  --sem-line-height-prose: 1.625;/* 16/26 */
  --sem-letter-spacing-normal: 0;
  --sem-letter-spacing-caps: 0.05em;
  --sem-measure-prose: 72ch;

  /* One 8px spacing scale. Border widths and optical alignment are not spacing. */
  --sem-space-0: 0;
  --sem-space-1: 0.5rem; /* 8px */
  --sem-space-2: 1rem;   /* 16px */
  --sem-space-3: 1.5rem; /* 24px */
  --sem-space-4: 2rem;   /* 32px */
  --sem-space-5: 2.5rem; /* 40px */
  --sem-space-6: 3rem;   /* 48px */
  --sem-space-7: 3.5rem; /* 56px */
  --sem-space-8: 4rem;   /* 64px */
  --sem-space-9: 4.5rem; /* 72px */
  --sem-space-10: 5rem;  /* 80px */
  --sem-space-11: 5.5rem;/* 88px */
  --sem-space-12: 6rem;  /* 96px */

  /* Shape and density. */
  --sem-radius-xs: 0.25rem; /* 4px */
  --sem-radius-sm: 0.375rem;/* 6px */
  --sem-radius-md: 0.5rem;  /* 8px */
  --sem-radius-lg: 0.75rem; /* 12px */
  --sem-radius-xl: 1rem;    /* 16px */
  --sem-radius-pill: 999px;
  --sem-border-width: 1px;
  --sem-control-height-sm: 2rem;   /* 32px */
  --sem-control-height-md: 2.5rem; /* 40px */
  --sem-control-height-lg: 3rem;   /* 48px */
  --sem-table-row-compact: 2rem;   /* 32px */
  --sem-table-row-default: 2.5rem; /* 40px */

  /* Focus geometry is shared; colour follows the current product accent. */
  --sem-focus-width: 2px;
  --sem-focus-offset: 2px;
  --sem-focus-halo-size: 4px;

  /* Shared light surfaces and content. */
  --sem-surface-canvas: #f7f8fb;
  --sem-surface-base: #ffffff;
  --sem-surface-subtle: #f1f4f8;
  --sem-surface-muted: #edf1f6;
  --sem-surface-raised: #ffffff;
  --sem-surface-inset: #e9eef5;
  --sem-surface-hover: #eaf0f6;
  --sem-surface-active: #e2e8f0;
  --sem-surface-code: #f1f4f8;
  --sem-surface-inverse: #141923;
  --sem-surface-scrim: rgb(11 14 20 / 58%);

  --sem-text-strong: #141923;
  --sem-text-default: #273244;
  --sem-text-muted: #4b5565;
  --sem-text-subtle: #5f6b7e;
  --sem-text-disabled: #8490a2;
  --sem-text-inverse: #f7f8fb;

  --sem-icon-default: #536074;
  --sem-icon-muted: #748196;
  --sem-icon-disabled: #9aa5b4;

  --sem-border-subtle: #e4e9f0;
  --sem-border-default: #d7dee8;
  --sem-border-strong: #aeb8c6;
  --sem-border-control: #7f8da1;
  --sem-divider: #e4e9f0;

  --sem-shadow-xs: 0 1px 2px rgb(15 23 42 / 6%);
  --sem-shadow-sm: 0 2px 6px rgb(15 23 42 / 8%),
    0 1px 2px rgb(15 23 42 / 5%);
  --sem-shadow-md: 0 12px 28px rgb(15 23 42 / 11%),
    0 3px 8px rgb(15 23 42 / 7%);

  /* Shared semantic status colours. Never replace these with product accents. */
  --sem-success-bg: #e8f6ee;
  --sem-success-border: #a7d8bb;
  --sem-success-fg: #11633a;
  --sem-warning-bg: #fff4d6;
  --sem-warning-border: #e8c77a;
  --sem-warning-fg: #7a4600;
  --sem-danger-bg: #fdecef;
  --sem-danger-border: #f0b0bc;
  --sem-danger-fg: #a12638;
  --sem-info-bg: #eaf3f8;
  --sem-info-border: #abc9da;
  --sem-info-fg: #2d5675;

  --sem-chip-neutral-bg: #edf1f6;
  --sem-chip-neutral-border: #d7dee8;
  --sem-chip-neutral-fg: #374254;

  /* AI Workbench is the default product accent. */
  --sem-accent: #315fcf;
  --sem-accent-hover: #274faf;
  --sem-accent-active: #1f428f;
  --sem-accent-on: #ffffff;
  --sem-accent-soft: #eaf1ff;
  --sem-accent-soft-hover: #dfe9ff;
  --sem-accent-soft-fg: #244fad;
  --sem-accent-border: #afc5f4;
  --sem-accent-focus: rgb(49 95 207 / 36%);

  /* Aliases keep component CSS product-agnostic. */
  --sem-surface-selected: var(--sem-accent-soft);
  --sem-surface-selected-hover: var(--sem-accent-soft-hover);
  --sem-text-link: var(--sem-accent-soft-fg);
  --sem-border-selected: var(--sem-accent-border);
  --sem-chip-accent-bg: var(--sem-accent-soft);
  --sem-chip-accent-border: var(--sem-accent-border);
  --sem-chip-accent-fg: var(--sem-accent-soft-fg);
  --sem-focus-color: var(--sem-accent);
  --sem-focus-shadow: 0 0 0 var(--sem-focus-halo-size) var(--sem-accent-focus);
  --sem-selection-bg: var(--sem-accent-soft);
  --sem-selection-fg: var(--sem-text-strong);
}

[data-product="ai"] {
  --sem-accent: #315fcf;
  --sem-accent-hover: #274faf;
  --sem-accent-active: #1f428f;
  --sem-accent-on: #ffffff;
  --sem-accent-soft: #eaf1ff;
  --sem-accent-soft-hover: #dfe9ff;
  --sem-accent-soft-fg: #244fad;
  --sem-accent-border: #afc5f4;
  --sem-accent-focus: rgb(49 95 207 / 36%);
}

[data-product="memory"] {
  --sem-accent: #6e43b8;
  --sem-accent-hover: #5b369d;
  --sem-accent-active: #482a80;
  --sem-accent-on: #ffffff;
  --sem-accent-soft: #f1ebfa;
  --sem-accent-soft-hover: #e8def5;
  --sem-accent-soft-fg: #5d379d;
  --sem-accent-border: #cdbce7;
  --sem-accent-focus: rgb(110 67 184 / 36%);
}

[data-product="tenders"] {
  --sem-accent: #0b7285;
  --sem-accent-hover: #095e6d;
  --sem-accent-active: #074b57;
  --sem-accent-on: #ffffff;
  --sem-accent-soft: #e6f4f5;
  --sem-accent-soft-hover: #d9ecee;
  --sem-accent-soft-fg: #075d6b;
  --sem-accent-border: #9bcdd2;
  --sem-accent-focus: rgb(11 114 133 / 36%);
}

[data-theme="dark"] {
  color-scheme: dark;

  --sem-surface-canvas: #0b0e14;
  --sem-surface-base: #121722;
  --sem-surface-subtle: #181f2b;
  --sem-surface-muted: #1b2431;
  --sem-surface-raised: #1e2633;
  --sem-surface-inset: #080a0f;
  --sem-surface-hover: #222c3a;
  --sem-surface-active: #293444;
  --sem-surface-code: #0e131b;
  --sem-surface-inverse: #f2f4f8;
  --sem-surface-scrim: rgb(0 0 0 / 68%);

  --sem-text-strong: #f2f4f8;
  --sem-text-default: #dce2ea;
  --sem-text-muted: #b3bcc9;
  --sem-text-subtle: #8995a7;
  --sem-text-disabled: #697587;
  --sem-text-inverse: #141923;

  --sem-icon-default: #aeb8c6;
  --sem-icon-muted: #8995a7;
  --sem-icon-disabled: #626f82;

  --sem-border-subtle: #222b39;
  --sem-border-default: #2a3443;
  --sem-border-strong: #425066;
  --sem-border-control: #61738a;
  --sem-divider: #222b39;

  --sem-shadow-xs: 0 1px 2px rgb(0 0 0 / 46%);
  --sem-shadow-sm: 0 3px 8px rgb(0 0 0 / 40%),
    0 1px 2px rgb(0 0 0 / 45%);
  --sem-shadow-md: 0 16px 36px rgb(0 0 0 / 48%),
    0 4px 10px rgb(0 0 0 / 42%);

  --sem-success-bg: #102a1e;
  --sem-success-border: #2b6b48;
  --sem-success-fg: #8ad8ad;
  --sem-warning-bg: #30240e;
  --sem-warning-border: #7a5b20;
  --sem-warning-fg: #f6c76a;
  --sem-danger-bg: #32171d;
  --sem-danger-border: #7d3440;
  --sem-danger-fg: #f3a0ac;
  --sem-info-bg: #132633;
  --sem-info-border: #365d73;
  --sem-info-fg: #9bc7df;

  --sem-chip-neutral-bg: #1b2431;
  --sem-chip-neutral-border: #344052;
  --sem-chip-neutral-fg: #dce2ea;

  /* AI Workbench dark default. */
  --sem-accent: #78a6ff;
  --sem-accent-hover: #91b6ff;
  --sem-accent-active: #a9c7ff;
  --sem-accent-on: #091225;
  --sem-accent-soft: #172443;
  --sem-accent-soft-hover: #1d2d50;
  --sem-accent-soft-fg: #bbd0ff;
  --sem-accent-border: #375a9a;
  --sem-accent-focus: rgb(120 166 255 / 44%);
}

[data-theme="dark"][data-product="ai"] {
  --sem-accent: #78a6ff;
  --sem-accent-hover: #91b6ff;
  --sem-accent-active: #a9c7ff;
  --sem-accent-on: #091225;
  --sem-accent-soft: #172443;
  --sem-accent-soft-hover: #1d2d50;
  --sem-accent-soft-fg: #bbd0ff;
  --sem-accent-border: #375a9a;
  --sem-accent-focus: rgb(120 166 255 / 44%);
}

[data-theme="dark"][data-product="memory"] {
  --sem-accent: #b79ae8;
  --sem-accent-hover: #cab3f0;
  --sem-accent-active: #dac8f5;
  --sem-accent-on: #1b0c32;
  --sem-accent-soft: #261b37;
  --sem-accent-soft-hover: #312347;
  --sem-accent-soft-fg: #d9c6f8;
  --sem-accent-border: #624a82;
  --sem-accent-focus: rgb(183 154 232 / 44%);
}

[data-theme="dark"][data-product="tenders"] {
  --sem-accent: #67cdd6;
  --sem-accent-hover: #7bd7de;
  --sem-accent-active: #91e0e4;
  --sem-accent-on: #071719;
  --sem-accent-soft: #10282c;
  --sem-accent-soft-hover: #16343a;
  --sem-accent-soft-fg: #a6e2e7;
  --sem-accent-border: #2f666c;
  --sem-accent-focus: rgb(103 205 214 / 44%);
}

/* Optional, opt-in foundations. These do not impose page structure. */
.sem-theme {
  background: var(--sem-surface-canvas);
  color: var(--sem-text-default);
  font-family: var(--sem-font-sans);
  font-size: var(--sem-font-size-md);
  line-height: var(--sem-line-height-md);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

.sem-theme ::selection {
  background: var(--sem-selection-bg);
  color: var(--sem-selection-fg);
}

.sem-theme :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--sem-focus-width) solid var(--sem-focus-color);
  outline-offset: var(--sem-focus-offset);
  box-shadow: var(--sem-focus-shadow);
}

/* Transcript/long-reading typography for AI output and knowledge articles. */
.sem-prose {
  max-inline-size: var(--sem-measure-prose);
  color: var(--sem-text-default);
  font-family: var(--sem-font-sans);
  font-size: var(--sem-font-size-md);
  line-height: var(--sem-line-height-prose);
  overflow-wrap: anywhere;
}

.sem-prose > :first-child {
  margin-block-start: 0;
}

.sem-prose > :last-child {
  margin-block-end: 0;
}

.sem-prose :where(p, ul, ol, blockquote, table, pre) {
  margin-block: 0 var(--sem-space-2);
}

.sem-prose :where(ul, ol) {
  padding-inline-start: var(--sem-space-3);
}

.sem-prose :where(li + li) {
  margin-block-start: var(--sem-space-1);
}

.sem-prose :where(h1, h2, h3) {
  margin-block: var(--sem-space-3) var(--sem-space-1);
  color: var(--sem-text-strong);
  font-weight: var(--sem-font-weight-semibold);
  letter-spacing: var(--sem-letter-spacing-normal);
}

.sem-prose h1 {
  font-size: var(--sem-font-size-2xl);
  line-height: var(--sem-line-height-2xl);
}

.sem-prose h2 {
  font-size: var(--sem-font-size-xl);
  line-height: var(--sem-line-height-xl);
}

.sem-prose h3 {
  font-size: var(--sem-font-size-lg);
  line-height: var(--sem-line-height-lg);
}

.sem-prose :where(strong, b) {
  color: var(--sem-text-strong);
  font-weight: var(--sem-font-weight-semibold);
}

.sem-prose a {
  color: var(--sem-text-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.sem-prose a:hover {
  color: var(--sem-accent-hover);
}

.sem-prose blockquote {
  padding-inline-start: var(--sem-space-2);
  border-inline-start: 3px solid var(--sem-border-selected);
  color: var(--sem-text-muted);
}

.sem-prose :where(code, kbd, samp, pre) {
  font-family: var(--sem-font-mono);
  font-size: var(--sem-font-size-sm);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "zero" 1;
}

.sem-prose :not(pre) > :where(code, kbd, samp) {
  padding: 0.125em 0.375em;
  border: var(--sem-border-width) solid var(--sem-border-default);
  border-radius: var(--sem-radius-xs);
  background: var(--sem-surface-code);
  color: var(--sem-text-strong);
}

.sem-prose pre {
  max-inline-size: 100%;
  padding: var(--sem-space-2);
  overflow-x: auto;
  border: var(--sem-border-width) solid var(--sem-border-default);
  border-radius: var(--sem-radius-md);
  background: var(--sem-surface-code);
  color: var(--sem-text-default);
  line-height: 1.5715; /* 14/22 */
  tab-size: 2;
}

.sem-prose pre code {
  color: inherit;
  font: inherit;
}

.sem-prose .table-scroll {
  max-inline-size: 100%;
  margin-block-end: var(--sem-space-2);
  overflow-x: auto;
}

.sem-prose table {
  inline-size: 100%;
  border-collapse: collapse;
  color: var(--sem-text-default);
  font-size: var(--sem-font-size-sm);
  line-height: var(--sem-line-height-sm);
  font-variant-numeric: tabular-nums;
}

.sem-prose :where(th, td) {
  padding: var(--sem-space-1);
  border-block-end: var(--sem-border-width) solid var(--sem-divider);
  text-align: start;
  vertical-align: top;
}

.sem-prose th {
  color: var(--sem-text-strong);
  font-weight: var(--sem-font-weight-medium);
}

@media (forced-colors: active) {
  .sem-theme :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid CanvasText;
    box-shadow: none;
  }
}