/* ==========================================================================
   Design tokens — the ONLY place raw colour / size values live.
   Everything in app.css references these custom properties.
   Values follow the approved redesign; see DESIGN_SYSTEM.md for usage and contrast.
   ========================================================================== */

/* IBM Plex Sans (400/500/600) and IBM Plex Mono (400/500) — vendored, OFL licensed */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ── Colour: neutrals ─────────────────────────────────────────────────── */
  --color-bg: #F4F6F8;              /* page base — never pure white */
  --color-surface: #FFFFFF;         /* cards, header, inputs */
  --color-surface-subtle: #F1F3F6;  /* row hover, log panel, progress note */
  --color-table-header: #F8F9FB;    /* table header row */
  --color-border: #E4E7EC;
  --color-border-strong: #CDD3DB;   /* input borders, secondary buttons */

  /* ── Colour: text (contrast measured on --color-surface) ─────────────── */
  --color-text: #1B2433;            /* 15.9:1 */
  --color-text-secondary: #4F5B6E;  /* 6.9:1  — hints, meta, labels */
  --color-text-muted: #667085;      /* 5.0:1  — de-emphasised text, icons */
  --color-text-placeholder: #A3AAB6;/* deliberately faint so the example never looks like a typed value (dark #1B2433) */
  --color-on-primary: #FFFFFF;

  /* ── Colour: brand + status ───────────────────────────────────────────── */
  --color-primary: #23627A;         /* white text on it: 6.8:1 */
  --color-primary-hover: #1A4C5F;
  --color-primary-strong: #1A4C5F;  /* text on primary tint (Client badge): 8.2:1 */
  --color-primary-tint: #E9F2F4;    /* active nav, Client badge */
  --color-primary-border: #C9DDE3;

  --color-success: #22684A;         /* success icon; on banner 6.1:1 */
  --color-success-tint: #EEF7F2;    /* "Report ready" banner */
  --color-success-border: #CFE6D9;
  --color-success-icon-bg: #DAEEE2;

  --color-warning: #A86B12;         /* icons / borders */
  --color-warning-text: #8A4F0F;    /* Master badge text: 5.9:1 */
  --color-warning-tint: #FBF1E3;    /* Master badge */
  --color-warning-border: #F0DAB6;

  --color-danger: #B5473F;          /* text on danger tint: 4.6:1 */
  --color-danger-tint: #FBECEA;
  --color-danger-border: #F2CFCB;

  --color-info: #2D4F86;            /* info notice text: 7.3:1 */
  --color-info-tint: #EEF3FA;       /* info notice */
  --color-info-border: #D6E1F2;

  /* Sign-in hero panel */
  --color-hero: #EAF1F3;
  --color-hero-text: #18394A;       /* 10.7:1 on --color-hero */

  --focus-ring: 0 0 0 3px rgba(35, 98, 122, 0.25);
  --color-skeleton: #E9ECF0;
  --color-skeleton-shine: #F4F6F8;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 30px;  /* page titles */
  --text-3xl: 40px;  /* sign-in hero headline */

  --leading: 1.55;
  --leading-tight: 1.3;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ── Spacing (4px base) ───────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ── Shape, depth, motion ─────────────────────────────────────────────── */
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;

  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);

  --duration-fast: 150ms;
  --duration: 200ms;
  --ease: ease-out;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --header-h: 68px;
  --sidebar-w: 232px;
  --content-max: 1200px;
  --control-h-sm: 36px;   /* visual size; hit area is extended to 44px in app.css */
  --control-h: 46px;      /* inputs, selects, default buttons */
  --control-h-lg: 46px;
  --control-h-xl: 48px;
  --icon-btn: 40px;
  --touch-target: 44px;   /* minimum hit area for anything clickable */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
  }
}