/* Themes.
 *
 * Loaded last, so it wins over app.css and shell.css. Everything here is a
 * variable swap plus a small number of places where Classic hard-codes a warm
 * tint that Branded cannot live with.
 *
 * Classic is the default and is simply the absence of a data-theme attribute
 * (or data-theme="classic"). The Appearance page writes per-colour hex
 * overrides into a `:root{}` block injected by the server, which outranks the
 * attribute selectors below without needing !important.
 *
 * Palette from Tom's Partner Book cover:
 *   ground   near-black maroon #2a0508 to burgundy #5c1218, radial
 *   cream    #f3ede3 — the wordmark, type on dark, and card surfaces
 *   accent   #e8442a — the chef's hat red-orange; replaces Classic's green
 */

/* ---------- shared tokens ---------- */
:root {
  /* Blog comments (Hyvor) are the third platform and need their own colour in
     both themes; Classic never had one. */
  --ht: #7A5AA8;
  --drawer-bg: var(--card);
  --drawer-ink: var(--ink-soft);
  --page-bg: var(--ivory);
  --heading-font: inherit;
  --label-spacing: .5px;
  --label-transform: uppercase;
}

/* ================= BRANDED ================= */

/* The branded palette. Also available scoped to any element that carries
   `data-theme="branded"`, not only to the document — the giveaway preview
   inside the builder has to wear the entrant page's colours whichever theme
   Tom is running the admin in, and the entrant page is always branded. */
:root[data-theme="branded"],
[data-theme="branded"] {
  --ivory:      #430d13;   /* mid burgundy: the flat fallback for the ground */
  --card:       #f3ede3;   /* cream cards sit on the burgundy */
  --ink:        #2b1114;   /* type on cream */
  --ink-soft:   #6d4e50;
  --line:       #dccfbe;
  --fb:         #3B6FD4;
  --ig:         #C9438F;
  --ht:         #8C6BC0;
  /* 4.2:1 on this theme's --warn-bg before; the same colour as Classic now,
     which clears 4.5 on both. */
  --warn:       #8A5510;
  --warn-bg:    #F7E7D2;
  --danger:     #9B2617;
  --go:         #e8442a;   /* chef's-hat red-orange replaces the green */
  /* The same red, deep enough to carry white text at small sizes. White on
     --go is 4.0:1, which is fine on a button and not fine on a 12px label. */
  --go-deep:    #d63a20;
  --go-press:   #c4331d;
  /* A YELLOWER ORANGE THAN CLASSIC'S, because this theme's primary is already
     a red-orange. #CC4A02 beside #e8442a is very nearly the same hue, so the
     two filled buttons stop telling each other apart — which is the entire
     job the orange one was given. This one is plainly amber against the red
     and still carries white at 4.53:1. */
  --orange:       #B85C00;
  --orange-press: #9A4D00;
  --shadow:     0 1px 2px rgba(20,2,4,.28), 0 6px 20px rgba(20,2,4,.26);

  --page-bg:    #430d13;
  --burgundy-edge:   #2a0508;
  --burgundy-centre: #5c1218;
  --cream:      #f3ede3;
  --drawer-bg:  #2a0508;
  --drawer-ink: #e6d9c8;

  /* Bold rounded sans for headings, matching the TOM THE CHEF wordmark feel.
     System rounded faces first — no webfont, so nothing blocks first paint. */
  --heading-font: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand",
                  "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --label-spacing: 1.1px;
}

/* The ground itself: a radial glow, dark at the edges, richer in the middle.
   Fixed attachment so scrolling does not drag the glow up the screen. */
:root[data-theme="branded"] body {
  background: var(--page-bg);
  background-image:
    radial-gradient(120% 90% at 50% 28%,
                    var(--burgundy-centre) 0%,
                    #3a0a10 52%,
                    var(--burgundy-edge) 100%);
  background-attachment: fixed;
  color: var(--cream);
}
:root[data-theme="branded"] html { background: var(--burgundy-edge); }

/* Headings and the small-caps labels. */
:root[data-theme="branded"] h1,
:root[data-theme="branded"] h2,
:root[data-theme="branded"] h3,
:root[data-theme="branded"] .appbar-name,
:root[data-theme="branded"] .person-name,
:root[data-theme="branded"] .home-big {
  font-family: var(--heading-font);
  font-weight: 800;
  letter-spacing: -.2px;
}
:root[data-theme="branded"] .filter-label,
:root[data-theme="branded"] .p-key,
:root[data-theme="branded"] .p-notes label,
:root[data-theme="branded"] .p-files h3,
:root[data-theme="branded"] .set-group h3,
:root[data-theme="branded"] .sec-h {
  font-variant-caps: all-small-caps;
  letter-spacing: var(--label-spacing);
  text-transform: none;
}

/* Anything sitting directly on the burgundy has to be cream, not ink. */
:root[data-theme="branded"] .appbar,
:root[data-theme="branded"] .topbar {
  background: rgba(42,5,8,.86);
  border-bottom-color: rgba(243,237,227,.16);
  color: var(--cream);
}
:root[data-theme="branded"] .appbar-name,
:root[data-theme="branded"] .counters,
:root[data-theme="branded"] .counters b { color: var(--cream); }
:root[data-theme="branded"] .appbar-counters,
:root[data-theme="branded"] .split,
:root[data-theme="branded"] .appbar-extra,
:root[data-theme="branded"] .empty { color: rgba(243,237,227,.68); }
:root[data-theme="branded"] .appbar-burger span { background: var(--cream); }
:root[data-theme="branded"] .log-more { color: rgba(243,237,227,.6); }

/* Cream cards on burgundy, platform borders kept. */
:root[data-theme="branded"] .card,
:root[data-theme="branded"] .person-card,
:root[data-theme="branded"] .stat-card,
:root[data-theme="branded"] .home-card,
:root[data-theme="branded"] .set-card { background: var(--cream); color: var(--ink); }

/* Chips in the filter bars sit on the burgundy, so they invert too. */
:root[data-theme="branded"] .chip {
  background: rgba(243,237,227,.09);
  border-color: rgba(243,237,227,.24);
  color: var(--cream);
}
:root[data-theme="branded"] .chip-on {
  background: var(--go); border-color: var(--go); color: #fff;
}
:root[data-theme="branded"] .filter-label { color: rgba(243,237,227,.62); }
:root[data-theme="branded"] .filterdrop { border-color: rgba(243,237,227,.18); }

/* Cards keep their own light chips. */
:root[data-theme="branded"] .card .chip,
:root[data-theme="branded"] .sheet .chip,
:root[data-theme="branded"] .p-chip {
  background: #FAF4EA; border-color: var(--line); color: var(--ink);
}
:root[data-theme="branded"] .card .chip-on,
:root[data-theme="branded"] .sheet .chip-on {
  background: var(--go); border-color: var(--go); color: #fff;
}

/* The sidebar: burgundy with cream type and the chef mark at the top. */
:root[data-theme="branded"] .drawer-inner,
:root[data-theme="branded"] .mnav-panel {
  background: var(--drawer-bg);
  border-right-color: rgba(243,237,227,.14);
}
:root[data-theme="branded"] .drawer-item,
:root[data-theme="branded"] .mnav-item { color: var(--drawer-ink); }
:root[data-theme="branded"] .drawer-item.active,
:root[data-theme="branded"] .mnav-item.active {
  background: rgba(232,68,42,.18); color: #fff;
  box-shadow: inset 2px 0 0 var(--go);
}
:root[data-theme="branded"] .drawer-item:hover,
:root[data-theme="branded"] .mnav-item:hover { background: rgba(243,237,227,.08); }
:root[data-theme="branded"] .mnav-head { color: var(--cream); }
:root[data-theme="branded"] .mnav-close { color: var(--drawer-ink); }

/* The brand mark. Classic shows nothing at the top of the rail — Branded is
   the theme that wants the portrait there, so it is drawn by CSS on an element
   that is empty and invisible in Classic. */
:root[data-theme="branded"] .brandmark,
[data-theme="branded"] .brandmark {
  display: block;
  height: 62px;
  margin: 4px 0 10px;
  background: url("/static/brand/mark-cream-256.png") no-repeat center/contain;
}
:root[data-theme="branded"] .mnav-head .brandmark { height: 40px; width: 40px; margin: 0; }

/* Sheets and inputs. */
:root[data-theme="branded"] .sheet-inner { background: var(--cream); color: var(--ink); }
:root[data-theme="branded"] .sheet { background: rgba(20,2,4,.62); }
:root[data-theme="branded"] .draft,
:root[data-theme="branded"] .sec-input,
:root[data-theme="branded"] .p-field input,
:root[data-theme="branded"] .p-field textarea,
:root[data-theme="branded"] .p-notes textarea,
:root[data-theme="branded"] .login input { background: #FBF7F0; color: var(--ink); }
:root[data-theme="branded"] .postctx { background: #FAF4EA; }
:root[data-theme="branded"] .answered-reply { background: #FBEFE9; border-color: #F0CFC3; }
:root[data-theme="branded"] .sec-policy { background: #FBEFE9; border-color: #F0CFC3; }

/* Toasts and the bulk bar were near-black; on burgundy they read better as the
   darkest maroon. */
:root[data-theme="branded"] .toast,
:root[data-theme="branded"] .bulkbar { background: #1e0407; color: var(--cream); }
:root[data-theme="branded"] .toast.err { background: var(--danger); }

/* The login screen sits on the ground with no card behind it. */
:root[data-theme="branded"] .login h1 { color: var(--cream); }
:root[data-theme="branded"] .login p,
:root[data-theme="branded"] .login .or { color: rgba(243,237,227,.7); }

/* Charts pick their colours from these. */
:root[data-theme="branded"] .donut-hole { fill: var(--cream); }

/* ---------- classic: the brand mark is not drawn at all ---------- */
.brandmark { display: none; }