:root {
  --system-fonts:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue';
  --font-family-base:
    '__Inter_e66fe9', '__Inter_Fallback_e66fe9', var(--system-fonts);
  --font-family-headings:
    '__roobert_30c87b', '__roobert_Fallback_30c87b', var(--system-fonts);
  --font-family-monospace:
    '__Roboto_Mono_829659', '__Roboto_Mono_Fallback_829659', monospace;

  /* Cloudsmith Brand Colors - Dark Theme */
  --brand-color-white: #fff;
  --brand-color-black: #0a1b2a;
  --brand-color-blue-7: #2a6fe1;
  --brand-color-blue-8: #134596;
  --brand-color-grey-2: #e1eaf3;
  --brand-color-grey-4: #a5b7c5;
  --brand-color-grey-7: #5b798a;
  --brand-color-grey-8: #26465b;
  --brand-color-grey-9: #092f45;
  --brand-color-grey-10: #041e2e;
  --brand-color-purple-6: #915eff;
  --brand-color-purple-7: #7a52db;
  --base-color-grey-1000: #031c2b;

  /* Primary Colors */
  --primary: var(--brand-color-purple-6);
  --primary-light: #af8fff;
  --primary-dark: var(--brand-color-purple-7);
  --accent-blue: var(--brand-color-blue-7);
  --accent-blue-hover: var(--brand-color-blue-8);

  /* Grey Scale */
  --grey-00: var(--brand-color-white);
  --grey-10: #f8f8fc;
  --grey-20: var(--brand-color-grey-2);
  --grey-30: #c5d4de;
  --grey-40: var(--brand-color-grey-4);
  --grey-50: #8ea5b5;
  --grey-60: #768fa2;
  --grey-70: var(--brand-color-grey-7);
  --grey-80: var(--brand-color-grey-8);
  --grey-90: var(--brand-color-grey-9);
  --grey-100: var(--brand-color-grey-10);

  /* Error */
  --error: #ff6183;

  /* Background & Border */
  --bg-body: var(--grey-100);
  --bg-body-rgba: rgba(4, 30, 46, 1);
  --bg-body-alt: rgba(9, 47, 69, 1);
  --bg-code: rgba(9, 47, 69, 0.5);
  --bg-code-block: rgba(9, 47, 69, 0.8);
  --border-color: var(--grey-80);

  /* Grid variables */
  --grid-size: 40px;
  --grid-color: rgba(9, 47, 69, 0.3);

  /* Overlay Colors */
  --color-overlay-purple: rgba(145, 94, 255, 0.3);
  --color-overlay-purple-light: rgba(145, 94, 255, 0.4);
  --color-border-purple: rgba(145, 94, 255, 0.2);
  --color-overlay: rgba(9, 47, 69, 0.85);
  --color-overlay-white: rgba(255, 255, 255, 0.05);

  /* Effects */
  --material-effect:
    0 0 0 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.5);

  /* Text */
  --text-muted: var(--grey-40);
  --text-subtle: var(--grey-60);
  --text-body: var(--grey-30);
  --text-headings: var(--grey-00);
  --text-links: var(--primary);
  --text-links-hover: var(--primary-light);
  --text-code: var(--text-headings);
  --text-ul-bullet: var(--primary);
  --text-ol-bullet: var(--primary);
  --text-ol-bullet-color: var(--grey-00);
  --text-highlight: rgba(145, 94, 255, 0.1);
  --text-highlight-hover: rgba(145, 94, 255, 0.2);

  /* Buttons */
  --btn-bg-glow: rgba(255, 255, 255, 0.4);
  --btn-bg-primary: rgba(145, 94, 255, 0.9);
  --btn-bg-primary-hover: rgba(175, 143, 255, 1);
  --btn-color-primary: var(--grey-00);
  --btn-bg-secondary: rgba(38, 70, 91, 0.8);
  --btn-bg-secondary-hover: rgba(91, 121, 138, 0.9);
  --btn-color-secondary: var(--text-headings);
  --btn-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.05);

  /* Shadows */
  --shadow-code: 0px 0px 6px rgba(0, 0, 0, 0.3);
  --shadow-blockquote: 0px 0px 2px var(--color-overlay-purple);
  --shadow-image: 0 0 10px rgba(0, 0, 0, 0.15);
  --shadow-image-hover: 0 0 20px var(--color-overlay-purple-light);

  /* Typography */
  --fw-hair: 100;
  --fw-thin: 200;
  --fw-extralight: 250;
  --fw-light: 300;
  --fw-book: 350;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --fw-heavy: 900;
  --fw-h1: var(--fw-medium);
  --fw-h2: var(--fw-medium);
  --fw-h3: var(--fw-medium);
  --fw-h4: var(--fw-medium);
  --fw-h5: var(--fw-medium);
  --fw-h6: var(--fw-medium);

  /* Font sizes */
  --font-size-root: 16px;
  --font-size-base: 16px;
  --font-size-sm: 0.7rem;
  --font-size-xs: 0.6rem;
  --font-size-xxs: 0.5rem;
  --font-size-h1: 4.25rem;
  --font-size-h2: 3.5rem;
  --font-size-h3: 1.6rem;
  --font-size-h4: 1.2rem;
  --font-size-h5: 1.05rem;
  --font-size-h6: 0.9rem;

  @media (max-width: 1199px) {
    --font-size-h1: 3.5rem;
    --font-size-h2: 2.5rem;
  }

  @media (max-width: 999px) {
    --font-size-root: 15px;
    --font-size-h1: 3rem;
    --font-size-h2: 2rem;
  }

  /* Line heights */
  --line-height-base: 1.55;
  --line-height-sm: 1.428571429;
  --line-height-xs: 1.142857143;
  --line-height-h1: 1;
  --line-height-h2: 1.05;
  --line-height-h3: 1.25;
  --line-height-h4: 1.3;
  --line-height-h5: 1.142857143;
  --line-height-h6: 1.555555556;

  /* Margins */
  --margin-bottom-base: var(--token-20);
  --headings-margin-bottom: var(--margin-bottom-base);

  /* Link decoration */
  --link-decoration: none;
  --link-hover-decoration: none;

  /* Layout & Spacing */
  --width: 90vw;
  --max-width: 1200px;
  --token-02: 0.1rem;
  --token-04: 0.2rem;
  --token-08: 0.4rem;
  --token-12: 0.6rem;
  --token-16: 0.8rem;
  --token-20: 1rem;
  --token-24: 1.2rem;
  --token-32: 1.6rem;
  --token-40: 2rem;
  --token-48: 2.4rem;
  --token-56: 2.8rem;
  --token-64: 3.2rem;
  --token-72: 3.6rem;
  --token-80: 4rem;
  --token-88: 4.4rem;
  --token-96: 4.8rem;
  --token-104: 5.2rem;
  --token-112: 5.6rem;
  --token-120: 6rem;
  --token-128: 6.4rem;
  --token-156: 7.8rem;

  /* Border Radius */
  --radius-round: 50%;
  --radius-lg: var(--token-32);
  --radius-md: var(--token-24);
  --radius-sm: var(--token-12);
  --radius-xs: var(--token-08);
  --radius-xxs: var(--token-04);
  --border-radius-default: 12px;
  --border-radius-large: 16px;
  --border-radius-small: 6px;
  --border-radius-x-small: 4px;

  /* Box Shadows */
  --shadow-sm: rgba(50, 50, 93, 0.08) 0 8px 18px -4px;
  --shadow-md: rgba(50, 50, 93, 0.25) 0 12px 28px -4px;

  /* Transform */
  --iso-rotation: rotateX(60deg) rotateY(0deg) rotateZ(45deg);
  --perspective: 1600px;

  /* Transition */
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --transition-default: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
  --transition-fast: 0.2s ease-in-out;
}

.reveal-viewport {
  position: relative;
  background-color: var(--bg-body);
  color: var(--text-body);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grid background pattern - applied to reveal container for proper layering */
.reveal-viewport::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('./cloudsmith-grid.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

body {
  margin: 0;
  padding: 0;
}

body::after {
  bottom: var(--token-16);
  color: var(--text-subtle);
  content: attr(data-bg-text);
  display: block;
  font-size: var(--font-size-xs);
  line-height: 1;
  position: absolute;
  right: var(--token-08);
  z-index: 10;
}

.reveal {
  height: 100%;
  position: relative;
  z-index: 2;
  background: transparent;
  border-radius: var(--border-radius-default);
  align-items: center;
  font-size: 32px;
  font-weight: var(--fw-regular);
  color: var(--grey-20);
}

.reveal::after {
  content: '';
  position: absolute;
  bottom: var(--token-32);
  left: var(--token-32);
  width: 256px;
  height: 64px;
  background: url('./cloudsmith-logo.svg') no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 10;
}

.reveal sup {
  font-size: 60%;
}

::-moz-selection {
  color: var(--grey-00);
  background: var(--primary);
  text-shadow: none;
}

::selection {
  color: var(--grey-00);
  background: var(--primary);
  text-shadow: none;
}

.reveal .slides > section,
.reveal .slides > section > section {
  line-height: var(--line-height-base);
  font-weight: inherit;
}

/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 var(--token-12) 0;
  font-weight: var(--fw-semibold);
  line-height: var(--line-height-h3);
  letter-spacing: normal;
  text-shadow: none;
  word-wrap: break-word;
  color: var(--text-headings);
}

.reveal h1 {
  font-size: 2.5em;
  line-height: var(--line-height-h1);
}

.reveal h2 {
  font-size: 1.6em;
  line-height: var(--line-height-h2);
}

.reveal h3 {
  font-size: 1.3em;
}

.reveal h4 {
  font-size: 1em;
  line-height: var(--line-height-h4);
}

/*********************************************
 * OTHER
 *********************************************/
.reveal p {
  margin: var(--token-12) 0;
  line-height: var(--line-height-base);
}

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
  max-width: 95%;
  max-height: 95%;
}

.reveal strong,
.reveal b {
  font-weight: var(--fw-bold);
}

.reveal em {
  font-style: italic;
}

.reveal ol,
.reveal dl,
.reveal ul {
  display: inline-block;
  text-align: left;
  margin: 0 0 0 1em;
  font-size: 0.9em;
}

.reveal ol {
  list-style-type: decimal;
}

.reveal ul {
  list-style-type: disc;
}

.reveal ul ul {
  list-style-type: square;
}

.reveal ul ul ul {
  list-style-type: circle;
}

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
  display: block;
  margin-left: 40px;
}

.reveal dt {
  font-weight: var(--fw-bold);
}

.reveal dd {
  margin-left: 40px;
}

.reveal q,
.reveal blockquote {
  quotes: none;
}

.reveal blockquote {
  display: block;
  position: relative;
  width: 70%;
  margin: var(--margin-bottom-base) auto;
  padding: var(--token-08);
  font-style: italic;
  background: var(--text-highlight);
  box-shadow: var(--shadow-blockquote);
}

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block;
}

.reveal q {
  font-style: italic;
}

.reveal pre {
  display: block;
  position: relative;
  width: 90%;
  margin: var(--token-12) auto;
  text-align: left;
  font-size: 0.5em;
  font-family: var(--font-family-monospace);
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: var(--shadow-code);
}

.reveal code {
  font-family: var(--font-family-monospace);
}

.reveal pre code {
  display: block;
  padding: var(--token-08);
  overflow: auto;
  max-height: 400px;
  word-wrap: normal;
  background: var(--bg-code);
}

.reveal table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

.reveal table th {
  font-weight: var(--fw-bold);
}

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.15em 0.4em;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85em;
}

.reveal table th[align='center'],
.reveal table td[align='center'] {
  text-align: center;
}

.reveal table th[align='right'],
.reveal table td[align='right'] {
  text-align: right;
}

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
  border-bottom: none;
}

.reveal sup {
  vertical-align: super;
}

.reveal sub {
  vertical-align: sub;
}

.reveal small {
  display: inline-block;
  font-size: 0.6em;
  line-height: 1.2em;
  vertical-align: top;
}

.reveal small * {
  vertical-align: top;
}

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: var(--text-links);
  text-decoration: var(--link-decoration);
  transition: color var(--transition-fast);
}

.reveal a:hover {
  color: var(--text-links-hover);
  text-shadow: none;
  border: none;
  text-decoration: var(--link-hover-decoration);
}

.reveal .roll span:after {
  color: var(--grey-00);
  background: var(--primary-dark);
}

/*********************************************
 * IMAGES
 *********************************************/
.reveal section img {
  margin: var(--token-16) 0px;
  background: var(--color-overlay-white);
  border: 4px solid var(--color-border-purple);
  box-shadow: var(--shadow-image);
}

.reveal section img.plain {
  border: 0;
  box-shadow: none;
}

.reveal a img {
  transition: all var(--transition-fast);
}

.reveal a:hover img {
  background: var(--text-highlight);
  border-color: var(--primary);
  box-shadow: var(--shadow-image-hover);
}

/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls .navigate-left,
.reveal .controls .navigate-left.enabled {
  border-right-color: var(--primary);
}

.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
  border-left-color: var(--primary);
}

.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
  border-bottom-color: var(--primary);
}

.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
  border-top-color: var(--primary);
}

.reveal .controls .navigate-left.enabled:hover {
  border-right-color: var(--primary-light);
}

.reveal .controls .navigate-right.enabled:hover {
  border-left-color: var(--primary-light);
}

.reveal .controls .navigate-up.enabled:hover {
  border-bottom-color: var(--primary-light);
}

.reveal .controls .navigate-down.enabled:hover {
  border-top-color: var(--primary-light);
}

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  background: rgba(0, 0, 0, 0.2);
}

.reveal .progress span {
  background: var(--primary);
  transition: width 800ms var(--ease-in-out);
}

/*********************************************
 * CODE HIGHLIGHTING
 *********************************************/
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: var(--bg-code-block);
  color: #dcdcdc;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-tag {
  color: #e3ceab;
}

.hljs-template-tag {
  color: #dcdcdc;
}

.hljs-number {
  color: #8cd0d3;
}

.hljs-variable,
.hljs-template-variable,
.hljs-attribute {
  color: #efdcbc;
}

.hljs-literal {
  color: #efefaf;
}

.hljs-subst {
  color: #8f8f8f;
}

.hljs-title,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-section,
.hljs-type {
  color: var(--primary-light);
}

.hljs-symbol,
.hljs-bullet,
.hljs-link {
  color: #dca3a3;
}

.hljs-deletion,
.hljs-string,
.hljs-built_in,
.hljs-builtin-name {
  color: #cc9393;
}

.hljs-addition,
.hljs-comment,
.hljs-quote,
.hljs-meta {
  color: #7f9f7f;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: var(--fw-bold);
}