/* Cardlink brand tokens — v1.0
   Drop into any surface (contact page, admin console, intranet page).
   The variable names match the ones used by the Cardlink server (`--brand`, `--ink`, ...). */
@font-face { font-family: "Archivo"; font-weight: 600; src: url("fonts/archivo-600.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; font-weight: 700; src: url("fonts/archivo-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; src: url("fonts/ibm-plex-sans-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; src: url("fonts/ibm-plex-sans-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; src: url("fonts/ibm-plex-sans-600.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); font-display: swap; }

:root {
  /* Colour */
  --brand:      #E2231A;   /* Bank red — replace with the official value from the corporate brand guide */
  --brand-deep: #B51B14;   /* pressed / hover state of red */
  --brand-tint: #FDEDEC;   /* 8% red on white: avatar disc, selected rows */
  --ink:        #17171B;   /* text, QR modules, the mark */
  --slate:      #6F6F78;   /* secondary text, labels */
  --mist:       #E4E4EA;   /* rules, borders */
  --fog:        #F4F4F6;   /* page background, fields */
  --paper:      #FFFFFF;
  --ok:         #1F8A56;   /* "saved", live */
  --warn:       #C17A12;   /* needs a look */

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;          /* names, headings, the wordmark */
  --font-body:    "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif; /* everything else */
  --font-data:    "IBM Plex Mono", Menlo, Consolas, monospace;            /* phone numbers, links, slugs */

  /* Scale (rem) */
  --t-display: 1.5rem;  /* 24px — person's name on the contact page */
  --t-title:   1.25rem; /* 20px — console page titles */
  --t-body:    0.9375rem; /* 15px */
  --t-small:   0.8125rem; /* 13px */
  --t-label:   0.6875rem; /* 11px, uppercase, +0.06em tracking */

  /* Shape */
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-mark: 10%;   /* the mark's outer corner = 10% of its height */
}