/* Sidoku QS brand tokens v1, 9 Oct 2026.
   Source of truth: Sidoku QS Brand Kit. Do not invent new colours.
   Light is the default. Dark follows the OS unless the site sets data-theme. */

/* Fonts: put this in <head> before any stylesheet that uses them.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;600;700&family=Kantumruy+Pro:wght@400;600;700&display=swap" rel="stylesheet">
*/

:root {
  /* colour: light */
  --sqs-ink: #12202B;        /* text, wordmark, grid strokes */
  --sqs-paper: #FFFFFF;      /* page background */
  --sqs-mist: #F1F1F1;       /* table headers, inputs, quiet panels */
  --sqs-muted: #5B6670;      /* captions, metadata only */
  --sqs-line: #D9DDE1;       /* hairline rules and borders */
  --sqs-signal: #B3410C;     /* the checked cell: primary button, QS box, DRAFT stamp, total row. Fill only on dark */
  --sqs-on-signal: #FFFFFF;  /* only text colour allowed on signal */
  --sqs-peach: #F5A87E;      /* accent on navy. Decoration only on white, never text */
  --sqs-inverse: #12202B;    /* navy bands: header strip, footer, cover slabs */
  --sqs-on-inverse: #FFFFFF;
  --sqs-ok: #1F6B4A;         /* status text, always with the word */
  --sqs-warn: #8A5A00;
  --sqs-risk: #A3261C;
  --sqs-link: var(--sqs-signal);
  --sqs-focus: var(--sqs-signal);

  /* type */
  --sqs-font-sans: "IBM Plex Sans", "Kantumruy Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sqs-font-khmer: "Kantumruy Pro", "Noto Sans Khmer", sans-serif;
  --sqs-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sqs-display: 700 clamp(2rem, 1.4rem + 2.6vw, 2.5rem)/1.1 var(--sqs-font-sans);  /* 40px max */
  --sqs-h1: 700 1.75rem/1.2 var(--sqs-font-sans);       /* 28/34 */
  --sqs-h2: 600 1.25rem/1.4 var(--sqs-font-sans);       /* 20/28 */
  --sqs-body: 400 0.9375rem/1.47 var(--sqs-font-sans);  /* 15/22 */
  --sqs-small: 400 0.8125rem/1.38 var(--sqs-font-sans); /* 13/18 */
  --sqs-body-kh: 400 0.9375rem/1.73 var(--sqs-font-khmer); /* 15/26: taller so stacked vowels never clip */
  --sqs-label: 500 0.8125rem/1.38 var(--sqs-font-mono);
  --sqs-figure: 400 0.9375rem/1.47 var(--sqs-font-mono);

  /* space: 8px step */
  --sqs-space-1: 8px;
  --sqs-space-2: 16px;
  --sqs-space-3: 24px;
  --sqs-space-4: 40px;
  --sqs-space-5: 64px;   /* section rhythm on the website only */

  /* radius: small. The brand is a measured grid */
  --sqs-radius-sm: 2px;  /* inputs, cells, tiles */
  --sqs-radius-md: 4px;  /* buttons, stamps, badges */
  --sqs-radius-lg: 8px;  /* cards, panels. Never rounder */

  --sqs-max: 1120px;     /* content width */
  --sqs-measure: 65ch;   /* running text width */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sqs-ink: #FFFFFF;
    --sqs-paper: #12202B;
    --sqs-mist: #1C2D3A;
    --sqs-muted: #A9B3BC;
    --sqs-line: #2A3A47;
    --sqs-inverse: #F1F1F1;
    --sqs-on-inverse: #12202B;
    --sqs-ok: #6FCF9E;
    --sqs-warn: #F2C14E;
    --sqs-risk: #FF8A80;
    --sqs-link: var(--sqs-peach);   /* signal as text fails contrast on navy (2.9:1) */
    --sqs-focus: var(--sqs-peach);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sqs-ink: #FFFFFF;
  --sqs-paper: #12202B;
  --sqs-mist: #1C2D3A;
  --sqs-muted: #A9B3BC;
  --sqs-line: #2A3A47;
  --sqs-inverse: #F1F1F1;
  --sqs-on-inverse: #12202B;
  --sqs-ok: #6FCF9E;
  --sqs-warn: #F2C14E;
  --sqs-risk: #FF8A80;
  --sqs-link: var(--sqs-peach);
  --sqs-focus: var(--sqs-peach);
  color-scheme: dark;
}

/* Base. Keep or merge into the site's own base styles. */
body { background: var(--sqs-paper); color: var(--sqs-ink); font: var(--sqs-body); }
:lang(km), .kh { font: var(--sqs-body-kh); }
a { color: var(--sqs-link); }
:focus-visible { outline: 2px solid var(--sqs-focus); outline-offset: 2px; }
.sqs-figure, td.num { font: var(--sqs-figure); font-variant-numeric: tabular-nums; text-align: right; }

/* Primary button: the one signal element on a screen */
.sqs-btn { display: inline-flex; align-items: center; gap: var(--sqs-space-1); padding: 12px 20px;
  border-radius: var(--sqs-radius-md); font: 600 0.9375rem/1 var(--sqs-font-sans); text-decoration: none; cursor: pointer;
  background: var(--sqs-signal); color: var(--sqs-on-signal); border: 1px solid var(--sqs-signal); }
.sqs-btn:hover { filter: brightness(1.08); }
.sqs-btn--ghost { background: transparent; color: var(--sqs-ink); border-color: var(--sqs-line); }

/* BOQ table look */
.sqs-table th.num { text-align: right; }
.sqs-table { width: 100%; border-collapse: collapse; font: var(--sqs-small); }
.sqs-table th { background: var(--sqs-mist); color: var(--sqs-ink); font-weight: 700; text-align: left; }
.sqs-table th, .sqs-table td { padding: var(--sqs-space-1); border-bottom: 1px solid var(--sqs-line); }
.sqs-table tr.total td { background: var(--sqs-signal); color: var(--sqs-on-signal); font-weight: 700; }

/* DRAFT stamp */
.sqs-stamp { display: inline-block; padding: 4px 10px; border: 2px solid var(--sqs-signal); color: var(--sqs-signal);
  border-radius: var(--sqs-radius-md); font: var(--sqs-label); letter-spacing: .06em; text-transform: uppercase; }
:root[data-theme="dark"] .sqs-stamp { border-color: var(--sqs-peach); color: var(--sqs-peach); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sqs-stamp { border-color: var(--sqs-peach); color: var(--sqs-peach); } }

/* Status words: colour plus the word, never colour alone */
.sqs-ok { color: var(--sqs-ok); } .sqs-warn { color: var(--sqs-warn); } .sqs-risk { color: var(--sqs-risk); }