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

/* Glass — cool neutrals, one raised card, soft radius. */

:root {
  --glass-card: light-dark(oklch(0.99 0.002 250), oklch(0.19 0.012 250));

  --pmx-color-bg: light-dark(oklch(0.96 0.004 250), oklch(0.14 0.01 250));
  --pmx-color-fg: light-dark(oklch(0.2 0.012 250), oklch(0.94 0.008 250));
  --pmx-color-muted: light-dark(oklch(0.46 0.012 250), oklch(0.72 0.012 250));
  --pmx-color-surface: light-dark(
    oklch(0.965 0.005 250),
    oklch(0.235 0.015 250)
  );
  --pmx-color-border: light-dark(oklch(0.91 0.005 250), oklch(0.29 0.015 250));
  --pmx-color-accent: light-dark(oklch(0.52 0.15 235), oklch(0.7 0.13 235));
  --pmx-color-link: var(--pmx-color-accent);
  --pmx-color-focus: var(--pmx-color-accent);
  --pmx-color-on-accent: light-dark(
    oklch(0.99 0.002 235),
    oklch(0.12 0.02 235)
  );
  --pmx-shadow-color: light-dark(
    oklch(0.2 0.02 250 / 0.06),
    oklch(0 0 0 / 0.35)
  );

  --pmx-font-body: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --pmx-font-heading: var(--pmx-font-body);
  --pmx-prose-size: 1rem;
  --pmx-prose-scale: 1.25;
  --pmx-prose-leading: 1.6;
  --pmx-document-measure: 34em;

  --pmx-radius-sm: 4px;
  --pmx-radius-md: 6px;
  --pmx-radius-lg: 10px;
  --pmx-radius-xl: 16px;
  --pmx-radius-2xl: 20px;
  --pmx-radius-3xl: 24px;
  --pmx-radius-4xl: 28px;

  --pmx-code-bg: var(--pmx-color-surface);
  --pmx-code-keyword: var(--pmx-color-accent);

  /* The document is the one raised card on a tinted page. */
  .pmx-document {
    padding: clamp(1.25rem, 4vw, 2.5rem);
    background: var(--glass-card);
    border: 0;
    border-radius: var(--pmx-radius-xl);
    box-shadow:
      0 0 0 1px var(--pmx-color-border),
      0 2px 4px var(--pmx-shadow-color),
      0 16px 40px var(--pmx-shadow-color);
  }

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

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

    :where(th) {
      font-size: 0.75em;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--pmx-color-muted);
    }

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

    :where(tr > :first-child) {
      background: var(--glass-card);
    }

    :where(code) {
      border: 0;
    }

    :where(.pmx-callout) {
      border: 0;
      border-radius: var(--pmx-radius-lg);
      background: var(--pmx-color-surface);
    }

    :where(.pmx-callout-title) {
      padding: 1em 1.25em 0;
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--pmx-color-fg);
    }

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

    :where(.pmx-callout-content) {
      padding: 0.35em 1.25em 1em;
      font-size: 0.95em;
      color: var(--pmx-color-fg);
    }
  }

  .pmx-document a[data-pmx-link="button"] {
    border-radius: var(--pmx-radius-lg);
    border-color: var(--pmx-color-accent);
    font-weight: 500;
  }

  /* Under the Player the stage is the card; the document sheds its own chrome. */
  .pmx-document[data-pmx-play] {
    padding: revert-layer;
    background: revert-layer;
    border: revert-layer;
    border-radius: revert-layer;
    box-shadow: revert-layer;
  }

  .pmx-document[data-pmx-play="presentation"] {
    --pmx-slide-bg: var(--glass-card);
    --pmx-slide-media-radius: 16px;
  }
}