/* WE Sign brand pack "sifa-plus": colours, font and corners of Sifa Plus FZE LLC
   (brand kit: tokens/sifa-plus-tokens.css and SIFA-PLUS-BRAND-SYSTEM.md).
   Linked on every page. The selector is html:root so that it wins over the defaults built into the bundle. */

/* Roboto, variable weight 100-900, served from this installation (nothing is loaded from Google Fonts).
   Licence beside this file: OFL-Roboto.txt. */
@font-face {
  font-family: "Roboto";
  src: url("roboto-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

html:root {
  /* Theme colours, written as "H S% L%" (hue, saturation, lightness: no hsl(), no commas).
     -f is the same colour on hover, -c the text on it. */
  --p: 218.9 33.3% 33.5%;  --pf: 218.9 33.3% 26.5%;  --pc: 42.9 30.4% 95.5%;  /* primary: Sifa Navy #394d72, Paper text */
  --s: 220.8 13.8% 35.5%;  --sf: 220.8 13.8% 28.5%;  --sc: 42.9 30.4% 95.5%;  /* secondary: Slate #4e5667, Paper text */
  --a: 218.2 25.6% 91.6%;  --af: 218.2 25.6% 84.6%;  --ac: 218.9 33.3% 33.5%; /* accent: Mist #e4e8ef, Navy text */
  --n: 218.9 33.3% 33.5%;  --nf: 218.9 33.3% 26.5%;  --nc: 42.9 30.4% 95.5%;  /* main buttons: Navy, Paper text */
  --b1: 42.9 30.4% 95.5%;                                                    /* the page: Paper #f7f5f0 */
  --b2: 40 24% 90.2%;                                                        /* panels and cards: Stone #ece8e0 */
  --b3: 40 15.2% 80.6%;                                                      /* lines, hover: Rule #d5d0c6 */
  --bc: 220 28% 14.7%;                                                       /* text: Ink #1b2230 */
  --in: 218.2 25.6% 91.6%; --inc: 218.9 33.3% 33.5%;                         /* information: Mist, Navy text */
  --su: 218.9 33.3% 33.5%; --suc: 42.9 30.4% 95.5%;                          /* success: Navy, Paper text */
  --wa: 40 15.2% 80.6%;    --wac: 220 28% 14.7%;                             /* warning: the Rule tone, Ink text */
  --er: 0 74.5% 40%;       --erc: 42.9 30.4% 95.5%;                          /* error: Chevron Red #b21a1a, a small signal */

  /* The rest: --brand-soft* are "H S% L%" like the theme colours, the other colours "R G B". */
  --brand-font: "Roboto";
  --brand-bold: 600;                /* bold on the sign-in pages (inside the app: the shared 600) */
  --brand-radius: 2px;              /* corners on the sign-in pages outside the glass (inside the app: the shared 8px and 12px) */
  --brand-soft: 218.2 25.6% 91.6%;  /* secondary buttons: Mist #e4e8ef, Navy text */
  --brand-soft-hover: 218.2 25.6% 86%; /* the same, a step deeper on hover */
  --brand-soft-content: 218.9 33.3% 33.5%; /* text on them */
  --brand-line: #d5d0c6;            /* hairline of fields: Rule #d5d0c6 */
  --brand-muted: 78 86 103;         /* secondary text: Slate #4e5667 */
  --brand-raised: 252 251 248;      /* raised surfaces: Paper White #fcfbf8 */
  --brand-on-dark: 247 245 240;     /* text on the main buttons: Paper */
  --brand-paper: 247 245 240;       /* sign-in page and panel where there is no glass: Paper */
  --brand-shadow: 20 29 46;         /* shadow under the sign-in panel and the cards: Midnight #141d2e */
  --brand-opening-color: #141d2e;   /* the field of opening.mp4: Midnight, the panel behind the logo reveal */
  --brand-glass-button: 0.78;       /* opacity of the sign-in button on the glass: the lowest at which Paper on frosted Navy
                                       holds 4.5:1 at the brightest spot of the panel (measured 4.53) */
}

/* Rules of this pack only. */

/* The logo: never under 140 px wide (36 px high), never animated, 2X clear space, top left. */
html:root .brand-logo {
  min-height: 36px;
  margin-right: 6px;
  animation: none !important;
}

/* On the sign-in glass the logo is 48 px high (187 px wide), so that PRIME MANAGEMENT can be read. */
html:root .we-auth-brand .brand-logo {
  min-height: 48px;
  margin-right: 0;
}

html:root .brand-lockup,
html:root .qr-logo {
  align-items: flex-start;
  justify-content: flex-start;
  margin-right: auto;
  margin-left: 0;
}

/* Red is a small signal: a line or a word, never a button and never a fill. */
html:root .btn-error,
html:root .btn-outline.btn-error {
  border-color: hsl(var(--bc));
  background-color: transparent;
  color: hsl(var(--bc));
}

html:root .btn-error:hover,
html:root .btn-outline.btn-error:hover {
  border-color: hsl(var(--bc));
  background-color: hsl(var(--bc));
  color: hsl(var(--b1));
}

html:root .badge-error {
  border-color: hsl(var(--er));
  background-color: transparent;
  color: #9b0505; /* Seal Red, the kit's red for small text on light */
}

/* Error messages are small red text: Seal Red (8.0:1 on Paper), not the lighter reds of the base. */
html:root .text-red-400,
html:root .text-red-500,
html:root .text-red-600 {
  color: #9b0505;
}

/* Quiet notes (the credit line on a signer page) are Slate: the grey of the base is 4.3:1 on Paper. */
html:root .text-neutral-500 {
  color: rgb(var(--brand-muted));
}

@media (min-width: 768px) {
  html:root .md\:text-neutral-500 {
    color: rgb(var(--brand-muted));
  }
}

/* Code samples sit on Midnight: their highlight colours need a darker field than Navy. */
html:root .mockup-code {
  background-color: #141d2e;
}

/* A completed document is a solid navy label; icons are drawn in navy, because Mist and the Rule tone are fills. */
html:root .badge-success {
  --tw-bg-opacity: 1;
}

html:root .stroke-info,
html:root .stroke-warning {
  stroke: hsl(var(--n));
}