/* =========================================================================
 * AtRest theme colours (v1.0.0) — the ONE place the main colours are set.
 *
 * Used by the Funeral Planner, Phonebook and Appointments style sheets (and the planner's
 * date / time pickers and Email Log). They never write these colours themselves any more:
 * they only use the --at-… names below.
 *
 * Where a colour exists in Breakdance → Global Settings → Colors, it is read from there, so
 * changing it in Breakdance changes it here too. The value after the comma is only used if
 * Breakdance's colour is ever missing.
 *
 *   Breakdance "Brand"        → --at-brand        (burgundy: buttons, links, selected days, headings marks)
 *   Breakdance "Text"         → --at-text
 *   Breakdance "Headings"     → --at-heading
 *   Breakdance "Background"   → --at-page-bg      (the page behind the white panels)
 *   Palette "gray 600"        → --at-muted        (grey labels and secondary text)
 *   Palette "gray 200"        → --at-paper        (off-white areas, e.g. weekends, the phonebook page)
 *
 * The rest have no Breakdance global yet, so their values are set here. To have Breakdance control one,
 * add it to the Breakdance palette and tell Claude its name: it's a one-line change below.
 *
 * Not set here on purpose: status / indicator colours (Holiday, Day off, Training, warnings, "confirmed"
 * greens…). They mean something, so they stay with their module.
 * ====================================================================== */

:root {
  /* Read from Breakdance */
  --at-brand:        var(--bde-brand-primary-color, #802F36);
  --at-text:         var(--bde-body-text-color, #151411);
  --at-heading:      var(--bde-headings-color, #151411);
  --at-page-bg:      var(--bde-background-color, #F0EFE9);
  --at-muted:        var(--bde-palette-color-1-cfcc31d4-24a0-458c-9952-571b4b3784dc, #858B96); /* palette: gray 600 */
  --at-paper:        var(--bde-palette-color-1-00f35749-f641-4b60-af91-bebf4d2fdd2d, #FBFAF6); /* palette: gray 200 */

  /* Set here */
  --at-panel:        #FFFFFF;   /* white panels, cards, pop-ups */
  --at-soft:         #F6F4EF;   /* light panels: headers, hover rows, notes */
  --at-soft-2:       #ECEAE5;   /* a step darker: neutral tags, dividers inside panels */
  --at-line:         #E4E1DA;   /* panel borders and lines */
  --at-line-strong:  #D5D1C8;   /* stronger borders, disabled text */
  --at-input-border: #C9C5BC;   /* boxes, outline buttons */
  --at-muted-dark:   #6B6F76;   /* darker grey text */
  --at-danger:       #B3261E;   /* delete buttons, errors */
  --at-danger-tint:  #FBE9E7;   /* light red behind errors */

  /* Shades of the brand colour (worked out from --at-brand, so they follow it) */
  --at-brand-dark:        #6A262C;   /* hover on burgundy buttons */
  --at-brand-tint:        #F3E7E8;   /* light burgundy: hovers, selected rows */
  --at-brand-tint-soft:   #FBF6F6;
  --at-brand-tint-strong: #F0DCDE;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
  :root {
    --at-brand-dark:        color-mix(in srgb, var(--at-brand) 83%, black);
    --at-brand-tint:        color-mix(in srgb, var(--at-brand) 11%, white);
    --at-brand-tint-soft:   color-mix(in srgb, var(--at-brand) 4%, white);
    --at-brand-tint-strong: color-mix(in srgb, var(--at-brand) 17%, white);
  }
}

/* The Funeral Planner's own colour names, pointed at the ones above.
 * (Also needed for the date / time pop-up on pages that don't load the planner styles.) */
.atp {
  --atp-brand: var(--at-brand);
  --atp-text:  var(--at-text);
  --atp-muted: var(--at-muted);
  --atp-line:  var(--at-line);
  --atp-card:  var(--at-panel);
  --atp-soft:  var(--at-soft);
}