/* St. Anthony brand palette.
 *
 * Loaded AFTER app.css and overriding only its colour primitives. app.css is
 * the shared design system copied from the Seefa assistant; keeping the
 * recolour in its own file means that file can be re-synced from there
 * without a merge, and it keeps every brand decision in one place.
 *
 *   #B94E23  terracotta   the brand's primary - baked crust
 *   #E7A47A  peach        its light companion
 *   #F4EFEA  linen        warm off-white page ground
 *   #2B2C30  charcoal     near-black for dark mode and body text
 *   #A8B09C  sage         a calm second accent
 *
 * The blue accent app.css ships with is replaced throughout. A cool blue on
 * a warm linen ground reads as two unrelated designs; terracotta belongs to
 * the same family as the paper it sits on.
 */

:root {
  --terracotta: #B94E23;
  --peach:      #E7A47A;
  --linen:      #F4EFEA;
  --charcoal:   #2B2C30;
  --sage:       #A8B09C;

  /* Redefine app.css's primitives so everything built on them follows. */
  --mist:     var(--linen);
  --graphite: var(--charcoal);
  --azure:    var(--terracotta);

  /* Surfaces. Elevated stays lighter than the ground so cards lift off it. */
  --bg:            var(--linen);
  --bg-elevated:   #FFFFFF;
  --material:      rgba(255, 255, 255, 0.74);
  --material-edge: rgba(185, 78, 35, 0.14);
  --scrim:         rgba(43, 44, 48, 0.30);

  --text:           var(--charcoal);
  --text-secondary: #5A5B60;
  --text-tertiary:  #8A8B90;

  /* Separators and fills pick up a trace of the brand rather than pure grey,
     which is what stops a warm palette looking accidentally dusty. */
  --separator:   rgba(43, 44, 48, 0.10);
  --fill:        rgba(185, 78, 35, 0.07);
  --fill-strong: rgba(185, 78, 35, 0.15);

  --accent:       var(--terracotta);
  --accent-hover: #A74420;
  --on-accent:    #FFFFFF;

  /* Sage carries "good" and terracotta carries "act on this". Amber and red
     are kept for warning and danger -- recolouring those to fit a palette
     would cost meaning that users already read correctly. */
  --success: #5F7F55;
  --warning: #B25000;
  --danger:  #C0392B;
}

/* Dark tokens, shared by the OS preference and the explicit override.
   Both blocks must be written: the OS-preference one cannot cover an
   explicit choice, and the explicit one cannot cover "follow the system". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #1C1D20;
    --bg-elevated:   var(--charcoal);
    --material:      rgba(43, 44, 48, 0.74);
    --material-edge: rgba(231, 164, 122, 0.12);
    --scrim:         rgba(0, 0, 0, 0.58);

    --text:           var(--linen);
    --text-secondary: #C9C4BE;
    --text-tertiary:  #94908B;

    --separator:   rgba(244, 239, 234, 0.12);
    --fill:        rgba(231, 164, 122, 0.10);
    --fill-strong: rgba(231, 164, 122, 0.20);

    /* Terracotta is too dark to read on near-black, so dark mode steps up to
       the peach. Same hue family, enough contrast to stay legible. */
    --accent:       var(--peach);
    --accent-hover: #F0B996;
    --on-accent:    #2B2C30;

    --success: var(--sage);
    --warning: #E0A852;
    --danger:  #EF8A7E;
  }
}

:root[data-theme="dark"] {
  --bg:            #1C1D20;
  --bg-elevated:   var(--charcoal);
  --material:      rgba(43, 44, 48, 0.74);
  --material-edge: rgba(231, 164, 122, 0.12);
  --scrim:         rgba(0, 0, 0, 0.58);

  --text:           var(--linen);
  --text-secondary: #C9C4BE;
  --text-tertiary:  #94908B;

  --separator:   rgba(244, 239, 234, 0.12);
  --fill:        rgba(231, 164, 122, 0.10);
  --fill-strong: rgba(231, 164, 122, 0.20);

  --accent:       var(--peach);
  --accent-hover: #F0B996;
  --on-accent:    #2B2C30;

  --success: var(--sage);
  --warning: #E0A852;
  --danger:  #EF8A7E;
}

/* The confidence grades are defined in planner.css against fixed colours;
   bring them into the palette so a plan does not sit in a different world
   from the page around it. */
.grade-High   { color: var(--success); }
.grade-Medium { color: var(--warning); }
.grade-Low    { color: var(--danger); }
:root[data-theme="dark"] .grade-High   { color: var(--sage); }
:root[data-theme="dark"] .grade-Medium { color: #E0A852; }
:root[data-theme="dark"] .grade-Low    { color: #EF8A7E; }