/* GENERATED by shared/site/app-theme.php from shared/site/brands.php - do not edit here.
   Documaker: the public site's palette, for the signed-in application. */

@font-face { font-family: "Inter"; src: url("/site/fonts/inter.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/site/fonts/fraunces.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root { --display: "Fraunces", "Inter", system-ui, sans-serif; --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1116;
  --surface: #151a21;
  --surface2: #1c232c;
  --text: #ece7dd;
  --muted: #a7a094;
  --accent: #e6a53a;
  --accentInk: #1a1206;
  --accent2: #5fb3a1;
  --glow: rgba(230,165,58,.18);
  --line: #313539;
  --line-strong: #494b4e;
  --line-soft: #262a30;
  --dim: #7e7a74;
  --field: #0b0e12;
  --surface3: #282f37;
  --accent-hover: #eab256;
  --accent-soft: rgba(230,165,58,0.14);
  --accent-line: rgba(230,165,58,0.45);
  --accent-text: #e6a53a;
  --code-bg: #0a0c10;
  --overlay: rgba(0,0,0,.62);
  --shadow-color: rgba(0,0,0,.5);
  --shadow: 0 18px 48px rgba(0,0,0,.5);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.4);
  --hover: rgba(236,231,221,0.05);
  --hover-strong: rgba(236,231,221,0.09);
  --scrollbar: #404347;
  --ok: #34d399;
  --ok-bg: #19302f;
  --ok-line: #21604f;
  --ok-text: #7be2bd;
  --warn: #fbbf24;
  --warn-bg: #312e21;
  --warn-line: #6c5922;
  --warn-text: #fcd571;
  --bad: #f87171;
  --bad-bg: #30242b;
  --bad-line: #6b3b3f;
  --bad-text: #faa3a3;
  --info: #60a5fa;
  --info-bg: #1e2b3b;
  --info-line: #324f73;
  --info-text: #98c5fc;
  --panel: var(--surface);
  --panel2: var(--surface2);
  --bg-elev: var(--surface);
  --bg-elev-2: var(--surface2);
  --bg-input: var(--field);
  --text-dim: var(--muted);
  --text-faint: var(--dim);
  --accent-2: var(--accent2);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #fbf8f2;
  --surface: #ffffff;
  --surface2: #f3eee4;
  --text: #1b1a17;
  --muted: #5e5a52;
  --accent: #a8630a;
  --accentInk: #ffffff;
  --accent2: #2f7d6d;
  --glow: rgba(168,99,10,.12);
  --line: #dddddc;
  --line-strong: #bfbfbe;
  --line-soft: #eaeaea;
  --dim: #7b7871;
  --field: #ffffff;
  --surface3: #e8e3da;
  --accent-hover: #905509;
  --accent-soft: rgba(168,99,10,0.1);
  --accent-line: rgba(168,99,10,0.4);
  --accent-text: #9b5b09;
  --code-bg: #f6f2ea;
  --overlay: rgba(19,18,16,0.42);
  --shadow-color: rgba(27,26,23,0.14);
  --shadow: 0 18px 48px rgba(27,26,23,0.14);
  --shadow-sm: 0 8px 24px rgba(27,26,23,0.1);
  --hover: rgba(27,26,23,0.045);
  --hover-strong: rgba(27,26,23,0.08);
  --scrollbar: #c6c6c5;
  --ok: #0f7a4f;
  --ok-bg: #e9f3ef;
  --ok-line: #abd0c1;
  --ok-text: #0d6b46;
  --warn: #9a6200;
  --warn-bg: #f6f1e8;
  --warn-line: #dcc8a6;
  --warn-text: #885600;
  --bad: #c42b2b;
  --bad-bg: #faecec;
  --bad-line: #eab5b5;
  --bad-text: #ac2626;
  --info: #1f68c0;
  --info-bg: #ebf1f9;
  --info-line: #b1cae9;
  --info-text: #1b5ca9;
  --panel: var(--surface);
  --panel2: var(--surface2);
  --bg-elev: var(--surface);
  --bg-elev-2: var(--surface2);
  --bg-input: var(--field);
  --text-dim: var(--muted);
  --text-faint: var(--dim);
  --accent-2: var(--accent2);
}

/* Browser furniture follows the theme too: scrollbars, selection, autofill. */
html[data-theme] { scrollbar-color: var(--scrollbar) transparent; }
html[data-theme] ::selection { background: var(--accent-soft); color: var(--text); }
html[data-theme] input:-webkit-autofill,
html[data-theme] textarea:-webkit-autofill,
html[data-theme] select:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
  caret-color: var(--text);
}

/* The theme switch - same sun/moon as the public site's nav. */
.theme-toggle { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.theme-toggle:hover { background: var(--hover-strong); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: block; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }