/* Design tokens: the spacing and type scale, then the colour roles for each side of
   the app. Components use the roles (--bg, --surface, --ink, --muted, --line, --accent,
   --link, --focus and the ok/hold/flag families), so one component reads right on the
   office's paper and on the customer's white page. After Campfire's colors.css. */

:root {
  /* Spacing, in the office's own rhythm. */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-s: 6px;
  --space-m: 8px;
  --space-l: 10px;
  --space-xl: 14px;
  --space-2xl: 18px;
  --space-3xl: 28px;

  /* Text sizes. */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-s: 13px;
  --text-m: 14px;
  --text-l: 16px;
  --text-xl: 22px;
  --text-2xl: 26px;

  /* Widths for fields and readable text. */
  --width-xs: 90px;
  --width-s: 160px;
  --width-m: 240px;
  --width-l: 360px;
  --width-xl: 560px;
  --width-2xl: 760px;
}

/* The office: oak and paper, the look in design/app-design.html. */
body.staff {
  --paper: #ECEEE7; --panel: #E2E6DC; --card: #F7F8F3; --ink: #1B241E; --oak: #2E4636;
  --line: #C8CEC1; --muted: #5A6358;
  --flag: #EE2F74; --flag-ink: #B3124C; --flag-wash: #FCE3EC;
  --hold: #835806; --hold-wash: #F6EAD0;
  --ok: #2C6E48; --ok-wash: #DCEBDF;

  --bg: var(--paper); --surface: var(--card); --accent: var(--oak); --on-accent: #fff;
  --link: var(--flag-ink); --focus: var(--flag);

  --display: "Archivo", system-ui, sans-serif;
  --body: "Public Sans", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
  --r: 6px;
}

/* The customer's pages: fence4atx.com's colours and the Poppins face of Nate's PDF
   estimates. --blue-fill is the blue dark enough to carry white text. */
body.customer {
  --black: #161717; --navy: #18212D; --blue: #3F98D4; --blue-fill: #2478B0; --blue-ink: #24719F; --blue-wash: #EAF4FB;
  --ink: #333333; --muted: #6B7072; --grey: #C0C4CA; --line: #E1E4E8; --paper: #F4F6F8; --white: #FFFFFF;
  --ok: #2C7A4B; --ok-wash: #E3F2E8;
  --hold: #8A5300; --hold-wash: #FDF1E3;

  --bg: var(--paper); --surface: var(--white); --accent: var(--blue-fill); --on-accent: var(--white);
  --link: var(--blue-ink); --focus: var(--blue);

  --display: "Poppins", system-ui, sans-serif;
  --body: "Poppins", system-ui, sans-serif;
  --r: 8px;
}

/* The project detail document's own palette: Nate's legend, one colour per design. It
   prints, so it doesn't follow either side. */
.pd, .pd-swatch, .pd-crew, .pd-edit-design {
  --pd-ink: #161717; --pd-text: #333333; --pd-muted: #6B7072; --pd-line: #E1E4E8; --pd-wash: #F4F6F8; --pd-accent: #24719F;
  --pd-c1: #161717; --pd-c2: #2E7D4F; --pd-c3: #2563A6; --pd-c4: #6B4A9E;
}