/* Kami Chess on top of keycloak.v3, the account console (PatternFly 5): the site's colours and fonts. The fonts are
   the login part's files: /resources/<version>/account/kami-chess/css/ → /resources/<version>/login/kami-chess/fonts/.
   The colour values below are kept equal to the site's tokens by src/lib/keycloak-theme.test.ts. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../../login/kami-chess/fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../../login/kami-chess/fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../../login/kami-chess/fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../../login/kami-chess/fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../../login/kami-chess/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../../login/kami-chess/fonts/bricolage-grotesque-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --kc-bg: #FFF8F2;
  --kc-surface: #FFFFFF;
  --kc-fg: #1A1320;
  --kc-muted: #5B4A56;
  --kc-border: #EFE2D6;
  --kc-primary: #FF6A3D;
  --kc-accent: #6E3CFF;
  --kc-on-primary: #1A1320;
}
:root.pf-v5-theme-dark {
  --kc-bg: #16121A;
  --kc-surface: #1F1A26;
  --kc-fg: #F4ECE0;
  --kc-muted: #A89AAB;
  --kc-border: #2C2434;
  --kc-primary: #FF7A52;
  --kc-accent: #8E66FF;
  --kc-on-primary: #16121A;
}

:root, :root.pf-v5-theme-dark {
  --pf-v5-global--FontFamily--text: "Inter", system-ui, sans-serif;
  --pf-v5-global--FontFamily--heading: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --pf-v5-global--FontFamily--redhatfont--heading--sans-serif: var(--pf-v5-global--FontFamily--heading);
  --pf-v5-global--FontFamily--redhatfont--sans-serif: var(--pf-v5-global--FontFamily--text);
  --pf-v5-global--primary-color--100: var(--kc-primary);
  --pf-v5-global--primary-color--200: var(--kc-primary);
  --pf-v5-global--link--Color: var(--kc-accent);
  --pf-v5-global--link--Color--hover: var(--kc-accent);
  --pf-v5-global--active-color--100: var(--kc-accent);
  --pf-v5-global--Color--100: var(--kc-fg);
  --pf-v5-global--Color--200: var(--kc-muted);
  --pf-v5-global--BackgroundColor--100: var(--kc-surface);
  --pf-v5-global--BackgroundColor--200: var(--kc-bg);
  --pf-v5-global--BackgroundColor--light-100: var(--kc-bg);
  --pf-v5-global--BorderColor--100: var(--kc-border);
  --pf-v5-c-button--m-primary--BackgroundColor: var(--kc-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--kc-primary);
  --pf-v5-c-button--m-primary--Color: var(--kc-on-primary);
  --pf-v5-c-button--m-primary--hover--Color: var(--kc-on-primary);
}

body, .pf-v5-c-page, .pf-v5-c-page__main-section {
  background: var(--kc-bg);
  color: var(--kc-fg);
}

/* The masthead and the side menu in the site's colours instead of PatternFly's black and grey. */
.pf-v5-c-masthead, :root.pf-v5-theme-dark .pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--kc-surface);
  --pf-v5-c-masthead--m-display-inline--BackgroundColor: var(--kc-surface);
  --pf-v5-c-masthead--Color: var(--kc-fg);
  border-bottom: 1px solid var(--kc-border);
}
/* PatternFly's dark masthead paints its background directly, not through the variable. */
:root.pf-v5-theme-dark .pf-v5-c-masthead, :root.pf-v5-theme-dark .pf-v5-c-masthead__content,
:root.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-toolbar { background-color: var(--kc-surface); --pf-v5-c-toolbar--BackgroundColor: var(--kc-surface); }
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain, .pf-v5-c-masthead .pf-v5-c-menu-toggle { color: var(--kc-fg); }
.pf-v5-c-page__sidebar, :root.pf-v5-theme-dark .pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--kc-surface);
  border-right: 1px solid var(--kc-border);
}
.pf-v5-c-nav {
  --pf-v5-c-nav__link--Color: var(--kc-fg);
  --pf-v5-c-nav__link--hover--Color: var(--kc-fg);
  --pf-v5-c-nav__link--m-current--Color: var(--kc-fg);
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--kc-bg);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--kc-bg);
  --pf-v5-c-nav__link--before--BorderColor: transparent;
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--kc-primary);
  --pf-v5-c-nav__section-title--Color: var(--kc-muted);
}
.pf-v5-c-brand, .pf-v5-c-masthead__brand img { height: 40px; border-radius: 0.625rem; }

h1, h2, h3, .pf-v5-c-title { font-family: var(--pf-v5-global--FontFamily--heading); letter-spacing: -0.01em; }
/* PatternFly's dark theme sets its own button blue on a more specific selector: name the button there too. */
.pf-v5-c-button.pf-m-primary, :root.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--kc-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--kc-primary);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--kc-primary);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--kc-primary);
  --pf-v5-c-button--m-primary--Color: var(--kc-on-primary);
  --pf-v5-c-button--m-primary--hover--Color: var(--kc-on-primary);
  --pf-v5-c-button--m-primary--focus--Color: var(--kc-on-primary);
  --pf-v5-c-button--m-primary--active--Color: var(--kc-on-primary);
}
.pf-v5-c-button.pf-m-primary, .pf-v5-c-button.pf-m-secondary, .pf-v5-c-button.pf-m-danger { border-radius: 0.625rem; font-weight: 600; }
.pf-v5-c-form-control { border-radius: 0.625rem; }
a { color: var(--kc-accent); }
::selection { background: var(--kc-primary); color: var(--kc-on-primary); }