/* The Footprint Firm brand theme, from https://thefootprintfirm.com/.
 * Palette = the site's own :root colours: black #000, white #fff,
 * apollo #720405, burgundy #420207, clay #963408, rust #a45202,
 * midnight #353145, dusty-blue #636c88, air #eae7e1, gray #cec8c1,
 * sand #b3a9a1, beige #e0cab3. The site pairs each with a hover colour
 * (.theme-* classes: air -> gray, apollo -> clay, midnight -> dusty-blue);
 * those pairs drive hover/active here.
 * Light mirrors the site (white ground, black ink, air panels, apollo red as
 * the action colour). Dark uses the site's midnight sections with beige as the
 * accent: apollo on midnight is under 2:1.
 *
 * Shape: the site is flat and square (border-radius 0, no shadows), with
 * uppercase small-caps-style labels.
 *
 * Fonts: the site uses MarkPro (FF Mark, a commercial Monotype licence that
 * can't be bundled on-prem). Albert Sans (OFL), a geometric sans of the same
 * family of shapes, stands in.
 *
 * Colour tokens are space-separated RGB triplets ("248 245 240"), not hex:
 * LibreChat v0.8.8 renders themed colours as rgb(var(--x) / <alpha>). Translucent
 * values from the design are pre-blended onto that mode's background.
 */

@font-face {
  font-family: 'Albert Sans';
  src: url('AlbertSans-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Light: white ground, air sidebar, black ink, apollo actions. */
html:root {
  --brand-font: 'Albert Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --brand-logo-width: 210px;          /* one-line wordmark, ~14:1 */
  --brand-logo-height: 15px;
  --brand-radius-control: 0;
  --brand-radius-round: 0;
  --brand-radius-surface: 0;
  --brand-radius-large: 0;
  --brand-elevation: none;

  --brand-bg: 255 255 255;
  --brand-bg-sunken: 255 255 255;
  --brand-sidebar: 234 231 225;           /* air */
  --brand-surface: 234 231 225;
  --brand-surface-alt: 234 231 225;
  --brand-surface-raised: 255 255 255;
  /* Solid, not translucent: LibreChat stacks hover/active layers. The site's
   * hover for air is gray; these step from air towards gray / sand. */
  --brand-hover: 220 216 209;             /* air/gray 50% */
  --brand-active: 206 200 193;            /* gray */

  --brand-text: 0 0 0;
  --brand-text-muted: 107 100 94;         /* sand, darkened to 4.7:1 on air */
  --brand-text-subtle: 122 115 109;

  --brand-border: 226 222 218;            /* gray 60% on white */
  --brand-border-medium: 206 200 193;     /* gray */
  --brand-border-strong: 179 169 161;     /* sand */

  --brand-accent: 114 4 5;                /* apollo */
  --brand-accent-hover: 150 52 8;         /* clay: the site's apollo hover */
  --brand-on-accent: 255 255 255;
  --brand-action: 114 4 5;
  --brand-action-hover: 150 52 8;
  --brand-on-action: 255 255 255;
  --brand-ring: 114 4 5;

  --brand-link: 114 4 5;

  --brand-code-keyword: 114 4 5;          /* apollo */
  --brand-code-builtin: 99 108 136;       /* dusty-blue */
  --brand-code-string: 150 52 8;          /* clay */
  --brand-code-number: 53 49 69;          /* midnight */
  --brand-code-title: 66 2 7;             /* burgundy */
  --brand-code-comment: 122 115 109;
}

/* Dark: the site's midnight sections, white ink, beige accents. */
html.dark {
  --brand-bg: 37 34 48;                   /* midnight 70% on black */
  --brand-bg-sunken: 37 34 48;
  --brand-sidebar: 53 49 69;              /* midnight */
  --brand-surface: 53 49 69;
  --brand-surface-alt: 69 65 84;          /* white 8% on midnight */
  --brand-surface-raised: 37 34 48;
  --brand-hover: 69 65 84;                /* white 8% / 14% on midnight */
  --brand-active: 81 78 95;

  --brand-text: 255 255 255;
  --brand-text-muted: 206 200 193;        /* gray */
  --brand-text-subtle: 179 169 161;       /* sand */

  --brand-border: 62 60 72;               /* white 12% / 22% / 35% on the ground */
  --brand-border-medium: 84 82 93;
  --brand-border-strong: 113 111 120;

  --brand-accent: 224 202 179;            /* beige */
  --brand-accent-hover: 234 231 225;      /* air */
  --brand-on-accent: 0 0 0;
  --brand-action: 224 202 179;
  --brand-action-hover: 234 231 225;
  --brand-on-action: 0 0 0;
  --brand-ring: 224 202 179;

  --brand-link: 224 202 179;

  --brand-code-keyword: 224 202 179;      /* beige */
  --brand-code-builtin: 154 161 184;      /* dusty-blue, lightened */
  --brand-code-string: 201 169 138;       /* rust, lightened */
  --brand-code-number: 206 200 193;       /* gray */
  --brand-code-title: 255 255 255;
  --brand-code-comment: 140 135 150;
}

/* --- Brand primitives ----------------------------------------------------
 * The site is flat: square corners, no shadows, and uppercase labels
 * (h3 section titles, links, nav). */

*, *::before, *::after {
  border-radius: 0 !important;
}
/* Includes pseudo-elements: e.g. .shadow-stroke draws the icon outline as an
 * inset shadow on ::after. */
[class*='shadow']:not(.webkit-dark-styles),
[class*='shadow']::before,
[class*='shadow']::after {
  box-shadow: none !important;
}

/* The UI's own headings only - the welcome line and the login title. Model-
 * written markdown headings stay in sentence case for long answers. */
.split-parent,
.min-h-screen h1 {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.02em;
}