/* ============================================================================
   Recollections Jewellery — the named values, in one place.

   Both the shop (index.html) and the Studio (studio/index.html) load this file,
   so a colour changed here changes in both at once. It used to be two separate
   lists that had drifted apart, with six names holding two slightly different
   values, which was visible where the Studio sits inside the product page.

   This file has to travel with the other three. If you move index.html on its
   own, it will open without any of its colours.
   ============================================================================ */

:root{

  /* ---- Ink and navy ---------------------------------------------------- */
  --navy:#0F1944;        /* headings, the header, the dark panels            */
  --navy-2:#1B2456;      /* navy one step lighter, for hover                 */
  --navy-3:#2A3466;      /* navy two steps lighter, trade portal only        */
  --ink:#2A2E3F;         /* body text                                        */
  --muted:#5A6072;       /* second-rank text, 5.65 to 1 on the cream         */

  /* ---- Gold ------------------------------------------------------------ */
  --gold:#C8B273;        /* the brand gold, for rules and large marks        */
  --gold-deep:#6E5A28;   /* gold dark enough to set text in, 6.0 to 1        */
  --gold-soft:#E7DCBD;   /* gold at its palest, for backgrounds             */

  /* ---- Paper ----------------------------------------------------------- */
  --cream:#F6F3EA;       /* the page                                         */
  --cream-2:#EFE9DA;     /* panels and bands laid over the page              */
  --cream-3:#FAF8F2;     /* the palest cream, nearly white                   */
  --white:#FFFFFF;

  /* ---- Lines ----------------------------------------------------------- */
  --line:#E2DCCA;        /* every border and divider                         */
  --line-2:#EAE5D8;      /* a fainter divider, inside panels                 */

  /* ---- Colour that carries meaning ------------------------------------- */
  --garnet:#4A0000;
  --amber:#7A4C09;   --amber-bg:#FBEED6;   /* waiting on something, 6.5 to 1 */
  --blue:#2F4F95;    --blue-bg:#E6ECF8;    /* in progress                   */
  --green:#2F6B45;   --green-bg:#E2EFE7;   /* done                          */

  /* ---- Type ------------------------------------------------------------ */
  --body:'Spectral', Georgia, 'Times New Roman', serif;
  --head:'Jost', 'Futura', 'Century Gothic', sans-serif;

  /* ---- Measurements ---------------------------------------------------- */
  /* The widest the content runs. Fluid: on a large screen the page keeps
     using the width rather than sitting in a 1240px column with empty
     margins either side, and never touches the edge of the glass. */
  --maxw:min(1560px, 93vw);
  --r:16px;              /* the standard corner                              */
  --shadow:0 18px 50px rgba(15,25,68,.10);
  --shadow-sm:0 8px 24px rgba(15,25,68,.08);

  /* ---- The five widths the whole prototype changes at ------------------ *
   * 480   a small phone
   * 600   a phone
   * 768   a large phone, and a tablet held upright
   * 1000  a tablet on its side, and the width the header and the Studio
   *       both change at
   * 1240  a desktop
   * These cannot be used inside a media query, because a media query cannot
   * read a custom property. They are written here so the list is in one
   * place and the numbers in the two documents can be checked against it.
   * ---------------------------------------------------------------------- */
  --bp-1:480px;
  --bp-2:600px;
  --bp-3:768px;
  --bp-4:1000px;
  --bp-5:1240px;
}