/* An example custom theme, linked with [@styles.theme] from bauhaus.md. It uses
   system fonts and the shared heading scale. */

/* Bauhaus — geometric sans, primaries as structure, hard edges. */

:root {
  --bauhaus-red: light-dark(oklch(0.55 0.21 28), oklch(0.66 0.21 28));
  --bauhaus-blue: light-dark(oklch(0.45 0.19 262), oklch(0.7 0.15 262));
  --bauhaus-yellow: light-dark(oklch(0.82 0.17 90), oklch(0.85 0.17 90));

  --pmx-color-bg: light-dark(oklch(0.97 0.012 85), oklch(0.16 0.008 60));
  --pmx-color-fg: light-dark(oklch(0.15 0 0), oklch(0.95 0.01 85));
  --pmx-color-muted: light-dark(oklch(0.45 0.01 60), oklch(0.68 0.012 80));
  --pmx-color-surface: light-dark(oklch(0.93 0.015 85), oklch(0.21 0.01 60));
  --pmx-color-border: light-dark(oklch(0.78 0.012 80), oklch(0.34 0.012 60));
  --pmx-color-accent: var(--bauhaus-red);
  --pmx-color-link: var(--bauhaus-blue);
  --pmx-color-focus: var(--bauhaus-blue);
  --pmx-color-warning: var(--bauhaus-yellow);
  --pmx-color-on-accent: light-dark(oklch(0.98 0.01 85), oklch(0.15 0 0));

  --pmx-font-body: "Futura", "Century Gothic", "Avenir Next", sans-serif;
  --pmx-font-heading: var(--pmx-font-body);
  --pmx-prose-size: 1.0625rem;
  --pmx-prose-scale: 1.25;
  --pmx-prose-leading: 1.6;
  --pmx-document-measure: 34em;

  --pmx-radius-sm: 0;
  --pmx-radius-md: 0;
  --pmx-radius-lg: 0;
  --pmx-radius-xl: 0;
  --pmx-radius-2xl: 0;
  --pmx-radius-3xl: 0;
  --pmx-radius-4xl: 0;
  --pmx-radius-full: 9999px;
  --pmx-shadow-color: transparent;

  --pmx-code-bg: var(--pmx-color-surface);
  --pmx-code-keyword: var(--bauhaus-red);
  --pmx-code-string: var(--bauhaus-blue);

  @scope (.pmx-prose) to ([data-pmx-prose="off"]) {
    :where(h1, h2, h3, h4) {
      font-weight: 700;
      letter-spacing: -0.02em;
      text-transform: none;
    }

    /* The title sits under a heavy rule, the way a Bauhaus poster is built. */
    :where(.pmx-heading.level-h1) {
      padding-block-start: 0.6rem;
      border-block-start: 3px solid var(--pmx-color-fg);
    }

    :where(.pmx-heading.level-h1) > h1 {
      line-height: 1;
    }

    :where(.pmx-heading.level-h1 + p) {
      font-size: 1.125em;
      line-height: 1.4;
      font-weight: 400;
      color: var(--pmx-color-muted);
    }

    /* A red square marks each section. */
    :where(.pmx-heading.level-h2) > h2::before {
      content: "";
      display: inline-block;
      inline-size: 0.35em;
      block-size: 0.35em;
      margin-inline-end: 0.5em;
      vertical-align: 0.1em;
      background: var(--bauhaus-red);
    }

    :where(ul) {
      list-style-type: square;
    }

    :where(li)::marker {
      color: var(--bauhaus-red);
    }

    :where(blockquote) {
      border: 0;
      color: var(--pmx-color-fg);
      font-weight: 500;
    }

    :where(hr) {
      border-block-start-width: 3px;
      border-block-start-color: var(--pmx-color-fg);
    }

    :where(th) {
      border-bottom: 3px solid var(--pmx-color-fg);
      font-size: 0.72em;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    :where(table) {
      font-variant-numeric: tabular-nums;
    }

    :where(code) {
      border: 0;
    }

    :where(.pmx-callout) {
      --pmx-callout-color: var(--bauhaus-blue);
      border: 1px solid var(--pmx-color-border);
      border-radius: 0;
      background: none;
    }

    :where(
      .pmx-callout[data-callout="tip"],
      .pmx-callout[data-callout="hint"],
      .pmx-callout[data-callout="important"],
      .pmx-callout[data-callout="question"]
    ) {
      --pmx-callout-color: var(--bauhaus-yellow);
    }

    :where(
      .pmx-callout[data-callout="warning"],
      .pmx-callout[data-callout="caution"],
      .pmx-callout[data-callout="danger"],
      .pmx-callout[data-callout="failure"]
    ) {
      --pmx-callout-color: var(--bauhaus-red);
    }

    :where(.pmx-callout-title) {
      gap: 0.6em;
      padding: 0.8em 1em 0;
      color: var(--pmx-color-fg);
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* The icon becomes a colored square; the type reads through its color. */
    :where(.pmx-callout-icon) {
      inline-size: 0.8rem;
      block-size: 0.8rem;
      background: var(--pmx-callout-color);
    }

    :where(.pmx-callout-icon svg) {
      display: none;
    }

    :where(.pmx-callout-content) {
      padding: 0.35em 1em 0.9em;
      font-size: 0.95em;
    }
  }

  .pmx-document
    a[data-pmx-link="button"]:not([data-pmx-link-variant="outline"]) {
    border-color: var(--pmx-color-fg);
    color: var(--pmx-color-bg);
    background: var(--pmx-color-fg);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .pmx-document
    a[data-pmx-link="button"]:not([data-pmx-link-variant="outline"]):hover {
    border-color: var(--bauhaus-red);
    background: var(--bauhaus-red);
    color: var(--pmx-color-on-accent);
  }

  /* Slides keep the title rule; the section square is a document device. */
  .pmx-document[data-pmx-play="presentation"] {
    --pmx-slide-title-size: clamp(3.5rem, 9vw, 8rem);
    --pmx-slide-media-radius: 0;

    h2::before {
      content: none;
    }
  }
}