/* Craft Planner theme: Ember Crimson.
   A layer on top of extra.css. Every rule is scoped to html[data-cp-theme="ember-crimson"], so another theme
   can replace it by setting another value of the attribute. The shared parts (header, tabs, hero, cards,
   buttons, tables, footer) keep their structure. This file changes colour, type, corners and ornament only.
   Source of the values: design/design-selections/stitch-2026-10-16, design system "Ember Crimson Crafting Matrix".
   Fonts: Noto Serif, Inter and JetBrains Mono are the design fonts. Until the files are self-hosted in
   assets/fonts/ the stacks below fall back to system fonts. No request goes to another host.
   No figure, price or count of the design pictures is copied. Numbers come from our own server only. */

html[data-cp-theme="ember-crimson"] {
  --cpe-serif: "Noto Serif", "Cambria", "Georgia", "Times New Roman", serif;
  --cpe-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cpe-mono: "JetBrains Mono", "Cascadia Mono", "Consolas", "Courier New", monospace;
  --cpe-crimson: #e11d48;
  --cpe-crimson-hi: #ff3d68;
  --cpe-crimson-deep: #be0037;
  --cpe-rose: #ffb3b6;
  --cpe-ember: #ffb783;
  --cpe-info: #7bd0ff;
  --cpe-ink: #fffaf9;
  --cp-font: var(--cpe-sans);
  --cp-font-display: var(--cpe-serif);
  --cp-radius: 6px;
  --cp-radius-sm: 3px;
}

/* ---------- Dark scheme (the design) ---------- */

html[data-cp-theme="ember-crimson"] body[data-md-color-scheme="slate"] {
  --cp-amber: var(--cpe-crimson);
  --cp-amber-hi: var(--cpe-rose);
  --cp-amber-lo: var(--cpe-crimson-deep);
  --cp-amber-ink: var(--cpe-ink);
  --cp-night: #120d0e;
  --cp-night-2: #181213;
  --cp-night-3: #201a1b;
  --cp-snow: #ecdfe1;
  --md-default-bg-color: #181213;
  --md-default-fg-color: #ecdfe1;
  --md-default-fg-color--light: rgba(236, 223, 225, 0.78);
  --md-default-fg-color--lighter: rgba(236, 223, 225, 0.5);
  --md-default-fg-color--lightest: rgba(236, 223, 225, 0.12);
  --md-code-bg-color: #241e1f;
  --md-primary-fg-color: #120d0e;
  --md-primary-fg-color--light: #201a1b;
  --md-primary-fg-color--dark: #0c0809;
  --md-footer-bg-color: #120d0e;
  --md-footer-bg-color--dark: #0c0809;
  --md-accent-fg-color: var(--cpe-rose);
  --md-accent-fg-color--transparent: rgba(225, 29, 72, 0.14);
  --md-typeset-a-color: var(--cpe-rose);
  --cp-surface: #201a1b;
  --cp-surface-2: #2a2223;
  --cp-line: rgba(172, 136, 137, 0.28);
  --cp-line-strong: rgba(229, 189, 190, 0.5);
  --cp-text-soft: rgba(236, 223, 225, 0.76);
  --cp-accent-text: var(--cpe-rose);
  --cp-accent-tint: rgba(225, 29, 72, 0.12);
  --cp-accent-line: rgba(225, 29, 72, 0.6);
  --cp-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.9), 0 6px 18px rgba(0, 0, 0, 0.4);
  --cp-shadow-sm: 0 10px 26px -16px rgba(0, 0, 0, 0.85);
  --cp-focus: var(--cpe-rose);
}

/* ---------- Light scheme (warm paper, same crimson) ---------- */

html[data-cp-theme="ember-crimson"] body[data-md-color-scheme="default"] {
  --cp-amber: var(--cpe-crimson-deep);
  --cp-amber-hi: var(--cpe-crimson);
  --cp-amber-lo: #920028;
  --cp-amber-ink: var(--cpe-ink);
  --md-default-bg-color: #fbf5f4;
  --md-default-fg-color: #241e1f;
  --md-code-bg-color: #f1e6e5;
  --md-accent-fg-color: var(--cpe-crimson-deep);
  --md-accent-fg-color--transparent: rgba(190, 0, 55, 0.1);
  --md-typeset-a-color: #a1002f;
  --cp-surface: #ffffff;
  --cp-surface-2: #fff9f8;
  --cp-line: rgba(92, 63, 64, 0.2);
  --cp-line-strong: rgba(92, 63, 64, 0.6);
  --cp-text-soft: rgba(36, 30, 31, 0.76);
  --cp-accent-text: #a1002f;
  --cp-accent-tint: rgba(190, 0, 55, 0.08);
  --cp-accent-line: rgba(190, 0, 55, 0.55);
  --cp-focus: #920028;
}

/* ---------- Type: serif capitals for headings, mono for labels ---------- */

html[data-cp-theme="ember-crimson"] .md-typeset h1,
html[data-cp-theme="ember-crimson"] .md-typeset h2,
html[data-cp-theme="ember-crimson"] .md-typeset h3,
html[data-cp-theme="ember-crimson"] .md-header__title,
html[data-cp-theme="ember-crimson"] .cp-hero h1 {
  font-family: var(--cpe-serif);
  letter-spacing: 0.03em;
}
html[data-cp-theme="ember-crimson"] .md-typeset h1,
html[data-cp-theme="ember-crimson"] .md-typeset h2,
html[data-cp-theme="ember-crimson"] .cp-hero h1 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html[data-cp-theme="ember-crimson"] .md-typeset h2 {
  position: relative;
  padding-bottom: 0.55rem;
}
/* A short crimson rule under every second-level heading. */
html[data-cp-theme="ember-crimson"] .md-typeset h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.2rem;
  height: 2px;
  background: var(--cpe-crimson);
}
html[data-cp-theme="ember-crimson"] .cp-hero h1 {
  font-weight: 700;
  line-height: 1.08;
}
html[data-cp-theme="ember-crimson"] .md-typeset .cp-kicker,
html[data-cp-theme="ember-crimson"] .md-typeset .cp-tag,
html[data-cp-theme="ember-crimson"] .cp-hero__eyebrow,
html[data-cp-theme="ember-crimson"] .cp-stage__label,
html[data-cp-theme="ember-crimson"] .md-typeset .md-button,
html[data-cp-theme="ember-crimson"] .cp-hero .md-button,
html[data-cp-theme="ember-crimson"] .md-typeset table:not([class]) th {
  font-family: var(--cpe-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Header and tabs ---------- */

html[data-cp-theme="ember-crimson"] .md-header {
  background: rgba(18, 13, 14, 0.94);
  box-shadow: 0 1px 0 rgba(172, 136, 137, 0.28);
}
html[data-cp-theme="ember-crimson"] .md-header__button.md-logo {
  color: var(--cpe-rose);
}
html[data-cp-theme="ember-crimson"] .md-header__title {
  color: var(--cpe-rose);
  text-transform: uppercase;
}
html[data-cp-theme="ember-crimson"] .md-tabs {
  background: #120d0e;
  box-shadow: 0 1px 0 rgba(172, 136, 137, 0.28);
}
html[data-cp-theme="ember-crimson"] .md-tabs__link {
  font-family: var(--cpe-sans);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
html[data-cp-theme="ember-crimson"] .md-tabs__link::after {
  height: 2px;
  border-radius: 0;
  background: var(--cpe-crimson);
}
html[data-cp-theme="ember-crimson"] .md-tabs__item--active .md-tabs__link {
  color: var(--cpe-rose);
}
html[data-cp-theme="ember-crimson"] .md-header a:focus-visible,
html[data-cp-theme="ember-crimson"] .md-header button:focus-visible,
html[data-cp-theme="ember-crimson"] .md-header label:focus-visible,
html[data-cp-theme="ember-crimson"] .md-tabs a:focus-visible,
html[data-cp-theme="ember-crimson"] .md-footer a:focus-visible,
html[data-cp-theme="ember-crimson"] .cp-hero a:focus-visible {
  outline-color: var(--cpe-rose);
}

/* ---------- Buttons: squared, chamfered, mono labels ---------- */

html[data-cp-theme="ember-crimson"] .md-typeset .md-button,
html[data-cp-theme="ember-crimson"] .cp-hero .md-button {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.85em 1.7em;
  border-width: 1px;
  border-radius: 2px;
  clip-path: polygon(0 5px, 5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px));
}
html[data-cp-theme="ember-crimson"] .md-typeset .md-button--primary,
html[data-cp-theme="ember-crimson"] .cp-hero .md-button--primary {
  background: linear-gradient(180deg, var(--cpe-crimson-hi), var(--cpe-crimson));
  border-color: var(--cpe-crimson-hi);
  color: var(--cpe-ink);
  box-shadow: none;
}
html[data-cp-theme="ember-crimson"] .md-typeset .md-button--primary:hover,
html[data-cp-theme="ember-crimson"] .md-typeset .md-button--primary:focus,
html[data-cp-theme="ember-crimson"] .cp-hero .md-button--primary:hover,
html[data-cp-theme="ember-crimson"] .cp-hero .md-button--primary:focus {
  background: linear-gradient(180deg, #ff5a7e, var(--cpe-crimson-hi));
  border-color: #ff5a7e;
  color: var(--cpe-ink);
  box-shadow: none;
}
html[data-cp-theme="ember-crimson"] .cp-hero .md-button:not(.md-button--primary) {
  background: rgba(32, 26, 27, 0.7);
  border-color: rgba(172, 136, 137, 0.6);
}

/* ---------- Hero: warm dark, ember glow, crimson route ---------- */

html[data-cp-theme="ember-crimson"] body[data-md-color-scheme="slate"] .cp-hero,
html[data-cp-theme="ember-crimson"] .cp-hero {
  background:
    radial-gradient(48rem 26rem at 50% -14%, rgba(225, 29, 72, 0.26), transparent 64%),
    radial-gradient(34rem 22rem at 92% 108%, rgba(217, 119, 34, 0.16), transparent 62%),
    linear-gradient(180deg, #120d0e 0%, #181213 62%, #181213 100%);
  --cp-accent-tint: rgba(225, 29, 72, 0.14);
  --cp-accent-line: rgba(255, 179, 182, 0.55);
}
html[data-cp-theme="ember-crimson"] .cp-hero::before {
  background-image:
    linear-gradient(rgba(172, 136, 137, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(172, 136, 137, 0.07) 1px, transparent 1px);
}
html[data-cp-theme="ember-crimson"] .cp-hero::after {
  background: linear-gradient(90deg, transparent, rgba(225, 29, 72, 0.7) 30%, rgba(225, 29, 72, 0.7) 70%, transparent);
}
html[data-cp-theme="ember-crimson"] .cp-route {
  stroke: var(--cpe-crimson-hi);
}
html[data-cp-theme="ember-crimson"] .cp-route--branch {
  stroke: var(--cpe-ember);
}
html[data-cp-theme="ember-crimson"] .cp-node {
  fill: #120d0e;
  stroke: var(--cpe-crimson-hi);
}
html[data-cp-theme="ember-crimson"] .cp-node--miss {
  stroke: var(--cpe-ember);
}
html[data-cp-theme="ember-crimson"] .cp-node--goal {
  fill: var(--cpe-crimson-hi);
}
html[data-cp-theme="ember-crimson"] .cp-hero__eyebrow {
  border-radius: 2px;
  border-color: rgba(172, 136, 137, 0.55);
  background: rgba(32, 26, 27, 0.8);
  color: var(--cpe-ember);
}
html[data-cp-theme="ember-crimson"] .cp-hero__eyebrow::before {
  background: var(--cpe-crimson-hi);
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.25);
}
html[data-cp-theme="ember-crimson"] .cp-hero__safe {
  border-radius: 2px;
  border-left-color: var(--cpe-crimson);
  background: rgba(32, 26, 27, 0.7);
}
html[data-cp-theme="ember-crimson"] .cp-hero__safe svg {
  color: var(--cpe-rose);
}
html[data-cp-theme="ember-crimson"] .cp-stage::before {
  filter: hue-rotate(-38deg) saturate(1.05);
}

/* ---------- Cards, steps, tables: squared panels with crimson corner marks ---------- */

html[data-cp-theme="ember-crimson"] .md-typeset .cp-card,
html[data-cp-theme="ember-crimson"] .md-typeset .cp-ringcard {
  border-radius: 3px;
  background-color: var(--cp-surface);
  background-image:
    linear-gradient(var(--cpe-crimson), var(--cpe-crimson)),
    linear-gradient(var(--cpe-crimson), var(--cpe-crimson)),
    linear-gradient(var(--cpe-crimson), var(--cpe-crimson)),
    linear-gradient(var(--cpe-crimson), var(--cpe-crimson)),
    linear-gradient(var(--cpe-crimson), var(--cpe-crimson)),
    linear-gradient(var(--cpe-crimson), var(--cpe-crimson)),
    linear-gradient(var(--cpe-crimson), var(--cpe-crimson)),
    linear-gradient(var(--cpe-crimson), var(--cpe-crimson));
  background-repeat: no-repeat;
  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  border: 1px solid var(--cp-line);
}
html[data-cp-theme="ember-crimson"] .md-typeset .cp-card:hover,
html[data-cp-theme="ember-crimson"] .md-typeset .cp-card:focus-within {
  border-color: rgba(225, 29, 72, 0.55);
}
html[data-cp-theme="ember-crimson"] .md-typeset .cp-card__icon {
  border-radius: 2px;
  color: var(--cpe-rose);
  background: rgba(36, 30, 31, 0.9);
  border: 1px solid var(--cp-line);
}
html[data-cp-theme="ember-crimson"] .md-typeset .cp-tag {
  border-radius: 2px;
}
html[data-cp-theme="ember-crimson"] .md-typeset .cp-kicker {
  color: var(--cpe-ember);
}
html[data-cp-theme="ember-crimson"] .md-typeset table:not([class]) {
  border-radius: 3px;
}
html[data-cp-theme="ember-crimson"] .md-typeset table:not([class]) th {
  color: var(--cpe-ember);
  font-size: 0.64rem;
}
html[data-cp-theme="ember-crimson"] .md-typeset .cp-cta {
  border-radius: 3px;
  border-color: rgba(225, 29, 72, 0.4);
  background:
    radial-gradient(30rem 14rem at 100% 0, rgba(225, 29, 72, 0.18), transparent 70%),
    var(--cp-surface);
}
html[data-cp-theme="ember-crimson"] .md-typeset .cp-frame,
html[data-cp-theme="ember-crimson"] .cp-frame,
html[data-cp-theme="ember-crimson"] .md-typeset figure.screen a {
  border-radius: 3px;
}

/* ---------- Footer ---------- */

html[data-cp-theme="ember-crimson"] .md-footer,
html[data-cp-theme="ember-crimson"] .md-footer-meta {
  background: #120d0e;
  border-top: 1px solid rgba(172, 136, 137, 0.28);
}
html[data-cp-theme="ember-crimson"] .cp-footer-links a {
  font-family: var(--cpe-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

/* ---------- Selection and scrollbar ---------- */

html[data-cp-theme="ember-crimson"] ::selection {
  background: rgba(225, 29, 72, 0.45);
  color: #fff;
}

/* ---------- Count strip under the hero (value from mkdocs.yml, extra.counters) ---------- */

html[data-cp-theme="ember-crimson"] .cp-stats {
  background: #201a1b;
  border-top: 1px solid rgba(172, 136, 137, 0.28);
  border-bottom: 1px solid rgba(172, 136, 137, 0.28);
}
html[data-cp-theme="ember-crimson"] .cp-stats__inner {
  padding: 1.5rem 1.2rem;
}
html[data-cp-theme="ember-crimson"] .cp-stats__item {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  margin: 0;
  text-align: center;
}
html[data-cp-theme="ember-crimson"] .cp-stats__label,
html[data-cp-theme="ember-crimson"] .cp-stats__note {
  font-family: var(--cpe-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(236, 223, 225, 0.72);
}
html[data-cp-theme="ember-crimson"] .cp-stats__note {
  text-transform: none;
  letter-spacing: 0.02em;
}
html[data-cp-theme="ember-crimson"] .cp-stats__value {
  font-family: var(--cpe-mono);
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--cpe-ember);
}
html[data-cp-theme="ember-crimson"] body[data-md-color-scheme="default"] .cp-stats {
  background: #f1e6e5;
}
html[data-cp-theme="ember-crimson"] body[data-md-color-scheme="default"] .cp-stats__label,
html[data-cp-theme="ember-crimson"] body[data-md-color-scheme="default"] .cp-stats__note {
  color: rgba(36, 30, 31, 0.78);
}
html[data-cp-theme="ember-crimson"] body[data-md-color-scheme="default"] .cp-stats__value {
  color: #a1002f;
}