/* Design tokens. The IFS corporate language, shared with the
   banking-software.com redesign (flagship concept): navy field, brand blue,
   sky accent, a gold hairline, Newsreader for display and Inter for UI.
   Views never invent their own values.

   Copied to products/kyc-ai-portal/static/css/tokens.css (Deep KYC); a token
   fix here is not done until that copy has been checked.

   Fonts are the variable Inter and Newsreader faces, both under the SIL Open
   Font License 1.1, served from /fonts so nothing leaves the origin. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-var.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-var.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Brand, from the website */
  --navy: #071633;
  --navy-2: #0d2250;
  --navy-3: #13306b;
  --blue: #0e6add;
  --blue-deep: #0a56b4;
  --blue-soft: #e9f0fb;
  --sky: #8fb5f2;
  --gold: #b8935a;

  /* Product colours: each product reads as its own app. Unknown ids fall
     back to brand blue. */
  --p-bankware: #0e6add;
  --p-amltrac: #0f9e8e;
  --p-ibank: #6a5cf0;
  --p-cumulus: #1596c9;
  --p-ipayu: #e0822f;
  /* The same colours, darkened where needed so white text on them meets
     WCAG AA (4.5:1). Fills behind text use these; icons, rules and tints
     keep the brighter colour above. */
  --p-bankware-solid: #0e6add;
  --p-amltrac-solid: #0c8376;
  --p-ibank-solid: #6a5cf0;
  --p-cumulus-solid: #117ca7;
  --p-ipayu-solid: #aa6324;

  /* Surfaces and ink (light) */
  --canvas: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --surface-sunk: #eef1f6;
  --ink: #111a2b;
  --ink-2: #4d5a6e;
  --ink-3: #626e80;
  --line: #e3e7ee;
  --line-2: #cfd6e1;
  --focus: #0e6add;
  /* Text in brand blue (links, labels). Fills keep --blue. */
  --link: #0e6add;
  /* Destructive actions: --danger for text and edges, --danger-solid as a
     fill behind white text. */
  --danger: #b42318;
  --danger-solid: #b42318;

  /* Access states: entitled, locked (bank licenses, person not linked),
     discover (not licensed), unknown (source unavailable). Always paired
     with words and an icon, never colour alone. */
  --ok-bg: #e6f6ef;
  --ok-ink: #0f6b45;
  --ok-line: #b3e0c9;
  --locked-bg: #eef1f5;
  --locked-ink: #4f5b6d;
  --locked-line: #cdd4df;
  --discover-bg: #eef0fe;
  --discover-ink: #4336b8;
  --discover-line: #cfd0f7;
  --unknown-bg: #fff5e2;
  --unknown-ink: #7a4a00;
  --unknown-line: #ebc682;
  /* Service status: outage. Degraded reuses unknown (amber), maintenance
     reuses discover, "can't check" reuses locked. Always with a word. */
  --outage-bg: #fdecec;
  --outage-ink: #a3202a;
  --outage-line: #f2b8bc;

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.25rem;
  --t-4xl: clamp(2.25rem, 4.2vw, 3.5rem);

  /* Space */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Depth: one light source above */
  --shadow-1: 0 1px 2px rgba(7, 22, 51, 0.06), 0 1px 1px rgba(7, 22, 51, 0.04);
  --shadow-2: 0 4px 12px -2px rgba(7, 22, 51, 0.08), 0 2px 4px rgba(7, 22, 51, 0.04);
  --shadow-3: 0 24px 48px -20px rgba(7, 22, 51, 0.28), 0 8px 16px -8px rgba(7, 22, 51, 0.12);

  /* Layout */
  --sidebar: 17rem;  /* 272px at the default text size; grows with it */
  --topbar: 64px;
  --content: 1180px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #060f22;
    --surface: #0c1830;
    --surface-2: #0f1d39;
    --surface-sunk: #0a1429;
    --ink: #e8edf6;
    --ink-2: #a6b1c4;
    --ink-3: #8390ab;
    --line: #1c2a47;
    --line-2: #2a3a5c;
    --focus: #8fb5f2;
    --link: #6aa0f2;
    --danger: #ff9b8f;
    --blue-soft: #10254d;

    --ok-bg: #0c2c24;
    --ok-ink: #7fdcb2;
    --ok-line: #1c5a45;
    --locked-bg: #141e33;
    --locked-ink: #a2adc0;
    --locked-line: #2a3754;
    --discover-bg: #1a1a45;
    --discover-ink: #b9b3ff;
    --discover-line: #34318a;
    --unknown-bg: #2e2208;
    --unknown-ink: #f1c77a;
    --unknown-line: #6b5010;
    --outage-bg: #3a1216;
    --outage-ink: #ff9ea4;
    --outage-line: #7a2830;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 28px 56px -20px rgba(0, 0, 0, 0.7);
  }
}