/* 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;
  /* 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;
  --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;
  --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; }