/* Creator portal color tokens (loaded by creator_v2/partials/_theme_head.html).
   :root holds the light values; dark comes from <html data-theme="dark">, which
   _theme_head.html sets by default, or from the device setting when the creator
   picks System under Profile > Appearance.
   Templates use these as Tailwind arbitrary values: bg-[var(--surface)], text-[var(--ok-fg)]. */

:root {
  color-scheme: light;
  --ink-50: #fafaf9;     /* page background */
  --surface: #ffffff;    /* cards, sheets, bars */
  --ink-100: #f5f5f4;    /* subtle fills */
  --ink-200: #e7e5e4;    /* card borders, dividers */
  --ink-300: #d6d3d1;    /* input borders */
  --ink-400: #a8a29e;    /* chevrons, disabled; not for text */
  --ink-500: #78716c;    /* secondary text */
  --ink-700: #44403c;    /* body-secondary */
  --ink-900: #1c1917;    /* primary text, primary buttons */
  --on-strong: #ffffff;  /* text/icons on --ink-900 fills */
  --check: #1c1917;      /* checked checkboxes and switches */
  --accent: #3a87e6;
  --accent-ink: #1f5fae; /* link text */
  --accent-soft: #e6f0fc;
  --tomato: #e85d4f;     /* unread dots */
  --border: #e7e5e4;
  --scrim: rgba(28, 25, 23, 0.45);
  --ok-bg: #ecfdf5;   --ok-fg: #065f46;
  --wait-bg: #fffbeb; --wait-fg: #92400e;
  --edit-bg: #fff7ed; --edit-fg: #9a3412;
  --bad-bg: #fef2f2;  --bad-fg: #b91c1c;
  /* Script scenes: film action pink, dialogue blue (same hues as the agency script builder). */
  --film-bg: #fdf0f7; --film-fg: #be185d;
  --say-bg: #e8f7fd;  --say-fg: #0369a1;
  /* Section tones: one hue per kind of content (scripts, brief, pay...) so a page reads as groups. */
  --tone-violet-bg: #f5f3ff;  --tone-violet-fg: #6d28d9;  --tone-violet-line: #ddd6fe;
  --tone-amber-bg: #fffbeb;   --tone-amber-fg: #b45309;   --tone-amber-line: #fde68a;
  --tone-emerald-bg: #ecfdf5; --tone-emerald-fg: #047857; --tone-emerald-line: #a7f3d0;
  --tone-sky-bg: #f0f9ff;     --tone-sky-fg: #0369a1;     --tone-sky-line: #bae6fd;
  --tone-rose-bg: #fff1f2;    --tone-rose-fg: #be123c;    --tone-rose-line: #fecdd3;
  --tone-orange-bg: #fff7ed;  --tone-orange-fg: #c2410c;  --tone-orange-line: #fed7aa;
  /* For legacy sprite icons: brightness(0) makes them black, then these flip as needed. */
  --icon-ink-filter: invert(0);
  --icon-on-strong-filter: invert(1);
  --bubble-own-bg: #1c1917; --bubble-own-fg: #ffffff; /* creator's own chat messages */
}

/* Keep the two dark blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink-50: #0c0a09;
    --surface: #1c1917;
    --ink-100: #292524;
    --ink-200: #35302d;
    --ink-300: #4a4542;
    --ink-400: #78716c;
    --ink-500: #a8a29e;
    --ink-700: #d6d3d1;
    --ink-900: #fafaf9;
    --on-strong: #1c1917;
    --check: #5b9cf0;
    --accent: #5b9cf0;
    --accent-ink: #93c0f7;
    --accent-soft: rgba(58, 135, 230, 0.2);
    --tomato: #f2766a;
    --border: #35302d;
    --scrim: rgba(0, 0, 0, 0.6);
    --ok-bg: rgba(16, 185, 129, 0.16);  --ok-fg: #6ee7b7;
    --wait-bg: rgba(245, 158, 11, 0.16); --wait-fg: #fcd34d;
    --edit-bg: rgba(249, 115, 22, 0.16); --edit-fg: #fdba74;
    --bad-bg: rgba(239, 68, 68, 0.16);  --bad-fg: #fca5a5;
    --film-bg: rgba(255, 0, 149, 0.14); --film-fg: #f9a8d4;
    --say-bg: rgba(2, 182, 229, 0.15);  --say-fg: #7dd3fc;
    --tone-violet-bg: rgba(139, 92, 246, 0.14);  --tone-violet-fg: #c4b5fd;  --tone-violet-line: rgba(139, 92, 246, 0.34);
    --tone-amber-bg: rgba(245, 158, 11, 0.12);   --tone-amber-fg: #fcd34d;   --tone-amber-line: rgba(245, 158, 11, 0.32);
    --tone-emerald-bg: rgba(16, 185, 129, 0.12); --tone-emerald-fg: #6ee7b7; --tone-emerald-line: rgba(16, 185, 129, 0.32);
    --tone-sky-bg: rgba(14, 165, 233, 0.12);     --tone-sky-fg: #7dd3fc;     --tone-sky-line: rgba(14, 165, 233, 0.32);
    --tone-rose-bg: rgba(244, 63, 94, 0.12);     --tone-rose-fg: #fda4af;    --tone-rose-line: rgba(244, 63, 94, 0.32);
    --tone-orange-bg: rgba(249, 115, 22, 0.12);  --tone-orange-fg: #fdba74;  --tone-orange-line: rgba(249, 115, 22, 0.32);
  --icon-ink-filter: invert(1);
  --icon-on-strong-filter: invert(0);
  --bubble-own-bg: #2f6fc4; --bubble-own-fg: #ffffff;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink-50: #0c0a09;
  --surface: #1c1917;
  --ink-100: #292524;
  --ink-200: #35302d;
  --ink-300: #4a4542;
  --ink-400: #78716c;
  --ink-500: #a8a29e;
  --ink-700: #d6d3d1;
  --ink-900: #fafaf9;
  --on-strong: #1c1917;
  --check: #5b9cf0;
  --accent: #5b9cf0;
  --accent-ink: #93c0f7;
  --accent-soft: rgba(58, 135, 230, 0.2);
  --tomato: #f2766a;
  --border: #35302d;
  --scrim: rgba(0, 0, 0, 0.6);
  --ok-bg: rgba(16, 185, 129, 0.16);  --ok-fg: #6ee7b7;
  --wait-bg: rgba(245, 158, 11, 0.16); --wait-fg: #fcd34d;
  --edit-bg: rgba(249, 115, 22, 0.16); --edit-fg: #fdba74;
  --bad-bg: rgba(239, 68, 68, 0.16);  --bad-fg: #fca5a5;
  --film-bg: rgba(255, 0, 149, 0.14); --film-fg: #f9a8d4;
  --say-bg: rgba(2, 182, 229, 0.15);  --say-fg: #7dd3fc;
  --tone-violet-bg: rgba(139, 92, 246, 0.14);  --tone-violet-fg: #c4b5fd;  --tone-violet-line: rgba(139, 92, 246, 0.34);
  --tone-amber-bg: rgba(245, 158, 11, 0.12);   --tone-amber-fg: #fcd34d;   --tone-amber-line: rgba(245, 158, 11, 0.32);
  --tone-emerald-bg: rgba(16, 185, 129, 0.12); --tone-emerald-fg: #6ee7b7; --tone-emerald-line: rgba(16, 185, 129, 0.32);
  --tone-sky-bg: rgba(14, 165, 233, 0.12);     --tone-sky-fg: #7dd3fc;     --tone-sky-line: rgba(14, 165, 233, 0.32);
  --tone-rose-bg: rgba(244, 63, 94, 0.12);     --tone-rose-fg: #fda4af;    --tone-rose-line: rgba(244, 63, 94, 0.32);
  --tone-orange-bg: rgba(249, 115, 22, 0.12);  --tone-orange-fg: #fdba74;  --tone-orange-line: rgba(249, 115, 22, 0.32);
  --icon-ink-filter: invert(1);
  --icon-on-strong-filter: invert(0);
  --bubble-own-bg: #2f6fc4; --bubble-own-fg: #ffffff;
}

/* The wordmark ships as separate black and white PNGs. */
.wordmark-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark-light { display: none !important; }
  :root:not([data-theme="light"]) .wordmark-dark { display: block !important; }
}
:root[data-theme="dark"] .wordmark-light { display: none !important; }
:root[data-theme="dark"] .wordmark-dark { display: block !important; }