/* Catflap's look: Ink and Lamp; Space Grotesk, IBM Plex Sans, JetBrains Mono
   (SIL OFL). Every surface (website, desktop app, Keycloak) loads this file,
   then its own component CSS, which uses only these variables. Source of truth:
   design/brand/themes; task brand:sync copies it next to each surface's
   fonts/ folder (the font URLs are relative to it). */

@font-face { font-family: "Space Grotesk"; src: url(../fonts/space-grotesk-latin-ext.woff2) format("woff2"); font-weight: 300 700; font-display: swap;
  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: "Space Grotesk"; src: url(../fonts/space-grotesk-latin.woff2) format("woff2"); font-weight: 300 700; font-display: swap;
  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: "IBM Plex Sans"; src: url(../fonts/ibm-plex-sans-latin-ext.woff2) format("woff2"); font-weight: 100 700; font-display: swap;
  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: "IBM Plex Sans"; src: url(../fonts/ibm-plex-sans-latin.woff2) format("woff2"); font-weight: 100 700; font-display: swap;
  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: "IBM Plex Sans"; src: url(../fonts/ibm-plex-sans-italic-latin-ext.woff2) format("woff2"); font-weight: 100 700; font-style: italic; font-display: swap;
  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: "IBM Plex Sans"; src: url(../fonts/ibm-plex-sans-italic-latin.woff2) format("woff2"); font-weight: 100 700; font-style: italic; font-display: swap;
  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: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-latin-ext.woff2) format("woff2"); font-weight: 100 800; font-display: swap;
  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: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-latin.woff2) format("woff2"); font-weight: 100 800; font-display: swap;
  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; }

:root {
  /* brand: the mark's two colours */
  --brand: #15171C; --brand-dk: #000000;          /* Ink: headings, primary buttons, charts */
  --accent: #FFB020; --accent-dk: #E09400;        /* Lamp: highlights, rings, the step tick */

  /* grounds and text */
  --bg: #FFFFFF; --surface: #F5F6F8; --surface-2: #EBEDF1; --raised: #FFFFFF;
  --ink: #15171C; --ink-2: #474D5C; --ink-3: #5F6574;
  --line: #E1E4EA; --line-2: #C9CED8;
  --link: #15171C; --link-line: #FFB020;
  --primary: #15171C; --primary-hover: #2B2F38; --on-primary: #FFFFFF;
  --switch-on: var(--primary); /* a toggle that is on */
  --danger: #B0262C; --danger-hover: #8E1E23;

  /* states: colour + dot + word */
  --ok-ink: #17703F; --ok-bg: #E2F3E9; --ok-dot: #24A35C;
  --wait-ink: #8F4D00; --wait-bg: #FFF2D4; --wait-dot: #FFB020;
  --off-ink: #474D5C; --off-bg: #EEF0F4; --off-dot: #9AA0AE;
  --bad-ink: #B0262C; --bad-bg: #FBE6E6; --bad-dot: #E5484D;
  --info-ink: #1F4E8C; --info-bg: #E6EEFA; --info-dot: #3B7DDD;

  /* tinted tags and badges */
  --tint-brand-bg: #ECEEF2; --tint-brand-ink: #15171C;
  --tint-accent-bg: #FFF2D4; --tint-accent-ink: #8F4D00;
  --tint-gold-bg: #FFF2D4; --tint-gold-ink: #8F4D00;

  /* the call to action (one per view) */
  --cta-bg: #FFB020; --cta-ink: #15171C; --cta-hover-bg: #FFC24F; --cta-hover-ink: #15171C;
  --cta-case: none; --cta-spacing: 0; --cta-weight: 600; --cta-size: 15px;

  /* dark bands: hero, brand panels */
  --hero-bg: #15171C; --hero-ink: #ECEEF2; --hero-ink-2: #B4B9C4; --hero-accent: #FFB020; --hero-line: rgba(255,255,255,.14);
  /* the website footer */
  --foot-bg: #FFFFFF; --foot-ink: #474D5C; --foot-head: #15171C; --foot-link: #15171C; --foot-link-hover: #8F4D00; --foot-line: #E1E4EA;

  /* code */
  --code-bg: #15171C; --code-head-bg: #1F2229; --code-head-ink: #B4B9C4; --code-hover: #2B2F38;
  --code-ink: #E8EAEE; --code-dim: #9AA0AE; --code-key: #9CC8FF; --code-str: #FFC766; --code-prompt: #FFB020;

  /* type */
  --head: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --h-weight: 600; --h1-weight: 700; --h-spacing: -0.02em;
  --eyebrow-font: var(--mono); --eyebrow-weight: 500; --eyebrow-size: 12.5px; --eyebrow-spacing: .06em; --eyebrow-color: #5F6574;
  --nav-case: none; --nav-spacing: 0; --nav-weight: 500; --nav-size: 15px; --nav-ink: #474D5C; --nav-on: #15171C; --nav-on-line: #FFB020;
  --label-case: none; --label-spacing: 0;          /* table heads, tab labels */
  --btn-font: var(--body);
  --word-case: lowercase; --word-weight: 700; --word-spacing: -0.03em;   /* the wordmark: "catflap" */
  --mark-size: 34px;  /* the mark beside the wordmark in the website header */

  /* shapes */
  --r: 10px; --r-sm: 6px; --r-lg: 14px;
  --focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #15171C, 0 0 0 6px #FFB020;
  --shadow: 0 1px 2px rgba(21, 23, 28, .06), 0 4px 16px rgba(21, 23, 28, .06);
  --shadow-lg: 0 2px 6px rgba(21, 23, 28, .08), 0 18px 48px rgba(21, 23, 28, .16);
  --scrim: rgba(15, 17, 21, .45);
  /* step numbers: a rounded square */
  --step-bg: #15171C; --step-ink: #FFFFFF; --step-done-bg: #FFB020; --step-done-ink: #15171C; --step-todo-bg: #EBEDF1; --step-todo-ink: #474D5C;
  --step-radius: 9px;
  --avatar-bg: #FFB020; --avatar-ink: #15171C;
  /* partner logos sit on a plate; transparent where the ground is light */
  --credits-bg: transparent; --credits-pad: 0;
  /* charts and heat maps */
  --chart-1: #15171C; --chart-1-hover: #000000; --chart-2: #E09400;
  --heat-1: #F3F4F6; --heat-2: #E1E4EA; --heat-3: #B9BFCB; --heat-4: #5F6574; --heat-5: #15171C;

  color-scheme: light;
}

/* dark mode (the desktop app's setting; the website and Keycloak stay light) */
.theme-dark {
  --brand: #ECEEF2; --brand-dk: #FFFFFF; --accent: #FFB83D; --accent-dk: #FFC766;
  --bg: #0F1115; --surface: #14171C; --surface-2: #1E222A; --raised: #171A20;
  --ink: #ECEEF2; --ink-2: #B4B9C4; --ink-3: #9298A5;
  --line: #2A2E37; --line-2: #3A3F4A;
  --link: #ECEEF2; --link-line: #FFB83D;
  --primary: #ECEEF2; --primary-hover: #FFFFFF; --on-primary: #15171C;
  --switch-on: #E09400;
  --danger: #E5484D; --danger-hover: #FF6369;
  --ok-ink: #4FD08A; --ok-bg: #14301F; --wait-ink: #FFC766; --wait-bg: #3A2A0C;
  --off-ink: #B4B9C4; --off-bg: #1E222A; --bad-ink: #FF8A8F; --bad-bg: #3A1719;
  --info-ink: #9CC8FF; --info-bg: #152338;
  --tint-brand-bg: #1E222A; --tint-brand-ink: #ECEEF2; --tint-accent-bg: #3A2A0C; --tint-accent-ink: #FFC766;
  --tint-gold-bg: #3A2A0C; --tint-gold-ink: #FFC766;
  --eyebrow-color: #9298A5; --nav-ink: #B4B9C4; --nav-on: #ECEEF2;
  --code-bg: #0A0B0E; --code-head-bg: #14171C;
  --focus: 0 0 0 2px #0F1115, 0 0 0 4px #FFB83D;
  --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-lg: 0 18px 48px rgba(0,0,0,.5);
  --scrim: rgba(0, 0, 0, .55);
  --step-bg: #ECEEF2; --step-ink: #15171C; --step-todo-bg: #1E222A; --step-todo-ink: #B4B9C4;
  --credits-bg: #FFFFFF; --credits-pad: 10px 16px;
  --chart-1: #ECEEF2; --chart-1-hover: #FFFFFF;
  color-scheme: dark;
}