/* ── Typeface: Source Sans 3, self-hosted ───────────────────────────────────
   Bundled from src/assets so Vite resolves the URLs under the sub-path mount;
   an absolute /fonts/ path would 404 behind the BASE_HREF rewrite. */
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-display: swap;
  src: url('./assets/fonts/source-sans-3-latin-400-normal.woff2') format('woff2'),
       url('./assets/fonts/source-sans-3-latin-ext-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 500; font-display: swap;
  src: url('./assets/fonts/source-sans-3-latin-500-normal.woff2') format('woff2'),
       url('./assets/fonts/source-sans-3-latin-ext-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 600; font-display: swap;
  src: url('./assets/fonts/source-sans-3-latin-600-normal.woff2') format('woff2'),
       url('./assets/fonts/source-sans-3-latin-ext-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 700; font-display: swap;
  src: url('./assets/fonts/source-sans-3-latin-700-normal.woff2') format('woff2'),
       url('./assets/fonts/source-sans-3-latin-ext-700-normal.woff2') format('woff2'); }

:root {
  /* ── PALETTE — Lead Desk redesign ───────────────────────────────────────
     Colour MEANS something here, and the meaning is fixed on every screen:
       blue  = the AI holds it        amber = a person holds it
       teal  = the customer holds it  red   = risk, and nothing else
     Navy is the masthead and the brand; blue is the one action colour.
     The token NAMES keep their history — the whole app references --zk-blue
     and friends — so remapping the values here re-themes every surface. */
  --zk-navy: #0B2A5B;
  --zk-navy-2: #12386F;
  --zk-blue: #1F55A6;          /* primary action; "with the AI" */
  --zk-blue-dark: #12386F;
  --zk-blue-deep: #0B2A5B;
  --zk-blue-mid: #4E7FC4;
  --zk-blue-light: #C3D3EC;    /* hairline / ring */
  --zk-cyan: #E4ECF9;          /* blue-soft */
  --zk-tint-blue: #E4ECF9;     /* blue-soft */

  --zk-teal: #137A66;          /* the customer; issued */
  --zk-teal-ink: #0F6353;
  --zk-teal-tint: #DDF1EC;
  --zk-teal-line: #B8DDD3;
  --zk-good: #137A66;

  --zk-amber: #A86A0B;         /* a person holds it */
  --zk-amber-ink: #8A5609;
  --zk-amber-tint: #FBF0DC;
  --zk-amber-line: #EAD6AE;
  --zk-amber-bar: #D99A2B;     /* the brighter amber for bars and legends */

  --zk-danger: #C8102E;        /* Kotak red: risk only */
  --zk-danger-ink: #A30D25;
  --zk-danger-tint: #FBE7EA;
  --zk-danger-line: #F1C5CC;

  --zk-ink: #152238;
  --zk-muted: #4B5A72;         /* ink-2 */
  --zk-grey: #7A8699;          /* ink-3 */
  --zk-line: #D9DFE9;
  --zk-line-soft: #E9EDF3;
  --zk-tint: #F2F4F8;          /* the canvas */
  --zk-sunk: #E9EDF3;
  --zk-white: #FFFFFF;
  --zk-card: #FFFFFF;

  /* ── Shape ────────────────────────────────────────────────────────────
     Flat. Cards are white on the grey canvas with a 1px line and a 10px
     radius; nothing floats, nothing casts a shadow. */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-pill: 999px;

  --sh-xs: none;
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: 0 12px 32px -12px rgba(21, 34, 56, 0.28);   /* dialogs only */
  --sh-accent: none;

  --ring: 0 0 0 3px rgba(31, 85, 166, 0.18);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.14s var(--ease);
  --t: 0.2s var(--ease);

  --grad-blue: var(--zk-blue);
  --grad-blue-hover: var(--zk-navy-2);

  /* ── TYPE SCALE — on a 15px root, so the rem steps land on the design's
     pixel sizes: 12.5 eyebrows, 13.5 small, 14 labels, 15 body, 17 card
     titles, 20 tab figures, 28 page title / KPI, 44 the one risk number. */
  --fs-3xs: 0.8333rem;   /* 12.5px — uppercase eyebrows, table heads */
  --fs-2xs: 0.9rem;      /* 13.5px — meta, pills, secondary lines */
  --fs-xs:  0.9333rem;   /* 14px   — labels */
  --fs-sm:  1rem;        /* 15px   — body */
  --fs-md:  1.0667rem;   /* 16px   — emphasis */
  --fs-lg:  1.1333rem;   /* 17px   — card titles */
  --fs-xl:  1.3333rem;   /* 20px   — tab figures, small headings */
  --fs-2xl: 1.8667rem;   /* 28px   — page title, KPI figures */
  --fs-3xl: 2.9333rem;   /* 44px   — renewals at risk */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.4;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-x: 700;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  --font-display: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-zurich: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-family: var(--font-zurich);
  /* Absolute on purpose: every --fs-* token is rem and sizing the root from
     one of them would be circular. */
  font-size: 15px;
  line-height: var(--lh-normal);
  color: var(--zk-ink);
  background: var(--zk-tint);
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html, body, #root { height: 100%; }

body { margin: 0; background: var(--zk-tint); }

button, input, select, textarea { font: inherit; color: inherit; }

/* One focus treatment for the whole console. */
:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }

::selection { background: var(--zk-tint-blue); color: var(--zk-navy); }

* { scrollbar-width: thin; scrollbar-color: var(--zk-line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 3px solid transparent; border-radius: var(--r-pill);
  background-clip: content-box; background-color: var(--zk-line);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--zk-grey); }

@keyframes zk-rise {
  /* Opacity only — a transform here composites text onto a GPU layer and it
     renders soft in Chrome on Linux. */
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes zk-shimmer {
  from { background-position: -420px 0; }
  to   { background-position: 420px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}