/* ==========================================================================
   PDC colour scheme
   --------------------------------------------------------------------------
   To re-colour the whole site, change the brand colours below. Every other
   shade (tints, borders, dark bands, the hero illustration, icons) is mixed
   from them, and build.py copies them into the favicon, the tick icon and
   the browser's theme colour ({{theme:--name}} in those files).

   Design 2 is orange and black (the old site's orange, #ff7000). Others to
   try (swap in the lines):
     Blue (design 1):
       --brand: #0b5cad;  --brand-light: #3cb4f0;  --brand-dark: #061f3f;
       --brand-mid: #0b5cad;  --brand-ink: #0b5cad;  --on-brand: #ffffff;  --on-dark: #eaf3ff;
     Teal:
       --brand: #0f766e;  --brand-light: #2dd4bf;  --brand-dark: #083d3a;
       --brand-mid: #0f766e;  --brand-ink: #0f766e;  --on-brand: #ffffff;  --on-dark: #e6fbf8;
   ========================================================================== */

:root {
  /* Brand colours */
  --brand:       #ff7000;   /* PDC orange: buttons, icon tiles */
  --brand-light: #ff9a3c;   /* light orange: highlights on dark, accents */
  --brand-dark:  #141414;   /* near-black: header, dark bands, footer */
  --brand-mid:   #3d3d3d;   /* graphite: shading in dark bands, the hero machinery */
  --brand-ink:   #b45000;   /* orange dark enough to read on white: links, small headings */
  --on-brand:    #141414;   /* text and icons on --brand (black on orange) */
  --on-dark:     #f5f1eb;   /* text on the dark bands */

  /* Neutrals */
  --ink:   #1a1a1a;          /* body text */
  --muted: #5c5c5c;          /* secondary text */
  --paper: #ffffff;          /* page background */

  /* Mixed from the above: normally no need to touch */
  --brand-hover:  color-mix(in srgb, var(--brand) 82%, black);
  --brand-ink-hover: color-mix(in srgb, var(--brand-ink) 80%, black);
  --brand-tint:   color-mix(in srgb, var(--brand-light) 12%, var(--paper));
  --brand-tint-2: color-mix(in srgb, var(--brand-light) 24%, var(--paper));
  --soft:         color-mix(in srgb, var(--brand) 4%, var(--paper));
  --line:         color-mix(in srgb, var(--brand) 14%, var(--paper));
  --on-dark-muted: color-mix(in srgb, var(--on-dark) 70%, var(--brand-dark));
  --dark-2:       color-mix(in srgb, var(--brand-dark) 82%, var(--brand-mid));
  --glow:         color-mix(in srgb, var(--brand-light) 45%, transparent);

  /* Shape and type */
  --radius:    14px;
  --radius-sm: 8px;
  --shadow:    0 1px 2px color-mix(in srgb, var(--brand-dark) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--brand-dark) 8%, transparent);
  --shadow-lg: 0 2px 4px color-mix(in srgb, var(--brand-dark) 6%, transparent), 0 18px 48px color-mix(in srgb, var(--brand-dark) 14%, transparent);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1180px;
}