:root,
body {
  --primary-color-light: #124575;
  --primary-color-dark: #124575;

  --background-color-light: #ffffff;
  --background-color-dark: #2b313e;

  --text-color-light: #2b313e;
  --text-color-dark: #ffffff;

  --accent-color-light: #aaacae;
  --accent-color-dark: #aaacae;

  --highlight-color: #ffc82e;

  /* main styles redefinitions to make defaults overridable */
  --md-typeset-color: var(--md-default-fg-color);
  --md-typeset-a-color: var(--md-primary-fg-color);
  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);
}

html body[data-md-color-scheme="ross"] {
  --md-primary-fg-color: var(--primary-color-light);
  --md-primary-fg-color--light: oklch(
    from var(--md-primary-fg-color) calc(l + 0.1) c h
  );
  --md-primary-fg-color--dark: oklch(
    from var(--md-primary-fg-color) calc(l - 0.1) c h
  );

  --md-accent-fg-color: var(--accent-color-light);
  --md-default-bg-color: var(--background-color-light);
  --md-default-fg-color: var(--text-color-light);
  --md-default-fg-color--light: var(--md-default-fg-color);

  --md-footer-bg-color: var(--background-color-dark);
  --md-footer-bg-color--light: oklch(
    from var(--md-footer-bg-color) calc(l + 0.1) c h
  );
  --md-footer-bg-color--dark: oklch(
    from var(--md-footer-bg-color) calc(l - 0.1) c h
  );

  --md-typeset-a-color: oklch(
    from var(--md-primary-fg-color) calc(l + 0.15) c h
  );

  /* code colors */
  --md-code-bg-color: oklch(
    from var(--md-default-bg-color) calc(l - 0.04) calc(c + 0.01) h
  );
  --md-code-fg-color: oklch(0.35 0.06 255);
  --md-code-hl-color: oklch(0.6 0.05 255);
  --md-code-hl-color--light: oklch(
    from var(--md-code-bg-color) calc(l - 0.06) calc(c + 0.02) h
  );
  --md-code-hl-number-color: oklch(0.5426 0.1621 153.34);
  --md-code-hl-special-color: oklch(0.52 0.18 25);
  --md-code-hl-function-color: oklch(0.5811 0.2 280);
  --md-code-hl-constant-color: oklch(0.54 0.15 35);
  --md-code-hl-keyword-color: oklch(0.5659 0.1374 46.09);
  --md-code-hl-string-color: oklch(0.586 0.1746 126);
  --md-code-hl-name-color: oklch(0.4165 0.1642 279.53);
  --md-code-hl-operator-color: oklch(0.22 0 255);
  --md-code-hl-punctuation-color: oklch(0.6328 0 255);
  --md-code-hl-comment-color: oklch(0.65 0.03 240);
  --md-code-hl-generic-color: var(--md-code-fg-color);
  --md-code-hl-variable-color: oklch(0.5 0.14 255);
}

html body[data-md-color-scheme="ross-dark"] {
  --md-primary-fg-color: var(--primary-color-dark);
  --md-primary-fg-color--light: oklch(
    from var(--md-primary-fg-color) calc(l + 0.1) c h
  );
  --md-primary-fg-color--dark: oklch(
    from var(--md-primary-fg-color) calc(l - 0.1) c h
  );

  --md-accent-fg-color: var(--accent-color-dark);
  --md-default-bg-color: var(--background-color-dark);
  --md-default-fg-color: var(--text-color-dark);
  --md-default-fg-color--light: var(--md-default-fg-color);

  --md-footer-bg-color: var(--md-default-bg-color);
  --md-footer-bg-color--light: oklch(
    from var(--md-footer-bg-color) calc(l + 0.1) c h
  );
  --md-footer-bg-color--dark: oklch(
    from var(--md-footer-bg-color) calc(l - 0.1) c h
  );

  --md-typeset-a-color: oklch(
    from var(--md-primary-fg-color) calc(l + 0.4) c h
  );

  /* code colors */
  --md-code-bg-color: oklch(
    from var(--md-default-bg-color) calc(l - 0.08) calc(c - 0.02) h
  );
  --md-code-fg-color: oklch(0.85 0.04 255);
  --md-code-hl-color: oklch(0.4 0.03 255);
  --md-code-hl-color--light: oklch(0.47 0.025 255);
  --md-code-hl-color--light: oklch(
    from var(--md-code-bg-color) calc(l + 0.06) calc(c - 0.02) h
  );
  --md-code-hl-number-color: oklch(0.83 0.12 85);
  --md-code-hl-special-color: oklch(0.8 0.14 25);
  --md-code-hl-function-color: oklch(0.78 0.16 280);
  --md-code-hl-constant-color: oklch(0.82 0.11 35);
  --md-code-hl-keyword-color: oklch(0.76 0.24 5);
  --md-code-hl-string-color: oklch(0.85 0.1 150);
  --md-code-hl-name-color: oklch(0.88 0.06 200);
  --md-code-hl-operator-color: oklch(0.7 0.05 180);
  --md-code-hl-punctuation-color: oklch(0.75 0.04 220);
  --md-code-hl-comment-color: oklch(0.5 0 240);
  --md-code-hl-generic-color: var(--md-code-fg-color);
  --md-code-hl-variable-color: oklch(0.82 0.1 255);
}

/* grid layout inspired by https://www.youtube.com/watch?v=c13gpBrnGEw */

.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 900px;
  --breakout-max-width: 1200px;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  padding-inline: var(--padding-inline);
  grid-column: content;
}

.content-grid .full-width > .breakout,
.content-grid > .breakout {
  padding-inline: var(--padding-inline);
  grid-column: breakout;
}

.content-grid .full-width {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}

img.full-width {
  width: 100%;
  max-height: 45vh;
  object-fit: cover;
}

/* md-button styles */

.md-typeset .md-button {
  color: var(--md-typeset-a-color);
}

.md-typeset .md-button.md-button--primary {
  color: var(--md-default-fg-color);
  background-color: var(--md-primary-fg-color);
  /* background-color: initial; */
}

.md-typeset .md-button.md-button--secondary {
  color: var(--md-default-fg-color);
  border-color: oklch(from var(--md-default-fg-color) calc(l - 0.2) c h);
}

.md-typeset .md-button:has(+ .md-button) {
  margin-right: 0.75rem;
}

.md-typeset .md-button.md-button--highlight {
  color: var(--md-footer-bg-color--dark);
  background-color: var(--highlight-color);
  border: 1px solid var(--highlight-color);
}

.md-typeset .md-button.md-button--highlight:hover {
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

[data-md-color-scheme="ross"] .md-typeset .md-button.md-button--primary {
  color: var(--text-color-dark);
}

[data-md-color-scheme="ross"] .md-typeset .md-button.md-button--primary:hover {
  color: var(--md-accent-fg-color);
}

.highlight span.filename {
  opacity: 0.7;
}

/* Center Markdown Tables (requires md_in_html extension) */
.center-table {
    text-align: center;
}

.md-typeset .center-table :is(td,th):not([align]) {
    /* Reset alignment for table cells */
    text-align: initial;
}