:root {
  /* Hex values pulled verbatim from
     app/node_modules/@fixefy/fixefy-ui-utils/dist/page_context/index.js
     (the same package consumed by app/'s ThemeProvider in pages/_app.tsx). */

  /* primary scale (theme.palette.primary) */
  --fx-primary-main: #365c65;
  --fx-primary-100:  #C6DDE2;
  --fx-primary-300:  #87ACB6;
  --fx-primary-400:  #749da8;
  --fx-primary-500:  #568793;
  --fx-primary-700:  #3C636C;
  --fx-primary-800:  #2F4F57;

  /* greyscale (theme.palette.greyscale) */
  --fx-greyscale-100: #F7F7F7;
  --fx-greyscale-200: #F0F0F0;
  --fx-greyscale-300: #C5C8C9;
  --fx-greyscale-400: #8B9092;
  --fx-greyscale-500: #5C6467;
  --fx-greyscale-dark:  #636363;
  --fx-greyscale-light: #e2e2e2;
  --fx-greyscale-main:  #ababab;
  --fx-greyscale-contrast: #f7f7f7;

  /* Aliases kept for existing CSS that already references these names. */
  --fx-grey-200: var(--fx-greyscale-200);
  --fx-grey-300: var(--fx-greyscale-300);
  --fx-grey-400: var(--fx-greyscale-400);
  --fx-statistics-label: #8B9092;
  --fx-header-bg: #E2EEF1;
  --fx-progress-track: #E7EEF0;
  --fx-progress-fill: #87ACB6;

  /* typography + page (theme.palette.typography, theme.palette.background) */
  --fx-title: #172326;
  --fx-body:  #5C6467;            /* maps to greyscale.500 */
  --fx-divider: #F0F0F0;
  --fx-page-bg: #F7F7F7;
  --fx-white: #FFFFFF;

  /* semantic — derived from invoiceState.* / score.* / status.* (NOT the loose CSS aliases
     that diverged in pass 1). */
  --fx-success:       #27AE60;       /* invoiceState.approved.background, score.excellent */
  --fx-success-light: #EEF9F2;       /* status.approved.background / invoiceState.approved.light */
  --fx-danger:        #EB5757;       /* redscale.main + in_dispute.background */
  --fx-danger-light:  #FEF6F6;       /* in_dispute.light */
  --fx-warning:       #F2994A;       /* score.low / declined.background */
  --fx-warning-light: #FEF7F1;       /* pending_resolution.light */
  --fx-info:          #56CCF2;       /* in_progress.background / info.icon */
  --fx-info-light:    #F1FBFE;       /* in_progress.light */
  --fx-purple:        #BB6BD9;       /* paid.background */

  /* score tier colors (theme.palette.score) */
  --fx-score-excellent: #27AE60;
  --fx-score-high:      #88C00D;
  --fx-score-medium:    #F2C94C;
  --fx-score-low:       #F2994A;
  --fx-score-bad:       #ED323B;

  --fx-shadow: 0px 4px 18px rgba(86, 135, 147, 0.14);
  --fx-shadow-hover: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  --fx-radius: 8px;
  --fx-radius-lg: 12px;
  --fx-sidebar-w: 72px;
  --fx-header-h: 64px;
  --fx-column-w: 308px;
  --fx-column-gap: 24px;
  --fx-font: "Open Sans", sans-serif;
  --fx-demobar-h: 32px;

  --state-pending:             #2D9CDB;
  --state-pending-resolution:  #EC7A30;
  --state-in-progress:         #56CCF2;
  --state-in-dispute:          #EB5757;
  --state-pending-credit:      #EF8ED4;
  --state-approved:            #27AE60;
  --state-partially-credited:  #AE5395;
  --state-credited:            #EC6AC8;
  --state-paid:                #BB6BD9;
  --state-rejected:            #C42A20;
  --state-partially-approved:  #88C00D;
  --state-resolved:            #BB6BD9;
  --state-declined: #F2994A;
  --state-closed: #8B9092;

}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--fx-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fx-title);
  background: var(--fx-page-bg);
  -webkit-font-smoothing: antialiased;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#app {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
button { font-family: var(--fx-font); }