/*
  The Cakery brand theme: the only file to edit when the bakery's colors change.

  Every brand color on the site (buttons, footer, chat, studio panels, borders,
  hover states) comes from these values. Lighter and
  darker shades are mixed from them below, so a new palette only needs the
  values in the first block. Icing colors inside the 3D cake studio are cake
  options, not brand colors, and live in studio-model.js.

  Logo: replace public/images/logo.png (any shape; it is scaled to --logo-height).
  Also update <meta name="theme-color"> in public/index.html to match --brand
  (browsers can't read CSS variables there).
*/
:root{
  /* ---- Brand palette: change these ---- */
  --brand:#941e43;          /* main brand color: buttons, footer, links, top bar */
  --brand-strong:#741434;   /* darker brand for hover and pressed states */
  --accent:#bc637e;         /* secondary accent: focus rings, highlights */
  --ink:#39232b;            /* headings and body text */
  --muted:#705b62;          /* secondary text */
  --surface:#fffdfc;        /* page background */
  --card:#ffffff;           /* cards, inputs, panels */
  --tint:#f9e9ec;           /* soft section backgrounds */
  --tint-strong:#efcdd6;    /* stronger tint for chips and stamps */
  --line:#e6d8dc;           /* borders and dividers */
  --on-brand:#ffffff;       /* text on top of --brand */

  /* ---- Logo size (height; width follows the logo's own shape) ---- */
  --logo-height:107px;
  --logo-height-small:96px;
  --logo-height-footer:116px;

  /* ---- Fonts ---- */
  --display:'Fraunces',Georgia,serif;
  --body:'DM Sans',Arial,sans-serif;

  /* ---- Derived shades: normally leave these alone ---- */
  --brand-deep:color-mix(in srgb,var(--brand-strong) 80%,var(--ink));
  --accent-soft:color-mix(in srgb,var(--accent) 48%,var(--tint));
  --accent-line:color-mix(in srgb,var(--accent) 22%,var(--line));
  --accent-ink:color-mix(in srgb,var(--accent) 70%,var(--muted));
  --tint-mid:color-mix(in srgb,var(--tint-strong) 45%,var(--tint));
  --wash:color-mix(in srgb,var(--tint) 30%,var(--surface));
  --wash-strong:color-mix(in srgb,var(--tint) 65%,var(--surface));
  --ink-brand:color-mix(in srgb,var(--ink) 70%,var(--brand));
  --on-brand-soft:color-mix(in srgb,var(--on-brand) 82%,var(--tint-strong));
  --on-brand-line:color-mix(in srgb,var(--on-brand) 22%,transparent);
  --on-brand-edge:color-mix(in srgb,var(--on-brand) 33%,transparent);
  --shadow:color-mix(in srgb,var(--ink) 10%,transparent);
  --shadow-strong:color-mix(in srgb,var(--ink) 22%,transparent);
  --scrim:color-mix(in srgb,var(--ink) 65%,transparent);
  --scrim-strong:color-mix(in srgb,var(--ink) 85%,transparent);
  --glass:color-mix(in srgb,var(--surface) 93%,transparent);

  /* Older names still used across the stylesheets */
  --berry:var(--brand);
  --pink:var(--tint);
  --blush:var(--tint-strong);
  --white:var(--surface);
}