/* ==========================================================================
   spICE child theme — RED (#e12f18)

   The De Korne house accent (theme.json preset accent-3). Load after the
   parent stylesheet and mark the widget with data-spice-brand="red":

     <link rel="stylesheet" href="/static/spice-tool.css" />
     <link rel="stylesheet" href="/static/themes/spice-theme-red.css" />
     <div data-spice-tool data-brand="red"></div>

   Only accent tokens live here. Anything structural belongs in the parent —
   if you find yourself writing a layout rule in this file, it is a parent
   rule wearing a brand costume.
   ========================================================================== */

.spice-root[data-spice-brand="red"] {
  --spice-accent: #e12f18;
  --spice-accent-strong: #a81d0f;
  --spice-accent-soft: #fdecea;
  --spice-accent-visited: #ef8d7f;
  --spice-hero-from: #e12f18;
}

/* --- dark ---------------------------------------------------------------
   Lightened to #ff5a42 so it still clears 4.5:1 against the near-black
   surface; the parent already flips --spice-on-accent to dark text.
   ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .spice-root[data-spice-brand="red"]:not([data-spice-theme="light"]) {
    --spice-accent: #ff5a42;
    --spice-accent-strong: #ff8a78;
    --spice-accent-soft: #3a1410;
    --spice-accent-visited: #a83a29;
  }
}

.spice-root[data-spice-brand="red"][data-spice-theme="dark"] {
  --spice-accent: #ff5a42;
  --spice-accent-strong: #ff8a78;
  --spice-accent-soft: #3a1410;
  --spice-accent-visited: #a83a29;
}

/* --- logo ---------------------------------------------------------------
   No mark yet - this brand gets its own artwork later. Until a rule here
   turns .spice-logo on with a background-image, the parent's slot stays
   collapsed and the header simply has no logo.
   ---------------------------------------------------------------------- */