/* =====================================================================
   SITE COLOURS
   This file controls every colour on the website.
   No other CSS file contains a colour, so this is the only place to edit.
   ===================================================================== */

:root {
  /* ---------- STEP 1: Your colour palette ---------- */
  /* Change any hex code here and it updates everywhere that colour is used. */

  --pink: #f599c6;
  --yellow: #ffea88;
  --mint: #7dccad;
  --slate: #D0BFFF;

  /* ---------- STEP 2: Choose a colour for each part of the site ---------- */
  /* Pick from the palette above, e.g. change var(--pink) to var(--mint).
     You can also type a hex code straight in, e.g. --colour-header: #ffcc00; */

  --colour-header: var(--pink);
  /* The top bar, and the mobile menu */

  --colour-background: color-mix(in srgb, var(--yellow) 35%, white);
  /* The page background. This is a soft tint: 35% yellow mixed with white.
     Raise the 35% for a stronger colour, lower it for a paler one. */

  --colour-footer: var(--slate);
  /* The footer, including its wavy top edge */

  --colour-button: var(--slate);
  /* Main buttons: Add to basket, Checkout, "Go to the store" */

  --colour-highlight: var(--mint);
  /* Small accents: the basket count, the "Added!" message, button hovers */

  --colour-nav-button: var(--colour-surface);
  /* The rounded page links in the header */

  --colour-nav-featured: var(--yellow);
  /* The one header link that stands out (Store) */

  --colour-outline: var(--colour-text);
  /* The dark outline around every rounded button */

  /* ---------- STEP 3: Text and finishing touches ---------- */
  /* These rarely need changing. */

  --colour-text: #2b2b2b;
  /* Main text, used on light backgrounds (page, header, highlights). Also colours the header logo */

  --colour-text-soft: #5a5a5a;
  /* Lighter text, for small print */

  --colour-text-on-dark: black;
  /* Text on dark backgrounds (footer, main buttons) */

  --colour-surface: white;
  /* Panels and boxes: the basket, dropdowns, quantity selectors, email box */

  --colour-border: rgba(0, 0, 0, 0.15);
  /* Thin dividing lines */

  --dot-active: var(--slate);
  --dot-inactive: var(--colour-surface);
  --dot-border: var(--slate);
  /* The photo carousel's dots */
}