/* VeriloQ design tokens – shared by website, e-mail (inlined), flyer and slides.
   Ground idea: clear and transparent. Lots of white space, hairlines, one calm brand
   colour (petrol), the product's own status colours used sparingly as accents. */
:root {
  color-scheme: light;     /* native controls (date picker icon, select arrow) follow the page colours */
  /* brand */
  --ink: #0B2230;          /* text, wordmark */
  --petrol: #0F6B7A;       /* primary: links, buttons, highlights */
  --petrol-strong: #0A5562;
  --signal: #1DB57A;       /* the check: "OK", success, accent */
  --tint: #E6F2F3;         /* petrol tint for calm panels */
  --on-petrol: #FFFFFF;    /* text on petrol buttons */

  /* neutrals, slightly biased towards petrol */
  --bg: #FFFFFF;
  --bg-soft: #F5F8F9;
  --line: #DCE5E8;
  --muted: #5B6B76;

  /* product status colours (as in the app) */
  --ok: #1DB57A;   --ok-bg: #E4F6EE;
  --fail: #D64545; --fail-bg: #FBE7E7;
  --open: #D89A1C; --open-bg: #FDF3DD;

  /* type: system UI stack (no web-font download needed) */
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;

  /* scale (1.25) */
  --fs-xs: .8rem; --fs-sm: .9rem; --fs-base: 1.0625rem; --fs-lg: 1.25rem;
  --fs-xl: 1.6rem; --fs-2xl: 2.1rem; --fs-3xl: clamp(2.3rem, 5vw, 3.4rem);

  --radius: 14px; --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(11, 34, 48, .05), 0 8px 24px rgba(11, 34, 48, .06);
  --space: clamp(1rem, 2.5vw, 1.5rem);
  --maxw: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;    /* otherwise the browser draws the calendar icon black on the dark field */
    --ink: #E8F0F2; --petrol: #3FB3C4; --petrol-strong: #6CCBD8; --signal: #34C98C; --tint: #12323A; --on-petrol: #062028;
    --bg: #0B1A22; --bg-soft: #10232D; --line: #1F3946; --muted: #93A6B0;
    --ok: #34C98C; --fail: #F07B7B; --open: #E8B44A; --ok-bg: #123A2C; --fail-bg: #3E1C1F; --open-bg: #3A2E14;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}
:root[data-theme="dark"] {
  --ink: #E8F0F2; --petrol: #3FB3C4; --petrol-strong: #6CCBD8; --signal: #34C98C; --tint: #12323A; --on-petrol: #062028;
  --bg: #0B1A22; --bg-soft: #10232D; --line: #1F3946; --muted: #93A6B0;
  --ok: #34C98C; --fail: #F07B7B; --open: #E8B44A; --ok-bg: #123A2C; --fail-bg: #3E1C1F; --open-bg: #3A2E14;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}