:root {
  --shape-discord: #5865f2;

  --shape-primary: #e2603a;
  --shape-primary-hover: #c94f2c;
  --shape-accent: #c94f2c;
  --shape-on-primary: #ffffff;

  --shape-bg: #f7f8fa;
  --shape-bg-alt: #ffffff;
  --shape-surface: #ffffff;
  --shape-surface-hover: #eef1f5;
  --shape-border: #e2e7ee;
  --shape-border-hover: #c8d2de;

  --shape-text: #1f2530;
  --shape-text-muted: #5d6a7a;

  --shape-info: #0284c7;
  --shape-warning: #b45309;
  --shape-danger: #dc2626;
  --shape-example: #15803d;
  --shape-sanction: #be123c;

  --shape-radius: 12px;
  --shape-radius-sm: 8px;
  --shape-content-width: 880px;
  --shape-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue',
                Arial, sans-serif;
}

html.dark-mode {
  --shape-primary: #ff9b7a;
  --shape-primary-hover: #ffb096;
  --shape-accent: #ffb8a8;
  --shape-on-primary: #1a1008;

  --shape-bg: #0d1015;
  --shape-bg-alt: #12161d;
  --shape-surface: #171c24;
  --shape-surface-hover: #1d232d;
  --shape-border: #262d38;
  --shape-border-hover: #3a4351;

  --shape-text: #e8ecf2;
  --shape-text-muted: #8b96a5;

  --shape-info: #38bdf8;
  --shape-warning: #fbbf24;
  --shape-danger: #f87171;
  --shape-example: #4ade80;
  --shape-sanction: #fb7185;
}

html.dark-mode,
html.dark-mode body,
html:not(.dark-mode),
html:not(.dark-mode) body {
  background-color: var(--shape-bg);
  color: var(--shape-text);
}

body {
  font-family: var(--shape-font);
}

html.dark-mode a,
html:not(.dark-mode) a {
  color: var(--shape-accent);
}

#header.primary-background {
  background: var(--shape-bg-alt) !important;
  border-bottom: 1px solid var(--shape-border);
  color: var(--shape-text);
}

#header .grid.mx-l > div:first-child a,
#header .logo-text {
  color: var(--shape-text);
}

#header .search-box input {
  background-color: var(--shape-bg);
  border: 1px solid var(--shape-border);
  color: var(--shape-text);
  border-radius: 999px;
}

#header .search-box input::placeholder {
  color: var(--shape-text-muted);
  opacity: 1;
}

#header .search-box input:focus {
  border-color: var(--shape-primary);
}

#header .search-box #header-search-box-button {
  color: var(--shape-text-muted);
}

#header .links a {
  color: var(--shape-text-muted);
}

#header .links a:hover {
  color: var(--shape-text);
  background-color: var(--shape-surface-hover);
}

#header .links a.shape-header-btn {
  display: inline-block;
  padding: 6px 14px;
  margin: 4px 4px 0 4px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

#header .links a.shape-btn-discord {
  background-color: var(--shape-discord);
  color: #ffffff;
}

#header .links a.shape-btn-discord:hover,
#header .links a.shape-btn-discord:focus {
  background-color: #6b76f5;
  color: #ffffff;
  transform: translateY(-1px);
}

#header .links a.shape-btn-site {
  background-color: var(--shape-primary);
  color: var(--shape-on-primary);
}

#header .links a.shape-btn-site:hover,
#header .links a.shape-btn-site:focus {
  background-color: var(--shape-primary-hover);
  color: var(--shape-on-primary);
  transform: translateY(-1px);
}

html.dark-mode .breadcrumbs .text-button,
html:not(.dark-mode) .breadcrumbs .text-button {
  color: var(--shape-text-muted);
}

html.dark-mode .breadcrumbs .text-button:hover,
html:not(.dark-mode) .breadcrumbs .text-button:hover {
  color: var(--shape-text);
}

html.dark-mode .content-wrap.card,
html:not(.dark-mode) .content-wrap.card {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.page-content {
  max-width: var(--shape-content-width);
  font-size: 1.02rem;
  line-height: 1.75;
}

.page-content h1 {
  font-size: 2.4em;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.6em;
}

.page-content h2 {
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 1.6em;
}

.page-content h3 {
  font-weight: 600;
}

html.dark-mode .page-content hr,
html:not(.dark-mode) .page-content hr {
  background: none;
  border: 0;
  border-top: 1px solid var(--shape-border);
  margin: 1.2em 0 1.6em 0;
}

.page-content ul li,
.page-content ol li {
  margin-bottom: 0.45em;
}

html.dark-mode .page-content li::marker,
html:not(.dark-mode) .page-content li::marker {
  color: var(--shape-primary);
}

html.dark-mode .page-content code,
html:not(.dark-mode) .page-content code {
  background-color: var(--shape-surface-hover);
  border: 1px solid var(--shape-border);
  border-radius: 4px;
  padding: 1px 6px;
}

html.dark-mode .page-content blockquote,
html:not(.dark-mode) .page-content blockquote {
  border-left: 3px solid var(--shape-primary);
  background-color: var(--shape-surface-hover);
  border-radius: 0 var(--shape-radius-sm) var(--shape-radius-sm) 0;
}

html.dark-mode .page-content mark,
html:not(.dark-mode) .page-content mark {
  background: none;
  color: inherit;
  font-weight: 600;
}

.entity-list.book-contents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 1rem;
}

html.dark-mode .book-contents .entity-list-item,
html:not(.dark-mode) .book-contents .entity-list-item {
  position: relative;
  background-color: var(--shape-surface);
  border: 1px solid var(--shape-border);
  border-radius: var(--shape-radius-sm);
  padding: 14px 40px 14px 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease,
              transform 0.15s ease;
}

html.dark-mode .book-contents .entity-list-item:hover,
html:not(.dark-mode) .book-contents .entity-list-item:hover {
  background-color: var(--shape-surface-hover);
  border-color: var(--shape-border-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

html.dark-mode .book-contents .entity-list-item::after,
html:not(.dark-mode) .book-contents .entity-list-item::after {
  content: '›';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--shape-text-muted);
  transition: color 0.15s ease, right 0.15s ease;
}

html.dark-mode .book-contents .entity-list-item:hover::after,
html:not(.dark-mode) .book-contents .entity-list-item:hover::after {
  color: var(--shape-primary);
  right: 12px;
}

html.dark-mode .card,
html:not(.dark-mode) .card {
  background-color: var(--shape-surface);
  border: 1px solid var(--shape-border);
  border-radius: var(--shape-radius);
  box-shadow: none;
}

html.dark-mode .card .card-title,
html:not(.dark-mode) .card .card-title {
  color: var(--shape-text);
}

html.dark-mode .grid-card,
html:not(.dark-mode) .grid-card {
  background-color: var(--shape-surface);
  border: 1px solid var(--shape-border);
  border-radius: var(--shape-radius);
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

html.dark-mode .grid-card:hover,
html:not(.dark-mode) .grid-card:hover {
  transform: translateY(-3px);
  border-color: var(--shape-border-hover);
  box-shadow: none;
  text-decoration: none;
}

html.dark-mode .sidebar-page-nav,
html:not(.dark-mode) .sidebar-page-nav {
  border-left: 1px solid var(--shape-border);
}

html.dark-mode .sidebar-page-nav a,
html:not(.dark-mode) .sidebar-page-nav a {
  color: var(--shape-text-muted);
  font-size: 0.92em;
}

html.dark-mode .sidebar-page-nav a:hover,
html:not(.dark-mode) .sidebar-page-nav a:hover {
  color: var(--shape-text);
  text-decoration: none;
}

html.dark-mode .sidebar-page-nav .current-heading,
html:not(.dark-mode) .sidebar-page-nav .current-heading {
  border-left: 2px solid var(--shape-primary);
  margin-left: -1px;
}

html.dark-mode .sidebar-page-nav .current-heading a,
html:not(.dark-mode) .sidebar-page-nav .current-heading a {
  color: var(--shape-primary);
}

html.dark-mode .tri-layout-right h5,
html.dark-mode .tri-layout-left h5,
html:not(.dark-mode) .tri-layout-right h5,
html:not(.dark-mode) .tri-layout-left h5 {
  color: var(--shape-text);
  font-weight: 600;
}

.entity-meta a[href*="/revisions"] {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--shape-primary) 16%, transparent);
  color: var(--shape-text) !important;
  font-weight: 600;
}

.rule-info,
.rule-warning,
.rule-danger,
.rule-example,
.rule-sanction {
  position: relative;
  margin: 1.2em 0;
  padding: 1em 1.2em;
  border-radius: var(--shape-radius-sm);
  border: 1px solid;
  border-left-width: 4px;
}

.rule-info::before,
.rule-warning::before,
.rule-danger::before,
.rule-example::before,
.rule-sanction::before {
  display: block;
  margin-bottom: 0.35em;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rule-info {
  border-color: var(--shape-info);
  background-color: color-mix(in srgb, var(--shape-info) 9%, transparent);
}
.rule-info::before { content: 'ℹ Information'; color: var(--shape-info); }

.rule-warning {
  border-color: var(--shape-warning);
  background-color: color-mix(in srgb, var(--shape-warning) 9%, transparent);
}
.rule-warning::before { content: '⚠ Avertissement'; color: var(--shape-warning); }

.rule-danger {
  border-color: var(--shape-danger);
  background-color: color-mix(in srgb, var(--shape-danger) 9%, transparent);
}
.rule-danger::before { content: '⛔ Interdiction'; color: var(--shape-danger); }

.rule-example {
  border-color: var(--shape-example);
  background-color: color-mix(in srgb, var(--shape-example) 8%, transparent);
}
.rule-example::before { content: '🎭 Exemple RP'; color: var(--shape-example); }

.rule-sanction {
  border-color: var(--shape-sanction);
  background-color: color-mix(in srgb, var(--shape-sanction) 9%, transparent);
}
.rule-sanction::before { content: '⚖ Sanction'; color: var(--shape-sanction); }

html.dark-mode .callout,
html:not(.dark-mode) .callout {
  border-radius: var(--shape-radius-sm);
  border-left-width: 4px;
}

html.dark-mode .entity-item-snippet,
html:not(.dark-mode) .entity-item-snippet {
  color: var(--shape-text-muted);
}

html.dark-mode .entity-item-snippet strong,
html:not(.dark-mode) .entity-item-snippet strong {
  color: var(--shape-primary);
  background-color: color-mix(in srgb, var(--shape-primary) 14%, transparent);
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 700;
}

html.dark-mode .entity-list > .entity-list-item,
html:not(.dark-mode) .entity-list > .entity-list-item {
  padding-top: 12px;
  padding-bottom: 12px;
}

.global-search-suggestions .entity-item-snippet p.shape-suggest-snippet,
.shape-suggest-snippet {
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 2px 0 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.dark-mode .global-search-suggestions hr,
html:not(.dark-mode) .global-search-suggestions hr {
  background: none;
  border: 0;
  border-top: 1px solid var(--shape-border);
  margin: 4px 0;
}

html.dark-mode .global-search-suggestions .card-footer-link,
html:not(.dark-mode) .global-search-suggestions .card-footer-link {
  color: var(--shape-primary);
  font-weight: 600;
}

::target-text {
  background-color: color-mix(in srgb, var(--shape-primary) 40%, transparent);
  color: inherit;
}

html.dark-mode .entity-list-item:not(.no-hover):hover,
html.dark-mode .icon-list-item:not(.no-hover):hover,
html:not(.dark-mode) .entity-list-item:not(.no-hover):hover,
html:not(.dark-mode) .icon-list-item:not(.no-hover):hover {
  background-color: var(--shape-surface-hover);
}

html.dark-mode .entity-list-item:focus,
html.dark-mode .icon-list-item:focus,
html:not(.dark-mode) .entity-list-item:focus,
html:not(.dark-mode) .icon-list-item:focus {
  background-color: var(--shape-surface-hover);
  outline: 1px solid var(--shape-border-hover);
}

html.dark-mode .card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover,
html:not(.dark-mode) .card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover {
  background-color: var(--shape-surface-hover);
}

html.dark-mode #header .links a:focus,
html.dark-mode #header .dropdown-container ul li a:focus,
html.dark-mode #header .dropdown-container ul li button:focus,
html:not(.dark-mode) #header .links a:focus,
html:not(.dark-mode) #header .dropdown-container ul li a:focus,
html:not(.dark-mode) #header .dropdown-container ul li button:focus {
  background-color: var(--shape-surface-hover);
  color: var(--shape-text);
}

html.dark-mode #header .dropdown-container ul li a:hover,
html.dark-mode #header .dropdown-container ul li button:hover,
html:not(.dark-mode) #header .dropdown-container ul li a:hover,
html:not(.dark-mode) #header .dropdown-container ul li button:hover {
  background-color: var(--shape-surface-hover);
  color: var(--shape-text);
}

html.dark-mode .card-footer-link:hover,
html.dark-mode button.card-footer-link:hover,
html.dark-mode .card-footer-link:focus,
html.dark-mode button.card-footer-link:focus,
html:not(.dark-mode) .card-footer-link:hover,
html:not(.dark-mode) button.card-footer-link:hover,
html:not(.dark-mode) .card-footer-link:focus,
html:not(.dark-mode) button.card-footer-link:focus {
  background-color: var(--shape-surface-hover);
}

html.dark-mode .tag-item a:hover,
html:not(.dark-mode) .tag-item a:hover {
  background-color: var(--shape-surface-hover);
}

.button {
  border-radius: var(--shape-radius-sm);
  font-weight: 600;
}

html.dark-mode .button:not(.outline),
html:not(.dark-mode) .button:not(.outline) {
  background-color: var(--shape-primary);
  color: var(--shape-on-primary);
}

html.dark-mode .button:not(.outline):hover,
html.dark-mode .button:not(.outline):focus,
html.dark-mode .button:not(.outline):active,
html:not(.dark-mode) .button:not(.outline):hover,
html:not(.dark-mode) .button:not(.outline):focus,
html:not(.dark-mode) .button:not(.outline):active {
  background-color: var(--shape-primary-hover);
  color: var(--shape-on-primary);
  box-shadow: none;
}

html.dark-mode input[type='text'],
html.dark-mode input[type='search'],
html.dark-mode input[type='email'],
html.dark-mode input[type='password'],
html.dark-mode select,
html.dark-mode textarea,
html:not(.dark-mode) input[type='text'],
html:not(.dark-mode) input[type='search'],
html:not(.dark-mode) input[type='email'],
html:not(.dark-mode) input[type='password'],
html:not(.dark-mode) select,
html:not(.dark-mode) textarea {
  background-color: var(--shape-bg-alt);
  border: 1px solid var(--shape-border);
  border-radius: var(--shape-radius-sm);
  color: var(--shape-text);
}

@media screen and (max-width: 1000px) {
  .page-content {
    font-size: 1rem;
  }

  .page-content h1 {
    font-size: 1.9em;
  }

  #header .links a.shape-header-btn {
    padding: 5px 10px;
    font-size: 0.8rem;
  }

  .entity-list.book-contents {
    grid-template-columns: 1fr;
  }
}