@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/Poppins-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/Poppins-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/Poppins-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font-family-base: "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* Typography */
  --font-size-display: clamp(2.2rem, 3.8vw, 3rem);
  --font-size-h1: clamp(1.78rem, 2.45vw, 2.3rem);
  --font-size-h2: clamp(1.24rem, 1.75vw, 1.56rem);
  --font-size-h3: clamp(1rem, 1.18vw, 1.16rem);
  --font-size-subhead-lg: 1rem;
  --font-size-subhead-sm: 0.875rem;
  --font-size-body-lg: 1rem;
  --font-size-body-md: 0.9375rem;
  --font-size-body-sm: 0.8125rem;
  --font-size-body-xs: 0.75rem;
  --font-size-kpi: clamp(1.32rem, 2.1vw, 1.95rem);
  --font-size-chart-total: clamp(1.18rem, 1.7vw, 1.62rem);
  --font-weight-body: 400;
  --font-weight-heading: 600;
  --font-weight-strong: 700;
  --font-weight-display: 800;
  --line-height-display: 0.98;
  --line-height-heading: 1.08;
  --line-height-subhead: 1.3;
  --line-height-body: 1.55;
  --line-height-dense: 1.38;
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-subhead: 0.012em;
  --tracking-label: 0.08em;
  --tracking-body: 0;

  /* Spacing rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* Shared page-scale contract */
  --layout-width-default: 1180px;
  --layout-width-wide: 1440px;
  --page-padding-inline: 20px;
  --page-padding-block-start: 28px;
  --page-padding-block-end: 52px;
  --shell-row-padding-block: 12px;
  --shell-row-padding-inline: 20px;
  --card-padding: 22px;
  --nav-pill-height: 34px;
  --nav-pill-padding-inline: 12px;
  --button-height: 40px;
  --button-padding-inline: 15px;

  /* Core brand */
  --brand-structure-dark: #020035;
  --brand-structure-elevated: #02066f;
  --brand-surface-warm: #ffffff;
  --brand-surface-warm-alt: #f2f3f4;
  --brand-border-light: #ebeaed;
  --brand-border-light-strong: #d9dce6;
  --brand-border-dark: #2b3388;
  --brand-border-dark-strong: #434daf;
  --brand-text-light: #020035;
  --brand-text-dark: #ffffff;
  --brand-muted-text-light: #4f567d;
  --brand-muted-text-dark: #d7defd;
  --brand-soft-text-light: #6a7297;
  --brand-soft-text-dark: #a8b0dc;
  --brand-white: #ffffff;

  /* Interaction */
  --brand-cta: #ed4b00;
  --brand-cta-hover: #d84400;
  --brand-cta-active: #c13c00;
  --brand-cta-soft: #fff0e8;
  --brand-cta-muted: rgba(237, 75, 0, 0.12);
  --brand-cta-outline: rgba(237, 75, 0, 0.24);
  --brand-cta-shadow: rgba(7, 10, 24, 0.18);
  --brand-selected-bg: rgba(32, 0, 177, 0.08);
  --brand-selected-border: #2000b1;
  --brand-selected-text: #020035;
  --brand-link: #02066f;
  --brand-link-hover: #2000b1;
  --brand-focus-ring: #2000b1;
  --brand-focus-ring-soft: rgba(32, 0, 177, 0.16);
  --brand-focus-ring-strong: rgba(32, 0, 177, 0.28);
  --brand-control-accent: #2000b1;

  /* Semantic */
  --brand-success: #1f7758;
  --brand-success-bg: #e3f4ec;
  --brand-success-border: #acd3c2;
  --brand-warning: #9a6118;
  --brand-warning-bg: #fbefd9;
  --brand-warning-border: #e7c992;
  --brand-danger: #a6342f;
  --brand-danger-strong: #8f2a25;
  --brand-danger-bg: #fde6e2;
  --brand-danger-border: #efbbb1;
  --brand-danger-shadow: rgba(7, 10, 24, 0.18);
  --brand-info: #2f648d;
  --brand-info-bg: #e7f0f7;
  --brand-info-border: #bed0df;
  --settings-guidance-bg: rgba(32, 0, 177, 0.05);
  --settings-guidance-bg-hover: rgba(32, 0, 177, 0.08);
  --settings-guidance-border: rgba(32, 0, 177, 0.14);
  --settings-guidance-border-strong: rgba(32, 0, 177, 0.22);

  /* Shared browser surfaces */
  --brand-primary: var(--brand-structure-dark);
  --brand-primary-bg: var(--brand-structure-dark);
  --brand-primary-surface: var(--brand-structure-elevated);
  --brand-primary-border: var(--brand-border-dark);
  --brand-primary-soft: rgba(2, 6, 111, 0.06);
  --brand-primary-shadow: rgba(7, 10, 24, 0.18);
  --brand-ink: var(--brand-text-light);
  --brand-accent: var(--brand-cta);
  --brand-accent-strong: var(--brand-cta-hover);
  --brand-accent-bg: var(--brand-cta-soft);
  --brand-accent-muted: var(--brand-cta-muted);
  --brand-accent-soft: var(--brand-cta-soft);
  --brand-accent-outline: var(--brand-cta-outline);
  --brand-accent-shadow: var(--brand-primary-shadow);
  --brand-muted: var(--brand-muted-text-light);

  --brand-bg: #ffffff;
  --brand-bg-soft: #f2f3f4;
  --brand-surface: rgba(255, 255, 255, 0.98);
  --brand-surface-strong: #ffffff;
  --brand-surface-soft: #f7f8fa;
  --brand-surface-inset: #ebeaed;
  --brand-muted-bg: #f7f8fa;
  --brand-surface-contrast: var(--brand-structure-dark);

  --brand-text: var(--brand-text-light);
  --brand-muted-text: var(--brand-muted-text-light);
  --brand-soft-text: var(--brand-soft-text-light);
  --brand-inverse-text: var(--brand-text-dark);

  --brand-border: #ebeaed;
  --brand-border-strong: #d9dce6;
  --brand-divider: #ebeaed;
  --brand-divider-soft: #f2f3f4;
  --brand-input-bg: #fcfcfd;
  --brand-input-bg-hover: #ffffff;

  --focus-outline: var(--brand-focus-ring-soft);
  --focus-outline-strong: var(--brand-focus-ring-strong);
  --disabled-text: #7d849f;
  --disabled-bg: #f2f3f4;
  --disabled-border: #d9dce6;
  --disabled-opacity: 0.68;
  --form-error-text: var(--brand-danger);
  --form-error-bg: #fff5f2;
  --form-error-border: var(--brand-danger);
  --form-error-outline: rgba(166, 52, 47, 0.14);

  --interactive-surface-hover: #f2f3f4;
  --interactive-surface-active: #ebeaed;
  --interactive-row-hover: rgba(2, 6, 111, 0.035);
  --interactive-row-alt: rgba(2, 6, 111, 0.015);
  --brand-bg-ambient: transparent;
  --table-row-selection: rgba(32, 0, 177, 0.08);

  --shell-bg: rgba(7, 10, 24, 0.94);
  --shell-bg-strong: rgba(13, 18, 36, 0.9);
  --shell-border: rgba(255, 255, 255, 0.08);
  --shell-subtle-bg: rgba(255, 255, 255, 0.05);
  --shell-subtle-border: rgba(255, 255, 255, 0.12);
  --logo-frame: rgba(255, 255, 255, 0.12);
  --logo-shadow: rgba(7, 10, 24, 0.22);
  --shell-shadow: rgba(7, 10, 24, 0.18);
  --nav-link-text: #d7defd;
  --nav-link-hover-bg: rgba(255, 255, 255, 0.08);
  --nav-link-hover-border: rgba(255, 255, 255, 0.12);
  --nav-link-hover-text: var(--brand-text-dark);
  --nav-active-bg: #2000b1;
  --nav-active-border: rgba(255, 255, 255, 0.24);
  --nav-active-text: #ffffff;
  --public-shell-page-bg:
    radial-gradient(circle at top left, rgba(32, 0, 177, 0.14), transparent 26%),
    radial-gradient(circle at top right, rgba(237, 75, 0, 0.12), transparent 22%),
    linear-gradient(
      180deg,
      var(--brand-structure-dark) 0%,
      var(--brand-structure-elevated) 18%,
      var(--table-head-bg) 18%,
      var(--brand-surface-warm) 100%
    );
  --public-shell-hero-bg:
    linear-gradient(135deg, rgba(2, 0, 53, 0.9), rgba(2, 6, 111, 0.86)),
    radial-gradient(circle at top right, rgba(237, 75, 0, 0.32), transparent 30%);
  --public-shell-contact-bg:
    linear-gradient(135deg, rgba(2, 0, 53, 0.96), rgba(2, 6, 111, 0.92)),
    radial-gradient(circle at top right, rgba(237, 75, 0, 0.28), transparent 30%);
  --public-section-alt-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(242, 243, 244, 0.94));
  --public-footer-bg: rgba(7, 10, 24, 0.92);
  --public-footer-shadow: 0 -12px 32px rgba(7, 10, 24, 0.12);
  --public-footer-link-decoration: rgba(255, 255, 255, 0.14);
  --portal-shell-page-bg:
    radial-gradient(circle at top left, rgba(237, 75, 0, 0.16), transparent 26%),
    linear-gradient(
      180deg,
      var(--brand-structure-elevated) 0%,
      rgba(32, 0, 177, 0.82) 24%,
      var(--table-head-bg) 24%,
      var(--surface-soft) 100%
    );
  --portal-shell-hero-bg:
    linear-gradient(135deg, rgba(2, 6, 111, 0.94), rgba(32, 0, 177, 0.86)),
    var(--brand-structure-elevated);
  --portal-metric-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 246, 251, 0.96));

  --button-primary-bg: linear-gradient(135deg, var(--brand-cta), var(--brand-cta-hover));
  --button-primary-text: #fffaf6;
  --button-primary-shadow: var(--brand-cta-shadow);
  --button-secondary-bg: var(--brand-surface-soft);
  --button-secondary-text: var(--brand-text);
  --button-danger-bg: linear-gradient(135deg, var(--brand-danger), var(--brand-danger-strong));
  --button-danger-text: #fff7f7;
  --button-hover-lift: translateY(-1px);
  --button-hover-filter: brightness(1.03);

  --table-head-bg: #f4f6fb;
  --table-head-text: #24305f;
  --table-grid: var(--brand-divider);
  --table-row-alt: var(--interactive-row-alt);
  --table-row-hover: var(--interactive-row-hover);

  --alert-success-bg: var(--brand-success-bg);
  --alert-success-text: var(--brand-success);
  --alert-success-border: var(--brand-success-border);
  --alert-info-bg: var(--brand-info-bg);
  --alert-info-text: var(--brand-info);
  --alert-info-border: var(--brand-info-border);
  --alert-warning-bg: var(--brand-warning-bg);
  --alert-warning-text: var(--brand-warning);
  --alert-warning-border: var(--brand-warning-border);
  --alert-danger-bg: var(--brand-danger-bg);
  --alert-danger-text: var(--brand-danger);
  --alert-danger-border: var(--brand-danger-border);

  --badge-neutral-border: var(--brand-border);
  --badge-neutral-bg: var(--brand-muted-bg);
  --badge-neutral-text: var(--brand-text);
  --badge-success-bg: var(--brand-success-bg);
  --badge-success-text: var(--brand-success);
  --badge-success-border: var(--brand-success-border);
  --badge-info-bg: var(--brand-info-bg);
  --badge-info-text: var(--brand-info);
  --badge-info-border: var(--brand-info-border);
  --badge-warn-bg: var(--brand-warning-bg);
  --badge-warn-text: var(--brand-warning);
  --badge-warn-border: var(--brand-warning-border);
  --badge-danger-bg: var(--brand-danger-bg);
  --badge-danger-text: var(--brand-danger);
  --badge-danger-border: var(--brand-danger-border);

  /* Data-visualisation colours stay functional, not brand-signalling. */
  --data-card-surface: #f6f7fa;
  --data-card-surface-strong: #ffffff;
  --data-card-border: #d5dce8;
  --data-card-text: var(--brand-text);
  --data-card-muted-text: var(--brand-muted-text);
  --data-grid: #d7dee8;
  --data-hover: #e8eef7;

  --data-color-1: #3b6fb6;
  --data-color-2: #1f8a70;
  --data-color-3: #c2871f;
  --data-color-4: #b24a3b;
  --data-color-5: #7c5ea6;
  --data-color-6: #64748b;

  --data-positive: var(--data-color-2);
  --data-negative: var(--data-color-4);
  --data-neutral: var(--data-color-6);

  --data-lifecycle-draft: var(--data-color-6);
  --data-lifecycle-issued: var(--data-color-1);
  --data-lifecycle-part-paid: var(--data-color-3);
  --data-lifecycle-paid: var(--data-positive);
  --data-lifecycle-void: var(--data-negative);

  --data-ageing-current-start: #79a0de;
  --data-ageing-current-end: var(--data-color-1);
  --data-ageing-warning-start: #f0c56b;
  --data-ageing-warning-end: var(--data-color-3);
  --data-ageing-overdue-start: #e69b61;
  --data-ageing-overdue-end: #cc6e32;
  --data-ageing-risk-start: #dc7b69;
  --data-ageing-risk-end: var(--data-negative);
  --data-ageing-critical-start: #ba5648;
  --data-ageing-critical-end: #8f3d32;

  --data-insight-risk-start: #daa458;
  --data-insight-risk-end: #a84f42;
  --data-insight-credit-start: #7a9fdb;
  --data-insight-credit-end: #3c8193;

  /* Shadows, radius, modal */
  --shadow-soft: 0 10px 24px rgba(7, 10, 24, 0.06);
  --shadow-card: 0 18px 38px rgba(7, 10, 24, 0.08);
  --modal-overlay: rgba(7, 10, 24, 0.44);
  --modal-surface: var(--brand-surface-strong);

  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --radius-xs: 8px;

  /* Fixed-light print contract */
  --print-ink: #020035;
  --print-heading: #020035;
  --print-label: #02066f;
  --print-muted: #525979;
  --print-line: #d9dce6;
  --print-divider: #ebeaed;
  --print-paper: #ffffff;
  --print-bg: #f2f3f4;
  --print-surface-soft: #f2f3f4;
  --print-accent: #ed4b00;
  --print-accent-soft: #fff0e8;
  --print-emphasis-bg: #020035;
  --print-emphasis-text: #ffffff;
  --print-sheet-shadow: 0 14px 32px rgba(7, 10, 24, 0.12);

  /* Compatibility aliases for converging shared UI. */
  --page-bg: var(--brand-bg);
  --page-bg-soft: var(--brand-bg-soft);
  --surface: var(--brand-surface);
  --surface-strong: var(--brand-surface-strong);
  --surface-soft: var(--brand-surface-soft);
  --surface-inset: var(--brand-surface-inset);
  --surface-muted: var(--brand-muted-bg);
  --surface-contrast: var(--brand-surface-contrast);
  --text: var(--brand-text);
  --text-muted: var(--brand-muted-text);
  --text-soft: var(--brand-soft-text);
  --text-inverse: var(--brand-inverse-text);
  --border: var(--brand-border);
  --border-strong: var(--brand-border-strong);
  --primary: var(--brand-primary);
  --primary-deep: var(--brand-primary-surface);
  --primary-soft: var(--brand-primary-soft);
  --primary-outline: var(--brand-primary-border);
  --accent: var(--brand-accent);
  --accent-soft: var(--brand-accent-soft);
  --accent-outline: var(--brand-accent-outline);
  --link: var(--brand-link);
  --link-hover: var(--brand-link-hover);
  --success-bg: var(--brand-success-bg);
  --success-text: var(--brand-success);
  --success-border: var(--brand-success-border);
  --danger: var(--brand-danger);
  --danger-deep: var(--brand-danger-strong);
  --danger-soft: var(--brand-danger-bg);
  --error-bg: var(--brand-danger-bg);
  --error-text: var(--brand-danger);
  --error-border: var(--brand-danger-border);
  --info-bg: var(--brand-info-bg);
  --info-text: var(--brand-info);
  --info-border: var(--brand-info-border);
}

/* Browser theme variants override the same semantic tokens. Print and PDF tokens remain fixed. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-primary-soft: rgba(32, 0, 177, 0.14);
  --brand-bg: #0b0d12;
  --brand-bg-soft: #11151d;
  --brand-surface: rgba(21, 26, 35, 0.94);
  --brand-surface-strong: #1b212b;
  --brand-surface-soft: #141a23;
  --brand-surface-inset: #11161f;
  --brand-muted-bg: #141a23;
  --brand-surface-contrast: #1d2440;

  --brand-text: var(--brand-text-dark);
  --brand-muted-text: var(--brand-muted-text-dark);
  --brand-soft-text: var(--brand-soft-text-dark);
  --brand-inverse-text: var(--brand-text-light);

  --brand-link: #cbd6ff;
  --brand-link-hover: #eff2ff;
  --brand-control-accent: #90a3ff;
  --brand-selected-bg: rgba(32, 0, 177, 0.22);
  --brand-selected-border: #7288ff;
  --brand-selected-text: #ffffff;

  --brand-border: #28303c;
  --brand-border-strong: #37404d;
  --brand-divider: #2f3744;
  --brand-divider-soft: #1d232e;
  --brand-input-bg: #11161f;
  --brand-input-bg-hover: #171d27;

  --brand-success: #73d0ab;
  --brand-success-bg: #16382b;
  --brand-success-border: #2d6e56;
  --brand-warning: #f1c57a;
  --brand-warning-bg: #3a2a14;
  --brand-warning-border: #866633;
  --brand-danger: #f0aba3;
  --brand-danger-strong: #db8b82;
  --brand-danger-bg: #341e1b;
  --brand-danger-border: #7e4943;
  --brand-danger-shadow: rgba(0, 0, 0, 0.28);
  --brand-info: #a7cae4;
  --brand-info-bg: #1f2f3b;
  --brand-info-border: #50697c;
  --settings-guidance-bg: rgba(114, 136, 255, 0.12);
  --settings-guidance-bg-hover: rgba(114, 136, 255, 0.18);
  --settings-guidance-border: rgba(114, 136, 255, 0.2);
  --settings-guidance-border-strong: rgba(152, 168, 255, 0.28);

  --brand-focus-ring: #98a8ff;
  --brand-focus-ring-soft: rgba(152, 168, 255, 0.24);
  --brand-focus-ring-strong: rgba(152, 168, 255, 0.38);

  --disabled-text: #8c95a7;
  --disabled-bg: #121720;
  --disabled-border: #29303b;
  --disabled-opacity: 0.62;
  --form-error-bg: #2b1a18;
  --form-error-border: #db8b82;
  --form-error-outline: rgba(219, 139, 130, 0.22);

  --interactive-surface-hover: #1a212c;
  --interactive-surface-active: #202833;
  --interactive-row-hover: rgba(255, 255, 255, 0.035);
  --interactive-row-alt: rgba(255, 255, 255, 0.018);
  --brand-bg-ambient: transparent;
  --table-row-selection: rgba(32, 0, 177, 0.18);

  --shell-bg: rgba(7, 9, 14, 0.96);
  --shell-bg-strong: rgba(13, 16, 24, 0.92);
  --shell-border: rgba(255, 255, 255, 0.08);
  --shell-subtle-bg: rgba(255, 255, 255, 0.05);
  --shell-subtle-border: rgba(255, 255, 255, 0.1);
  --logo-frame: rgba(255, 255, 255, 0.09);
  --logo-shadow: rgba(0, 0, 0, 0.34);
  --shell-shadow: rgba(0, 0, 0, 0.28);
  --nav-link-text: var(--brand-muted-text);
  --nav-link-hover-bg: rgba(255, 255, 255, 0.06);
  --nav-link-hover-border: rgba(255, 255, 255, 0.1);
  --nav-link-hover-text: var(--brand-text);
  --nav-active-bg: #2000b1;
  --nav-active-border: rgba(255, 255, 255, 0.22);
  --nav-active-text: #ffffff;

  --button-secondary-bg: #141a23;
  --button-secondary-text: var(--brand-text);
  --button-hover-filter: brightness(1.04);

  --table-head-bg: #161b24;
  --table-head-text: #ffffff;
  --table-grid: var(--brand-divider);
  --table-row-alt: var(--interactive-row-alt);
  --table-row-hover: var(--interactive-row-hover);

  --badge-neutral-border: var(--brand-border);
  --badge-neutral-bg: #141a23;
  --badge-neutral-text: var(--brand-text);

  --data-card-surface: #171c23;
  --data-card-surface-strong: #1c222b;
  --data-card-border: #313947;
  --data-card-text: var(--brand-text);
  --data-card-muted-text: var(--brand-muted-text);
  --data-grid: #434c5a;
  --data-hover: #202733;

  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.22);
  --shadow-card: 0 18px 38px rgba(0, 0, 0, 0.28);
  --modal-overlay: rgba(0, 0, 0, 0.62);
  --modal-surface: var(--brand-surface-strong);
  --public-section-alt-bg: linear-gradient(180deg, rgba(21, 26, 35, 0.88), rgba(16, 20, 28, 0.96));
  --public-footer-bg: rgba(7, 9, 14, 0.96);
  --public-footer-shadow: 0 -12px 32px rgba(0, 0, 0, 0.24);
  --public-footer-link-decoration: rgba(255, 255, 255, 0.18);

  --page-bg: var(--brand-bg);
  --page-bg-soft: var(--brand-bg-soft);
  --surface: var(--brand-surface);
  --surface-strong: var(--brand-surface-strong);
  --surface-soft: var(--brand-surface-soft);
  --surface-inset: var(--brand-surface-inset);
  --surface-muted: var(--brand-muted-bg);
  --surface-contrast: var(--brand-surface-contrast);
  --text: var(--brand-text);
  --text-muted: var(--brand-muted-text);
  --text-soft: var(--brand-soft-text);
  --text-inverse: var(--brand-inverse-text);
  --border: var(--brand-border);
  --border-strong: var(--brand-border-strong);
  --link: var(--brand-link);
  --link-hover: var(--brand-link-hover);
  --success-bg: var(--brand-success-bg);
  --success-text: var(--brand-success);
  --success-border: var(--brand-success-border);
  --danger: var(--brand-danger);
  --danger-deep: var(--brand-danger-strong);
  --danger-soft: var(--brand-danger-bg);
  --error-bg: var(--brand-danger-bg);
  --error-text: var(--brand-danger);
  --error-border: var(--brand-danger-border);
  --info-bg: var(--brand-info-bg);
  --info-text: var(--brand-info);
  --info-border: var(--brand-info-border);
}