@layer pmx.foundation, pmx.plugins, pmx.theme;
@layer pmx.theme {
/* Paper — a well-set book page. Literata throughout, ink-blue links, hairline
   rules and near-square corners. */

:root:where([data-pmx-theme="paper"]) {
  --pmx-color-bg: light-dark(oklch(0.985 0.005 85), oklch(0.185 0.008 70));
  --pmx-color-fg: light-dark(oklch(0.24 0.012 70), oklch(0.92 0.012 85));
  --pmx-color-muted: light-dark(oklch(0.47 0.016 70), oklch(0.73 0.016 80));
  --pmx-color-surface: light-dark(oklch(0.958 0.008 85), oklch(0.225 0.01 70));
  --pmx-color-border: light-dark(oklch(0.885 0.01 80), oklch(0.32 0.012 70));
  --pmx-color-accent: light-dark(oklch(0.45 0.12 255), oklch(0.79 0.08 250));
  --pmx-color-link: var(--pmx-color-accent);
  --pmx-color-focus: var(--pmx-color-accent);
  --pmx-color-on-accent: var(--pmx-color-bg);

  --pmx-font-body: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --pmx-font-heading: var(--pmx-font-body);
  --pmx-prose-size: 1.125rem;
  --pmx-prose-leading: 1.7;
  --pmx-prose-flow: 1.1em;
  --pmx-prose-scale: 1.25;
  --pmx-document-measure: 34em;

  --pmx-radius-sm: 2px;
  --pmx-radius-md: 3px;
  --pmx-radius-lg: 3px;
  --pmx-radius-xl: 4px;
  --pmx-radius-2xl: 6px;
  --pmx-radius-3xl: 8px;
  --pmx-radius-4xl: 10px;
  --pmx-shadow-color: transparent;

  --pmx-code-bg: var(--pmx-color-surface);
  --pmx-code-keyword: var(--pmx-color-accent);
  --pmx-code-string: light-dark(oklch(0.45 0.09 150), oklch(0.8 0.08 150));

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

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

    :where(a:not(.pmx-button)) {
      text-decoration-thickness: 0.06em;
      text-underline-offset: 0.18em;
    }

    :where(blockquote) {
      font-style: italic;
      color: var(--pmx-color-fg);
      padding-inline-start: 1.25em;
      border-inline-start: 1px solid var(--pmx-color-border-strong);
    }

    :where(th) {
      font-weight: 400;
      font-style: italic;
      color: var(--pmx-color-muted);
    }

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

    :where(code) {
      border: 0;
    }

    :where(.pmx-callout) {
      padding-inline-start: 1.25rem;
      border: 0;
      border-inline-start: 2px solid var(--pmx-callout-color);
      border-radius: 0;
      background: none;
    }

    :where(.pmx-callout-title) {
      padding: 0 0 0.35em;
      font-size: 0.8em;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--pmx-callout-color);
    }

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

    :where(.pmx-callout-content) {
      padding: 0;
    }
  }

  .pmx-document
    a[data-pmx-link="button"]:not([data-pmx-link-variant="outline"]) {
    border-color: var(--pmx-color-fg);
    color: var(--pmx-color-fg);
    background: transparent;
  }

  .pmx-document
    a[data-pmx-link="button"]:not([data-pmx-link-variant="outline"]):hover {
    color: var(--pmx-color-bg);
    background: var(--pmx-color-fg);
  }

  .pmx-document[data-pmx-play="presentation"] {
    --pmx-slide-title-size: clamp(3rem, 7.5vw, 6.5rem);
    --pmx-slide-media-radius: 3px;
  }
}


/* Studio — product clarity. Instrument Sans, one cobalt accent, quiet surfaces. */

:root:where([data-pmx-theme="studio"]) {
  --pmx-color-bg: light-dark(oklch(0.995 0.002 265), oklch(0.165 0.012 265));
  --pmx-color-fg: light-dark(oklch(0.2 0.016 265), oklch(0.95 0.006 265));
  --pmx-color-muted: light-dark(oklch(0.49 0.018 265), oklch(0.72 0.016 265));
  --pmx-color-surface: light-dark(oklch(0.968 0.005 265), oklch(0.21 0.014 265));
  --pmx-color-border: light-dark(oklch(0.905 0.007 265), oklch(0.295 0.014 265));
  --pmx-color-accent: light-dark(oklch(0.52 0.2 262), oklch(0.76 0.13 258));
  --pmx-color-link: var(--pmx-color-accent);
  --pmx-color-focus: var(--pmx-color-accent);
  --pmx-color-on-accent: light-dark(oklch(0.995 0.002 265), oklch(0.17 0.012 265));

  --pmx-font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --pmx-font-heading: var(--pmx-font-body);
  --pmx-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pmx-prose-size: 1.0625rem;
  --pmx-prose-leading: 1.6;
  --pmx-prose-scale: 1.25;
  --pmx-document-measure: 34em;

  --pmx-radius-sm: 4px;
  --pmx-radius-md: 6px;
  --pmx-radius-lg: 8px;
  --pmx-radius-xl: 10px;
  --pmx-radius-2xl: 14px;
  --pmx-radius-3xl: 18px;
  --pmx-radius-4xl: 24px;

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

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

    :where(h1) {
      letter-spacing: -0.03em;
    }

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

    :where(a:not(.pmx-button)) {
      text-decoration-color: color-mix(in oklch, var(--pmx-color-link) 35%, transparent);
    }

    :where(blockquote) {
      color: var(--pmx-color-fg);
      font-size: 1.05em;
      padding-inline-start: 1.1em;
      border-inline-start: 3px solid var(--pmx-color-accent);
    }

    :where(th) {
      border-bottom-color: var(--pmx-color-border-strong);
      font-size: 0.75em;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--pmx-color-muted);
    }

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

    :where(code) {
      border: 0;
    }

    :where(.pmx-callout) {
      padding: 1rem 1.15rem;
      border: 0;
      border-radius: var(--pmx-radius-xl);
      background: color-mix(in oklch, var(--pmx-callout-color) 8%, var(--pmx-color-surface));
    }

    :where(.pmx-callout-title) {
      padding: 0 0 0.4rem;
      font-size: 0.85em;
      font-weight: 600;
      color: var(--pmx-callout-color);
    }

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

    :where(.pmx-callout-content) {
      padding: 0;
    }
  }

  .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);
  }

  .pmx-document
    a[data-pmx-link="button"]:not([data-pmx-link-variant="outline"]):hover {
    background: color-mix(in oklch, var(--pmx-color-fg) 85%, var(--pmx-color-bg));
  }

  .pmx-document[data-pmx-play="presentation"] {
    --pmx-slide-title-size: clamp(3.5rem, 8.5vw, 7.5rem);
    --pmx-slide-media-radius: 10px;
  }
}


/* Terminal — technical and dark. Geist Mono headings over Geist, one hue, square
   corners. Change --pmx-hue to retint: 72 amber, 145 green, 200 cyan. */

:root:where([data-pmx-theme="terminal"]) {
  --pmx-hue: 72;

  --pmx-color-bg: oklch(0.155 0.008 var(--pmx-hue));
  --pmx-color-fg: oklch(0.9 0.01 var(--pmx-hue));
  --pmx-color-muted: oklch(0.72 0.02 var(--pmx-hue));
  --pmx-color-surface: oklch(0.195 0.012 var(--pmx-hue));
  --pmx-color-border: oklch(0.3 0.022 var(--pmx-hue));
  --pmx-color-accent: oklch(0.83 0.15 var(--pmx-hue));
  --pmx-color-link: var(--pmx-color-accent);
  --pmx-color-focus: var(--pmx-color-accent);
  --pmx-color-on-accent: var(--pmx-color-bg);

  --pmx-font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --pmx-font-heading: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pmx-font-mono: var(--pmx-font-heading);
  --pmx-prose-size: 1.0625rem;
  --pmx-prose-leading: 1.65;
  --pmx-prose-scale: 1.2;
  --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-fg: var(--pmx-color-fg);
  --pmx-code-keyword: var(--pmx-color-accent);
  --pmx-code-string: oklch(0.8 0.12 150);
  --pmx-code-comment: var(--pmx-color-muted);

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

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

    :where(a:not(.pmx-button)) {
      text-decoration-style: dotted;
      text-decoration-thickness: 0.1em;
    }

    :where(blockquote) {
      color: var(--pmx-color-fg);
      padding-inline-start: 1.1em;
      border-inline-start: 2px solid var(--pmx-color-accent);
    }

    :where(table) {
      font-family: var(--pmx-font-mono);
      font-size: 0.85em;
    }

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

    :where(pre:not(.pmx-code-block pre), .pmx-code-block) {
      border: 1px solid var(--pmx-color-border);
    }

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

    :where(.pmx-callout-title) {
      padding: 0.9em 1.1em 0;
      font-family: var(--pmx-font-mono);
      font-size: 0.8em;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--pmx-callout-color);
    }

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

    :where(.pmx-callout-content) {
      padding: 0.35em 1.1em 0.9em;
    }
  }

  .pmx-document
    a[data-pmx-link="button"]:not([data-pmx-link-variant="outline"]) {
    border-color: var(--pmx-color-accent);
    color: var(--pmx-color-accent);
    background: transparent;
    font-family: var(--pmx-font-mono);
    font-size: 0.9em;
  }

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

  .pmx-document[data-pmx-play="presentation"] {
    --pmx-slide-title-size: clamp(2.75rem, 6.5vw, 5.5rem);
    --pmx-slide-code-size: clamp(1rem, 1.55vw, 1.35rem);
    --pmx-slide-media-radius: 0;
  }
}


/* Synthwave — the PathMX brand. Warm paper or midnight blue, violet and cyan,
   Bricolage Grotesque headings over Atkinson Hyperlegible. */

:root:where([data-pmx-theme="synthwave"]) {
  --pmx-color-bg: light-dark(#f6f3eb, #14172e);
  --pmx-color-fg: light-dark(#182a55, #f5f0e7);
  --pmx-color-muted: light-dark(#5b5a75, #aeaec8);
  --pmx-color-surface: light-dark(#ede9f2, #1e2140);
  --pmx-color-border: light-dark(#d9d3e4, #363a5e);
  --pmx-color-accent: light-dark(#6940be, #c59bff);
  --pmx-color-link: var(--pmx-color-accent);
  --pmx-color-focus: light-dark(#8540b0, #53d9ed);
  --pmx-color-on-accent: light-dark(#ffffff, #14172e);
  --pmx-stripes: linear-gradient(
    90deg,
    light-dark(#6755e8, #53d9ed),
    light-dark(#9467ea, #8195ef) 35%,
    light-dark(#d560ca, #c463e2) 70%,
    light-dark(#eb55ab, #e852be)
  );

  --pmx-font-body: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --pmx-font-heading: "Bricolage Grotesque", var(--pmx-font-body);
  --pmx-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pmx-prose-size: 1.0625rem;
  --pmx-prose-leading: 1.6;
  --pmx-prose-scale: 1.25;
  --pmx-document-measure: 33em;

  --pmx-radius-sm: 5px;
  --pmx-radius-md: 8px;
  --pmx-radius-lg: 10px;
  --pmx-radius-xl: 14px;
  --pmx-radius-2xl: 18px;
  --pmx-radius-3xl: 24px;
  --pmx-radius-4xl: 30px;
  --pmx-shadow-color: light-dark(oklch(0.3 0.08 285 / 0.12), oklch(0 0 0 / 0.5));

  --pmx-code-bg: light-dark(#ede9f2, #1e2140);
  --pmx-code-fg: var(--pmx-color-fg);
  --pmx-code-keyword: light-dark(#903b91, #ed91ce);
  --pmx-code-string: light-dark(#246f79, #75d4dc);

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

    :where(h1) {
      font-weight: 750;
      letter-spacing: -0.035em;
    }

    :where(.pmx-heading.level-h1 + p, h1 + p) {
      font-size: 1.15em;
      line-height: 1.5;
    }

    :where(a:not(.pmx-button)) {
      text-decoration-thickness: 0.07em;
      text-underline-offset: 0.2em;
    }

    :where(blockquote) {
      color: var(--pmx-color-fg);
      padding-inline-start: 1.1em;
      border-inline-start: 3px solid var(--pmx-color-accent);
    }

    > :where(hr) {
      block-size: 3px;
      border: 0;
      border-radius: 2px;
      background: var(--pmx-stripes);
    }

    :where(th) {
      font-size: 0.8em;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--pmx-color-muted);
    }

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

    :where(code) {
      border: 0;
    }

    :where(.pmx-callout) {
      padding: 1rem 1.15rem;
      border: 0;
      border-radius: var(--pmx-radius-lg);
      background:
        linear-gradient(var(--pmx-callout-color), var(--pmx-callout-color)) left / 3px 100% no-repeat,
        color-mix(in oklch, var(--pmx-callout-color) 8%, var(--pmx-color-surface));
    }

    :where(.pmx-callout-title) {
      padding: 0 0 0.4rem;
      font-family: var(--pmx-font-heading);
      font-size: 0.95em;
      font-weight: 700;
      color: var(--pmx-color-fg);
    }

    :where(.pmx-callout-icon) {
      color: var(--pmx-callout-color);
    }

    :where(.pmx-callout-content) {
      padding: 0;
    }
  }

  .pmx-document[data-pmx-play="presentation"] {
    --pmx-slide-title-size: clamp(3.25rem, 8vw, 7rem);
    --pmx-slide-media-radius: 14px;
  }
}
}