/*
  Design tokens for the ICT Services dashboard portal.

  The dashboard HTML files use the --color-* properties but never define them -
  they were inherited from the tool the dashboards were authored in. Defining
  them here is what makes a dashboard render correctly when served standalone.
  Do not rename those keys. Change the values, not the names.
*/
:root {
  /* Brand. #DE1352 is taken from the ICT Services logo artwork. */
  --ict-crimson: #DE1352;
  --ict-crimson-deep: #A50D3C;
  --ict-crimson-wash: #FDEEF2;

  /* Surfaces */
  --ict-paper: #FFFFFF;
  --ict-canvas: #F2F3F7;
  --ict-hairline: #E3E5ED;
  --ict-hairline-soft: #EDEFF4;

  /* Text */
  --ict-ink: #16171C;
  --ict-muted: #62667A;

  /* Status */
  --ict-fresh: #0E7C55;
  --ict-fresh-wash: #E7F5EF;
  --ict-stale: #9A5B00;
  --ict-stale-wash: #FBF1E2;

  /* Consumed by the dashboard files. Light theme. */
  --color-background-primary: #FFFFFF;
  --color-background-secondary: #F2F3F7;
  --color-background-tertiary: #F7F8FB;
  --color-border-tertiary: #E3E5ED;
  --color-border-secondary: #CFD3E0;
  --color-text-primary: #16171C;
  --color-text-secondary: #62667A;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
}

html { background: var(--ict-canvas); color-scheme: light; }
body { background: var(--ict-canvas); color: var(--ict-ink); }