/* ICU design tokens. One light theme, one brand color (indigo).
   Status colors (ok / fail / unknown) are reserved for product UI: the camera frame and app mockups. */
:root {
  /* Neutrals */
  --bg: #FFFFFF;
  --bg-soft: #F5F6FB;
  --text: #14213D;
  --muted: #55607A;
  --subtle: #6B7489;
  --line: #E3E6EF;
  --line-strong: #CDD3E0;
  --field-border: #8A93A8;

  /* Brand: indigo */
  --brand: #4743D6;
  --brand-hover: #3B37B8;
  --brand-ink: #2F2C93;
  --brand-soft: #EEEEFB;
  --on-brand: #FFFFFF;

  /* Product status (camera + app only) */
  --ok: #3FB67A;
  --fail: #E5534B;
  --unknown: #8B8F98;
  --danger-text: #B42318;

  /* Product surfaces (camera frame, phones) */
  --device: #14161B;
  --device-2: #1F232B;
  --device-text: #F2F4F8;
  --device-muted: #A3AABA;

  /* Type */
  --font: "IBM Plex Sans Hebrew", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-hero: clamp(2.2rem, 1.3rem + 2.4vw, 3.3rem);
  --fs-h2: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem);
  --fs-h3: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.3vw, 1.22rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* Layout */
  --container: 1180px;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2rem);
  --section-pad: clamp(4rem, 2.8rem + 5.5vw, 7.5rem);
  --radius-input: 10px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* Depth: offset, soft, tinted with the text color */
  --shadow-1: 0 1px 2px rgba(20, 33, 61, 0.06), 0 4px 12px -6px rgba(20, 33, 61, 0.12);
  --shadow-2: 0 2px 4px rgba(20, 33, 61, 0.05), 0 18px 40px -16px rgba(20, 33, 61, 0.22);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;
  --dur-ui: 200ms;
  --dur-reveal: 420ms;
}