/* tokens.css
   Design tokens shared by every page. Change a colour here and it changes everywhere.
   The website keeps an identical copy at v2assets/css/v5tokens.css (loaded first by includes/v5pagetop.php).
   Keep the two files the same: edit one, copy it over the other. */

:root {
  /* brand blue */
  --blue: #2491eb;
  --blue-dark: #1f7fd1;
  --blue-tint: #e9f4fd;
  --blue-text: #1a6fb8;
  --blue-border: #d6e8f8;

  /* orange (call-to-action buttons, warnings, pin star) */
  --orange: #fbb03b;
  --orange-cta: #fbb03b;
  --orange-hover: #ffc15e;
  --orange-tint: #fef3e2;
  --orange-text: #a86a00;
  --gold: #e6a02a;

  /* text and neutrals */
  --ink: #232122;
  --text: #575556;
  --muted: #8a8888;
  --line: #ececec;
  --page: #f5f9fd;
  --card: #ffffff;
  --grey-tint: #f1f0f0;
  --grey-300: #c3ccd6;
  --grey-400: #b6bcc4;
  --track: #edf2f7;
  --border-strong: #dbe4ee;
  --border-soft: #e3e8ee;

  /* errors and destructive actions */
  --danger: #b3261e;
  --danger-soft: #d64545;
  --danger-tint: #fdecea;

  /* gradients */
  --gradient-brand: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);   /* hero band, login brand panel */
  --gradient-bar: linear-gradient(90deg, var(--blue-dark), var(--blue));   /* bar chart fills */

  /* shape */
  --radius: 18px;
  --shadow: 0 1px 2px rgba(35,33,34,.04), 0 10px 30px rgba(20,60,100,.08);
}