/* Wizardsardine theme: fonts, tokens, base and ws- components. Dark is the only theme. */

/* IBM Plex Sans and Mono, self-hosted (SIL OFL: static/fonts/OFL.txt) */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibmplexsans-regular-webfont.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/ibmplexsans-italic-webfont.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibmplexsans-medium-webfont.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/ibmplexsans-semibold-webfont.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/ibmplexsans-bold-webfont.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibmplexmono-regular-webfont.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibmplexmono-medium-webfont.woff2") format("woff2"); }

/* Tokens */
:root {
  --ws-blue: #5133ff; --ws-violet: #ac43ff; --ws-aqua: #61ffe1; --ws-purple: #853cff; --ws-green: #5fe7e4;
  --light-blue: #b0def0; --lighter-blue: #c3dfea; --heading-blue: #caf0ff; --link: #5ba9c8; --focus: #5572f5;
  --surface-000: #000000; --surface-050: #0c0c0c; --surface-075: #0e0e0e; --surface-085: #111111;
  --surface-100: #151515; --surface-150: #171717; --surface-200: #181818; --surface-250: #1d1d1d;
  --surface-300: #1e1e1e; --surface-350: #202020; --surface-400: #212121; --surface-500: #2e2e2e;
  --surface-600: #373737; --surface-700: #414141;
  --text-primary: #ffffff; --text-soft: #e7e7e7; --text-article: #d0d0d0; --text-read: #c1c1c1;
  --text-card: #a8a8a8; --text-service: #909090; --text-muted: #868686; --text-nav: #858585;
  --text-disabled: #646363; --text-on-light: #000000;
  --warning: #ffb84d;
  --font-sans: "IBM Plex Sans", sans-serif; --font-mono: "IBM Plex Mono", monospace;
  --space-6: 6px; --space-10: 10px; --space-12: 12px; --space-20: 20px; --space-30: 30px;
  --space-40: 40px; --space-50: 50px; --space-60: 60px;
  --radius-2: 2px; --radius-4: 4px; --radius-5: 5px; --radius-8: 8px; --radius-10: 10px;
  --shadow-card: 2px 4px 10px 0px rgba(0, 0, 0, 0.15);
  --container-1000: 1000px; --container-1200: 1200px;
  --ws-gradient: linear-gradient(231.49deg, #61ffe1 32.13%, #60f8e1 37.38%, #5fe7e4 44.13%, #5ccbe8 52.39%, #59a4ee 60.64%, #5572f5 69.65%, #5133ff 79.4%, #5433ff 86.15%, #5d35ff 90.66%, #6e38ff 95.16%, #853cff 99.66%, #a341ff 103.41%, #ac43ff 104.16%);
  --ws-gradient-teal: linear-gradient(237deg, #61ffe1 0%, #60f8e1 20%, #5fe7e4 50%, #5ccbe8 70%, #59a4ee 100%);
  --ws-gradient-purple: linear-gradient(237deg, #5433ff 0%, #5d35ff 20%, #6e38ff 40%, #853cff 60%, #a341ff 80%, #ac43ff 100%);
  --ws-panel: linear-gradient(90deg, #000 0%, #262626 35.42%, #232323 67.71%, #000 100%);
  --pad-x: 5vw;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface-000); -webkit-text-size-adjust: 100%; scroll-padding-top: 20px; }
body { margin: 0; background: var(--surface-000); color: var(--text-article); font: 400 16px/22px var(--font-sans); }
img, svg { max-width: 100%; }
a { color: var(--link); }
a:hover { color: var(--light-blue); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
code, kbd { font-family: var(--font-mono); font-size: 0.9em; color: var(--text-soft); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 16px; background: var(--lighter-blue); color: var(--text-on-light); font-weight: 600; border-radius: var(--radius-2); }
.skip:focus { top: 12px; }
.container { width: 100%; max-width: calc(var(--container-1200) + 2 * var(--pad-x)); margin: 0 auto; padding: 0 var(--pad-x); }
.container--narrow { max-width: calc(var(--container-1000) + 2 * var(--pad-x)); }
.container--text { max-width: calc(760px + 2 * var(--pad-x)); }
.muted { color: var(--text-muted); }

/* Components */
.ws-text-teal, .ws-text-purple { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ws-text-teal { background-image: var(--ws-gradient-teal); }
.ws-text-purple { background-image: var(--ws-gradient-purple); }

.ws-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6);
  height: 50px; padding: 0 var(--space-12); border: 0; border-radius: var(--radius-2);
  background-color: var(--surface-000); color: var(--text-primary);
  font: 600 18px var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ws-btn:hover { background-color: var(--surface-700); background-image: var(--ws-gradient); color: var(--text-on-light); filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.1)); }
.ws-btn--inverse { background-color: var(--surface-700); background-image: var(--ws-gradient); color: var(--text-on-light); padding: 0 var(--space-40); min-width: 280px; }
.ws-btn--inverse:hover { background-image: none; background-color: var(--light-blue); }
.ws-read { font: 700 16px var(--font-sans); color: var(--text-read); text-decoration: underline; }
.ws-read:hover { color: var(--light-blue); }

.ws-chip {
  display: inline-block; background-color: var(--surface-150); border-radius: var(--radius-4);
  padding: var(--space-6) var(--space-10); font: 700 14px var(--font-sans); color: var(--light-blue);
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}

.ws-service {
  display: flex; align-items: center; gap: 17px; padding: 18px 24px 18px 18px;
  border-radius: var(--radius-5); background: var(--surface-050); box-shadow: var(--shadow-card);
  transition: 0.5s;
}
.ws-service h3 { margin: 0; color: var(--text-primary); font: 600 22px var(--font-sans); line-height: 1.25; }
.ws-service p { margin: 4px 0 0; color: var(--text-service); font: 400 16px/20px var(--font-sans); letter-spacing: 0.16px; }

.ws-card-frame { display: flex; height: 100%; padding: 4px; border-radius: var(--radius-10); overflow: hidden; text-decoration: none; color: inherit; }
.ws-card-frame:hover { background-image: var(--ws-gradient); color: inherit; }
.ws-card { display: flex; flex-direction: column; width: 100%; background: var(--surface-300); color: inherit; border-radius: 6px; }