/*
 * Peacock theme
 * =============
 *
 * Every colour, font and size the public site uses is defined here, as a
 * custom property. To re-theme Peacock, change the values in this file;
 * nothing else needs to change.
 *
 *   bootstrap-theme.css  maps these tokens onto Bootstrap's own variables,
 *                        so Bootstrap components (forms, modals, alerts...)
 *                        follow the theme.
 *   peacock.css          Peacock's components, built only from these tokens.
 *
 * The default theme is dark: a deep purple ground, slightly lighter panels,
 * faint borders, off-white text and a single cyan accent.
 */

:root {
  /* ---- Surfaces -------------------------------------------------------- */
  --pc-color-bg: #1a0933;               /* page background */
  --pc-color-surface: #21103d;          /* panels, cards, the nav bar */
  --pc-color-surface-raised: #29174a;   /* menus, dialogs, sticky bars */
  --pc-color-surface-sunken: #160629;   /* inside form fields */
  --pc-color-hover: rgb(255 255 255 / 0.04);   /* hovered rows and buttons */
  --pc-color-band: rgb(255 255 255 / 0.025);   /* day dividers, review groups */

  /* ---- Lines ----------------------------------------------------------- */
  --pc-color-border: rgb(255 255 255 / 0.08);         /* dividers, panels */
  --pc-color-border-strong: rgb(255 255 255 / 0.16);  /* controls, outlines */

  /* ---- Text ------------------------------------------------------------ */
  --pc-color-text: #ece8f5;          /* body copy and headings */
  --pc-color-text-muted: #a99cc4;    /* secondary details */
  --pc-color-text-subtle: #8a7dab;   /* labels, captions, metadata */

  /* ---- Accent: links, focus, the current page, the main action --------- */
  --pc-color-accent: #32fbe2;
  --pc-color-accent-hover: #7cfdee;
  --pc-color-accent-soft: rgb(50 251 226 / 0.12);   /* tinted backgrounds */
  --pc-color-accent-line: rgb(50 251 226 / 0.5);    /* tinted outlines */
  --pc-color-on-accent: #170229;                     /* text on the accent */

  /* ---- Status: text, tinted background and outline for each ------------ */
  --pc-color-success: #7fe3ab;
  --pc-color-success-bg: rgb(60 242 129 / 0.12);
  --pc-color-success-line: rgb(60 242 129 / 0.45);
  --pc-color-warning: #f3c86a;
  --pc-color-warning-bg: rgb(241 182 51 / 0.13);
  --pc-color-warning-line: rgb(241 182 51 / 0.45);
  --pc-color-danger: #f2959a;
  --pc-color-danger-bg: rgb(228 76 85 / 0.15);
  --pc-color-danger-line: rgb(228 76 85 / 0.5);
  --pc-color-info: #8fd0fb;
  --pc-color-info-bg: rgb(27 162 246 / 0.14);
  --pc-color-info-line: rgb(27 162 246 / 0.45);
  --pc-color-neutral-bg: rgb(255 255 255 / 0.07);

  /* ---- Type ------------------------------------------------------------ */
  --pc-font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
  --pc-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pc-font-size-display: 1.5rem;   /* page titles */
  --pc-font-size-heading: 1.0625rem; /* panel and section headings */
  --pc-font-size-body: 0.9375rem;   /* running text */
  --pc-font-size-small: 0.875rem;   /* tables, fields, buttons */
  --pc-font-size-label: 0.75rem;    /* column heads, labels, metadata */
  --pc-font-size-total: 1.125rem;   /* the total under a price list */
  --pc-font-size-prose-heading: 1.1875rem; /* headings inside admin-written text */
  --pc-font-size-icon: 0.95rem;     /* icons set in a line of text */
  --pc-font-size-status-icon: 1.4rem; /* the mark on a confirmation */
  --pc-font-size-status-code: 3rem;   /* the number on an error page */
  --pc-font-weight-normal: 400;
  --pc-font-weight-bold: 700;
  --pc-font-weight-black: 900;
  --pc-line-height: 1.55;
  --pc-letter-spacing-label: 0.07em; /* uppercase labels */
  --pc-prose-width: 65ch;            /* comfortable reading measure */

  /* ---- Shape and space ------------------------------------------------- */
  --pc-radius: 8px;          /* panels */
  --pc-radius-small: 6px;    /* buttons, fields */
  --pc-radius-pill: 999px;   /* pills, chips */
  --pc-radius-tiny: 4px;     /* inline code */
  --pc-space-1: 0.25rem;
  --pc-space-2: 0.5rem;
  --pc-space-3: 0.75rem;
  --pc-space-4: 1rem;
  --pc-space-5: 1.5rem;
  --pc-space-6: 2.5rem;
  --pc-control-height: 2.375rem;        /* fields and buttons */
  --pc-control-height-small: 1.875rem;  /* buttons inside tables */
  --pc-tap-height: 2.75rem;             /* menu rows on phones */
  --pc-page-width: 64rem;               /* widest content column */
  --pc-page-width-narrow: 44rem;        /* forms and single-panel pages */
  --pc-page-width-dialog: 28rem;        /* log in, errors, confirmations */

  /* ---- Form control icons -----------------------------------------------
     SVGs for Bootstrap's select arrow and checked boxes. Their colours are
     --pc-color-text-muted (#a99cc4) and --pc-color-on-accent (#170229),
     URL-encoded: change them together. */
  --pc-icon-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a99cc4' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m3.5 6 4.5 4.5 4.5-4.5'/%3e%3c/svg%3e");
  --pc-icon-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23170229' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  --pc-icon-radio: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23170229'/%3e%3c/svg%3e");

  /* ---- Focus ----------------------------------------------------------- */
  --pc-focus-ring: 0 0 0 3px rgb(50 251 226 / 0.35);

  color-scheme: dark;
}