/* GENERATED by shared/site/app-theme.php from shared/site/brands.php - do not edit here.
   MovieMaker: 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: "Bricolage Grotesque"; src: url("/site/fonts/bricolage.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }

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

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0a0b;
  --surface: #171213;
  --surface2: #211a1b;
  --text: #f3ecea;
  --muted: #b3a6a3;
  --accent: #ff4d5e;
  --accentInk: #1a0a0c;
  --accent2: #f5c04e;
  --glow: rgba(255,77,94,.2);
  --line: #342e2f;
  --line-strong: #4c4647;
  --line-soft: #292324;
  --dim: #877d7b;
  --field: #0b0809;
  --surface3: #2e2727;
  --accent-hover: #ff6675;
  --accent-soft: rgba(255,77,94,0.14);
  --accent-line: rgba(255,77,94,0.45);
  --accent-text: #ff4d5e;
  --code-bg: #090708;
  --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(243,236,234,0.05);
  --hover-strong: rgba(243,236,234,0.09);
  --scrollbar: #433e3e;
  --ok: #34d399;
  --ok-bg: #1a2923;
  --ok-line: #225b46;
  --ok-text: #7be2bd;
  --warn: #fbbf24;
  --warn-bg: #322715;
  --warn-line: #6e5419;
  --warn-text: #fcd571;
  --bad: #f87171;
  --bad-bg: #321d1e;
  --bad-line: #6d3637;
  --bad-text: #faa3a3;
  --info: #60a5fa;
  --info-bg: #20242f;
  --info-line: #334a6b;
  --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: #fcf8f7;
  --surface: #ffffff;
  --surface2: #f5ecea;
  --text: #1f1416;
  --muted: #6b5a5c;
  --accent: #d2263a;
  --accentInk: #ffffff;
  --accent2: #a87a0c;
  --glow: rgba(210,38,58,.11);
  --line: #dddcdc;
  --line-strong: #c0bdbe;
  --line-soft: #ebeaea;
  --dim: #867879;
  --field: #ffffff;
  --surface3: #eae1df;
  --accent-hover: #b52132;
  --accent-soft: rgba(210,38,58,0.1);
  --accent-line: rgba(210,38,58,0.4);
  --accent-text: #c12335;
  --code-bg: #f8f1ef;
  --overlay: rgba(22,14,15,0.42);
  --shadow-color: rgba(31,20,22,0.14);
  --shadow: 0 18px 48px rgba(31,20,22,0.14);
  --shadow-sm: 0 8px 24px rgba(31,20,22,0.1);
  --hover: rgba(31,20,22,0.045);
  --hover-strong: rgba(31,20,22,0.08);
  --scrollbar: #c7c4c5;
  --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; }