/* ==========================================================================
   Look & feel of the chat: the ONLY file to edit to change colors, font or
   corner radius. styles.css holds layout and uses these variables.

   Colors of the client's design (Policarpia):
     guinda        #701E46   buttons, links, the institute's name
     title pink    #D63A6A   "Soy PolicarpIA"
     footer band   #F7EFF3   with guinda text

   Three blocks, in this order:
     1. :root                         light theme (the default)
     2. @media dark + :root:not(light) dark theme when the user's system is dark
                                       and the page did not force "light"
     3. :root[data-theme="dark"]      dark theme forced (toggle button, host page)
   Blocks 2 and 3 must hold the same variables (a test checks it): when you
   change a dark color, change it in both.
   ========================================================================== */

:root {
  /* surfaces and text */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --border: #d4d4d4;          /* inputs, bubbles, dividers */
  --text: #3a3a3a;
  --muted: #666666;

  /* brand */
  --accent: #701e46;          /* send button, links */
  --accent-hover: #5b1237;
  --accent-contrast: #ffffff;
  --accent-soft: #f5f5f5;     /* hover backgrounds */
  --focus: #932352;
  --brand-title: #d63a6a;     /* "Soy PolicarpIA" */
  --brand-name: #701e46;      /* "INSTITUTO POLITÉCNICO NACIONAL" */
  --emblem-filter: none;      /* the guinda emblem needs lightening on dark */

  /* top bar */
  --header-bg: #ffffff;
  --header-text: #3a3a3a;
  --header-border: #d9d9d9;
  --header-hover: #f0f0f0;

  /* band at the bottom of the full page */
  --band-bg: #f7eff3;
  --band-text: #8a1c4e;

  /* states */
  --danger: #a3262b;
  --warn-bg: #fdf0d5;     /* "demo mode" banner */
  --warn-text: #7a5200;
  --warn-border: #f0dca8;

  /* depth */
  --scrim: rgba(0, 0, 0, .28);
  --code-bg: rgba(127, 127, 127, .18);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .18), 0 3px 10px rgba(0, 0, 0, .10);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);

  /* shape and type */
  --radius: 8px;
  --font: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dark theme. It follows the system, unless the page asks for a theme:
   <html data-theme="light|dark|auto"> (see widget.js, data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141214;
    --surface: #1d1a1b;
    --surface-2: #272224;
    --border: #3f3a3c;
    --text: #f1eeec;
    --muted: #a8a0a4;
    --accent: #c8638f;
    --accent-hover: #d77ba1;
    --accent-contrast: #1c0912;
    --accent-soft: #272224;
    --focus: #e58bb2;
    --brand-title: #ee7aa0;
    --brand-name: #e8a3bf;
    --emblem-filter: brightness(2.3) saturate(.85);
    --header-bg: #1d1a1b;
    --header-text: #f1eeec;
    --header-border: #3a3436;
    --header-hover: rgba(255, 255, 255, .10);
    --band-bg: #2a1d24;
    --band-text: #e8a3bf;
    --danger: #ef7c80;
    --warn-bg: #3d2f12;
    --warn-text: #f0c36b;
    --warn-border: #54421a;
    --scrim: rgba(0, 0, 0, .5);
    --code-bg: rgba(127, 127, 127, .18);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  --bg: #141214;
  --surface: #1d1a1b;
  --surface-2: #272224;
  --border: #3f3a3c;
  --text: #f1eeec;
  --muted: #a8a0a4;
  --accent: #c8638f;
  --accent-hover: #d77ba1;
  --accent-contrast: #1c0912;
  --accent-soft: #272224;
  --focus: #e58bb2;
  --brand-title: #ee7aa0;
  --brand-name: #e8a3bf;
  --emblem-filter: brightness(2.3) saturate(.85);
  --header-bg: #1d1a1b;
  --header-text: #f1eeec;
  --header-border: #3a3436;
  --header-hover: rgba(255, 255, 255, .10);
  --band-bg: #2a1d24;
  --band-text: #e8a3bf;
  --danger: #ef7c80;
  --warn-bg: #3d2f12;
  --warn-text: #f0c36b;
  --warn-border: #54421a;
  --scrim: rgba(0, 0, 0, .5);
  --code-bg: rgba(127, 127, 127, .18);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
}