/* ==========================================================================
   GBSB Global AI Chat — LibreChat brand layer
   Source: GBSB Global Design System (Edition 2026) + Brand guidelines 2026-03
   Version 1.0 · 2026-10-07 · authored by Claude (Cowork) for Antonio Rodríguez Engelmann
   Loaded after LibreChat's own CSS. Overrides LibreChat theme tokens only
   (RGB triplets, e.g. "105 27 26"), plus the font and the login logo.
   After every LibreChat upgrade: rebuild the image and run the checklist in
   /opt/librechat/branding/README.md.
   ========================================================================== */

/* ---------- Montserrat, self-hosted (SIL OFL 1.1) — no Google Fonts call ---------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/montserrat-var.woff2') format('woff2-variations'),
       url('fonts/montserrat-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/montserrat-var-italic.woff2') format('woff2-variations'),
       url('fonts/montserrat-var-italic.woff2') format('woff2');
}

/* ---------- Shared tokens (both modes) ---------- */
html {
  --theme-font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --brand-purple: 105 27 26;              /* GBSB Red replaces LibreChat purple */
}
body, button, input, textarea, select {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}
/* Code stays monospaced */
code, pre, kbd, samp, .font-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }

/* ---------- Light mode: Off-white canvas, Black text, GBSB Red accents ---------- */
html:not(.dark) {
  --presentation: 255 255 255;
  --text-primary: 19 19 19;               /* #131313 Black */
  --text-secondary: 66 66 66;             /* #424242 (80%) */
  --text-secondary-alt: 90 90 90;         /* #5A5A5A (70%) */
  --text-tertiary: 90 90 90;
  --text-muted: 90 90 90;

  --link: 105 27 26;                      /* #691B1A GBSB Red */
  --link-hover: 122 6 5;                  /* #7A0605 */
  --link-visited: 84 4 3;                 /* #540403 */
  --accent-primary: 105 27 26;
  --accent-primary-hover: 122 6 5;
  --ring-primary: 105 27 26;

  --header-primary: 252 247 239;
  --header-hover: 245 238 226;
  --header-button-hover: 245 238 226;

  --surface-primary: 252 247 239;         /* #FCF7EF Off-white */
  --surface-primary-alt: 247 240 229;     /* sidebar: Off-white, one step deeper */
  --surface-primary-contrast: 243 234 220;
  --surface-secondary: 247 240 229;
  --surface-secondary-alt: 236 226 211;
  --surface-tertiary: 243 234 220;
  --surface-tertiary-alt: 255 255 255;
  --surface-dialog: 255 255 255;
  --surface-chat: 255 255 255;            /* composer and cards on White */
  --surface-hover: 240 230 214;
  --surface-hover-alt: 231 219 200;
  --surface-composer-hover: 243 234 220;
  --surface-active: 236 226 211;
  --surface-active-alt: 231 219 200;

  --surface-submit: 105 27 26;            /* send / primary buttons: GBSB Red */
  --surface-submit-hover: 122 6 5;

  --border-light: 231 231 231;            /* #E7E7E7 (10%) */
  --border-medium: 221 212 199;
  --border-medium-alt: 221 212 199;
  --border-heavy: 136 136 136;            /* #888888 (30%) */
  --border-xheavy: 90 90 90;

  --surface-inverted: 19 19 19;
  --surface-inverted-hover: 66 66 66;
  --text-inverted: 255 255 255;
}

/* ---------- Dark mode: Black canvas, Off-white text, Sand links ---------- */
html.dark {
  --presentation: 26 26 26;
  --text-primary: 252 247 239;            /* #FCF7EF Off-white */
  --text-secondary: 231 231 231;          /* #E7E7E7 */
  --text-secondary-alt: 180 180 180;
  --text-tertiary: 136 136 136;           /* #888888 */
  --text-muted: 180 180 180;

  --link: 249 216 173;                    /* #F9D8AD Sand (on-dark link colour) */
  --link-hover: 252 247 239;
  --link-visited: 196 128 104;            /* #C48068 */
  --accent-primary: 249 216 173;
  --accent-primary-hover: 252 247 239;
  --ring-primary: 249 216 173;

  --header-primary: 19 19 19;
  --header-hover: 42 42 42;
  --header-button-hover: 42 42 42;

  --surface-primary: 19 19 19;            /* #131313 Black */
  --surface-primary-alt: 13 13 13;        /* sidebar slightly darker */
  --surface-primary-contrast: 26 26 26;
  --surface-secondary: 33 33 33;
  --surface-secondary-alt: 33 33 33;
  --surface-tertiary: 42 42 42;
  --surface-tertiary-alt: 42 42 42;
  --surface-dialog: 26 26 26;
  --surface-chat: 33 33 33;
  --surface-hover: 48 48 48;
  --surface-hover-alt: 66 66 66;          /* #424242 */
  --surface-composer-hover: 48 48 48;
  --surface-active: 66 66 66;
  --surface-active-alt: 48 48 48;

  --surface-submit: 105 27 26;            /* GBSB Red keeps the white arrow at 11.9:1 */
  --surface-submit-hover: 122 6 5;

  --border-light: 48 48 48;
  --border-medium: 66 66 66;
  --border-medium-alt: 66 66 66;
  --border-heavy: 90 90 90;
  --border-xheavy: 136 136 136;
}

/* ---------- Selection and keyboard focus ---------- */
::selection { background: rgba(105, 27, 26, 0.22); }
html.dark ::selection { background: rgba(249, 216, 173, 0.30); }

/* ---------- Login page: official GBSB Global logo, larger and with breathing room ---------- */
div:has(> img[src="assets/logo.svg"]) {
  height: 3.25rem !important;
  margin-top: 3rem !important;
  margin-bottom: 0.5rem;
}
/* Follow the app's light/dark choice (the SVG itself follows the OS setting as a fallback) */
html:not(.dark) img[src="assets/logo.svg"] { content: url('gbsb-logo-color.svg'); }
html.dark img[src="assets/logo.svg"] { content: url('gbsb-logo-white.svg'); }

/* Headings on auth pages: Montserrat Bold */
h1, h2 { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; }

/* ---------- Page background behind the app (overscroll, gaps) ---------- */
html:not(.dark) { background-color: #FCF7EF; }
html.dark { background-color: #131313; }

/* ---------- Sign-in button: Design System primary button (GBSB Red, white text, 14px/600) ---------- */
a[href*="oauth/openid"] {
  font-size: .875rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  white-space: nowrap;
  background-color: #691B1A !important;
  border-color: #691B1A !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  transition: background-color 220ms cubic-bezier(0.2, 0, 0, 1);
}
a[href*="oauth/openid"]:hover { background-color: #7A0605 !important; }
a[href*="oauth/openid"] svg { color: #FFFFFF; }
a[href*="oauth/openid"]:focus-visible { outline: 2px solid #F9D8AD; outline-offset: 2px; }