/* Bridge: the Hanna themes in Hanna 360's own variable names.
 * 360 (#app), and everything that already follows 360's look (Writer and Sheets in the Hanna look, the Plans
 * chat widget), reads --text, --muted, --base, --surface, --panel, --edge, --accent, --button and friends.
 * Load this after 360's styles.css: when a Hanna theme is chosen these win over 360's own aurora/dark/light
 * values (the selectors are one attribute heavier), and in Classic they do nothing. */

html[data-hanna-look="hanna"] #app,
html[data-hanna-look="hanna"] #app[data-theme],
html[data-hanna-look="hanna"] .hanna-360-vars {
  --text: var(--ht-text);
  --muted: var(--ht-muted);
  --base: var(--ht-bg);
  --surface: var(--ht-glass);
  --rail: var(--ht-chrome);
  --glaze: color-mix(in srgb, var(--ht-text) 5%, transparent);
  --panel: color-mix(in srgb, var(--ht-panel) 70%, transparent);
  --edge: var(--ht-line);
  --accent: var(--ht-accent);
  --button: color-mix(in srgb, var(--ht-accent) 26%, var(--ht-panel));
  --shine: color-mix(in srgb, #fff 9%, transparent);
  --shadow: color-mix(in srgb, #000 24%, transparent);
  --hover: var(--ht-hover);
  --active: color-mix(in srgb, var(--ht-accent) 20%, transparent);
  --solid: var(--ht-panel);
  /* the room light: the theme's three key colours, as in the main app */
  background:
    radial-gradient(ellipse at 85% 5%, color-mix(in srgb, var(--ht-bank-a) 22%, transparent), transparent 55%),
    radial-gradient(ellipse at 15% 95%, color-mix(in srgb, var(--ht-bank-c) 16%, transparent), transparent 60%),
    var(--ht-bg);
  color-scheme: inherit;
}
/* 4. solid surfaces behind what people read row by row */
html[data-hanna-look="hanna"] #app table,
html[data-hanna-look="hanna"] #app .table-wrap,
html[data-hanna-look="hanna"] #app .ledger {
  background: var(--ht-raised);
}