@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* Scoped Millarde theme. Stock Docmost remains untouched unless this attribute
   is set to "millarde" by theme.js. */
html[data-millarde-theme="millarde"]:not([data-mantine-color-scheme="dark"]) {
  --millarde-bg: #faf7f0;
  --millarde-sidebar: #f3efe3;
  --millarde-card: #ffffff;
  --millarde-elev: #efeadb;
  --millarde-border: rgba(38, 34, 26, .10);
  --millarde-border-soft: rgba(38, 34, 26, .07);
  --millarde-text: #26221a;
  --millarde-text-body: #3c372c;
  --millarde-text-2: #5c5646;
  --millarde-text-3: #8a8270;
  --millarde-accent: #8f7420;
  --millarde-accent-bright: #c9a227;
  --millarde-accent-deep: #6f5a12;
  --millarde-accent-tint: #ece2c6;

  --mantine-font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mantine-font-family-headings: "Sora", "Instrument Sans", sans-serif;
  --mantine-font-family-monospace: "JetBrains Mono", monospace;
  --mantine-heading-font-family: "Sora", "Instrument Sans", sans-serif;
  --mantine-radius-sm: 7px;
  --mantine-radius-md: 10px;
  --mantine-radius-lg: 14px;
  --mantine-radius-xl: 20px;

  --mantine-color-body: var(--millarde-bg);
  --mantine-color-default: var(--millarde-card);
  --mantine-color-default-color: var(--millarde-text);
  --mantine-color-default-border: var(--millarde-border);
  --mantine-color-default-hover: rgba(38, 34, 26, .05);
  --mantine-color-dimmed: var(--millarde-text-2);
  --mantine-color-placeholder: var(--millarde-text-3);
  --mantine-color-anchor: var(--millarde-accent);
  --mantine-color-text: var(--millarde-text-body);

  --mantine-color-gray-0: #faf7f0;
  --mantine-color-gray-1: #f3efe3;
  --mantine-color-gray-2: #e7dfcc;
  --mantine-color-gray-3: #cfc4aa;
  --mantine-color-gray-4: #a49b85;
  --mantine-color-gray-5: #8a8270;
  --mantine-color-gray-6: #6d6655;
  --mantine-color-gray-7: #5c5646;
  --mantine-color-gray-8: #3c372c;
  --mantine-color-gray-9: #26221a;

  --mantine-color-blue-0: #faf4df;
  --mantine-color-blue-1: #ece2c6;
  --mantine-color-blue-2: #dfcf9c;
  --mantine-color-blue-3: #d1b965;
  --mantine-color-blue-4: #c9a227;
  --mantine-color-blue-5: #a98920;
  --mantine-color-blue-6: #8f7420;
  --mantine-color-blue-7: #7b631b;
  --mantine-color-blue-8: #6f5a12;
  --mantine-color-blue-9: #55460f;

  --mantine-color-dark-light: rgba(38, 34, 26, .08);
  --mantine-color-dark-light-hover: rgba(38, 34, 26, .12);
  --mantine-color-dark-light-color: var(--millarde-text);
}

html[data-millarde-theme="millarde"][data-mantine-color-scheme="dark"] {
  --millarde-bg: #1e2020;
  --millarde-sidebar: #171919;
  --millarde-card: #262a2a;
  --millarde-elev: #2e3333;
  --millarde-border: rgba(246, 234, 224, .12);
  --millarde-border-soft: rgba(246, 234, 224, .08);
  --millarde-text: #f6eae0;
  --millarde-text-body: #e9dccf;
  --millarde-text-2: #b8aea2;
  --millarde-text-3: #8f887c;
  --millarde-accent: #ce422b;
  --millarde-accent-bright: #e8573c;
  --millarde-accent-deep: #f0704f;
  --millarde-accent-tint: rgba(206, 66, 43, .18);

  --mantine-font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mantine-font-family-headings: "Sora", "Instrument Sans", sans-serif;
  --mantine-font-family-monospace: "JetBrains Mono", monospace;
  --mantine-heading-font-family: "Sora", "Instrument Sans", sans-serif;
  --mantine-radius-sm: 7px;
  --mantine-radius-md: 10px;
  --mantine-radius-lg: 14px;
  --mantine-radius-xl: 20px;

  --mantine-color-body: var(--millarde-bg);
  --mantine-color-default: var(--millarde-card);
  --mantine-color-default-color: var(--millarde-text);
  --mantine-color-default-border: var(--millarde-border);
  --mantine-color-default-hover: rgba(246, 234, 224, .06);
  --mantine-color-dimmed: var(--millarde-text-2);
  --mantine-color-placeholder: var(--millarde-text-3);
  --mantine-color-anchor: var(--millarde-accent-bright);
  --mantine-color-text: var(--millarde-text-body);

  --mantine-color-dark-0: #f6eae0;
  --mantine-color-dark-1: #e9dccf;
  --mantine-color-dark-2: #b8aea2;
  --mantine-color-dark-3: #8f887c;
  --mantine-color-dark-4: #555a58;
  --mantine-color-dark-5: #3d4342;
  --mantine-color-dark-6: #2e3333;
  --mantine-color-dark-7: #262a2a;
  --mantine-color-dark-8: #1e2020;
  --mantine-color-dark-9: #171919;

  --mantine-color-gray-0: #f6eae0;
  --mantine-color-gray-1: #e9dccf;
  --mantine-color-gray-2: #d2c5b8;
  --mantine-color-gray-3: #b8aea2;
  --mantine-color-gray-4: #8f887c;
  --mantine-color-gray-5: #6e6a62;
  --mantine-color-gray-6: #555a58;
  --mantine-color-gray-7: #3d4342;
  --mantine-color-gray-8: #2e3333;
  --mantine-color-gray-9: #262a2a;

  --mantine-color-blue-0: #f8e5df;
  --mantine-color-blue-1: #efc8bc;
  --mantine-color-blue-2: #e99e8b;
  --mantine-color-blue-3: #e8755b;
  --mantine-color-blue-4: #e8573c;
  --mantine-color-blue-5: #d94c32;
  --mantine-color-blue-6: #ce422b;
  --mantine-color-blue-7: #b03622;
  --mantine-color-blue-8: #922d1e;
  --mantine-color-blue-9: #702318;

  --mantine-color-dark-light: rgba(246, 234, 224, .07);
  --mantine-color-dark-light-hover: rgba(246, 234, 224, .11);
  --mantine-color-dark-light-color: var(--millarde-text);
}

html[data-millarde-theme="millarde"] body,
html[data-millarde-theme="millarde"] #root {
  background: var(--millarde-bg);
  color: var(--millarde-text-body);
  font-family: var(--mantine-font-family);
}

html[data-millarde-theme="millarde"] header,
html[data-millarde-theme="millarde"] nav,
html[data-millarde-theme="millarde"] aside {
  background-color: var(--millarde-sidebar);
  border-color: var(--millarde-border);
}

html[data-millarde-theme="millarde"] .ProseMirror {
  background-color: var(--millarde-bg);
  color: var(--millarde-text-body);
}

html[data-millarde-theme="millarde"] h1,
html[data-millarde-theme="millarde"] h2,
html[data-millarde-theme="millarde"] h3,
html[data-millarde-theme="millarde"] h4,
html[data-millarde-theme="millarde"] h5,
html[data-millarde-theme="millarde"] h6 {
  font-family: "Sora", var(--mantine-font-family);
  color: var(--millarde-text);
}

html[data-millarde-theme="millarde"] a {
  color: var(--millarde-accent);
}

html[data-millarde-theme="millarde"] button,
html[data-millarde-theme="millarde"] input,
html[data-millarde-theme="millarde"] textarea,
html[data-millarde-theme="millarde"] select {
  font-family: var(--mantine-font-family);
}

html[data-millarde-theme="millarde"] code,
html[data-millarde-theme="millarde"] pre {
  font-family: "JetBrains Mono", var(--mantine-font-family-monospace);
}

html[data-millarde-theme="millarde"] ::selection {
  background: var(--millarde-accent-tint);
  color: var(--millarde-text);
}

html[data-millarde-theme="millarde"] * {
  scrollbar-color: var(--millarde-border) transparent;
}

/* First-party style picker: intentionally consistent in both UI styles. */
#millarde-style-switch {
  position: fixed;
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px 7px 11px;
  border: 1px solid rgba(38, 34, 26, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 24px rgba(38, 34, 26, .13);
  color: #3c372c;
  font: 500 12px/1 "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  backdrop-filter: blur(12px);
}

#millarde-style-switch label {
  color: inherit;
  font-weight: 600;
}

#millarde-style-switch select {
  min-width: 92px;
  padding: 5px 24px 5px 8px;
  border: 1px solid rgba(38, 34, 26, .12);
  border-radius: 7px;
  background: #faf7f0;
  color: #26221a;
  font: 600 12px/1.2 "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}

#millarde-style-switch select:focus-visible {
  outline: 2px solid #8f7420;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  #millarde-style-switch {
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    padding: 6px 7px 6px 9px;
  }

  #millarde-style-switch select {
    font-size: 16px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  #millarde-style-switch {
    background: #ffffff;
    backdrop-filter: none;
  }
}