/* Calm birch-bark theme for Gramps Web. It is enabled only by the theme picker. */
:root[data-birch-theme] {
  color-scheme: light;
  --birch-bg: #fffaf2;
  --birch-panel: rgba(255, 252, 243, 0.94);
  --birch-panel-soft: rgba(247, 238, 219, 0.9);
  --birch-ink: #3f3428;
  --birch-muted: #786957;
  --birch-accent: #9a5b3d;
  --birch-accent-soft: #d9b28d;
  --birch-grain: rgba(116, 77, 43, 0.09);
  --birch-canvas: #fffaf2;
  --birch-texture: none;
  --birch-grain-color: rgba(105, 68, 39, 0.14);
  --birch-card-edge: rgba(128, 86, 49, 0.25);
  --mdc-theme-primary: var(--birch-accent) !important;
  --mdc-theme-on-primary: #fff !important;
  --mdc-theme-secondary: var(--birch-accent) !important;
  --grampsjs-top-app-bar-background-color: var(--birch-accent) !important;
  --grampsjs-top-app-bar-font-color: #fff !important;
  --grampsjs-color-shade-230: #f2e2c3 !important;
  --grampsjs-color-shade-240: #fffaf2 !important;
  --grampsjs-body-font-color-90: var(--birch-ink) !important;
}

:root[data-birch-theme],
:root[data-birch-theme] body {
  background-color: var(--birch-bg) !important;
  color: var(--birch-ink) !important;
}

/* Gramps Web renders most content in nested web components. Set the grain on
   the page viewport as well as body so it remains visible behind the tree. */
:root[data-birch-theme] gramps-js {
  --birch-canvas: #fffaf2;
}

:root[data-birch-theme] gramps-js::part(main) {
  background-color: #fffaf2 !important;
  background-image: none !important;
}

:root[data-birch-theme] gramps-js::part(main) main,
:root[data-birch-theme] gramps-js::part(main) grampsjs-pages,
:root[data-birch-theme] gramps-js::part(main) grampsjs-view-tree,
:root[data-birch-theme] gramps-js::part(main) #chart {
  background-color: transparent !important;
  background-image: var(--birch-texture) !important;
  background-attachment: fixed !important;
}

:root[data-birch-theme] grampsjs-view-tree {
  background-color: transparent !important;
}

:root[data-birch-theme] grampsjs-tree-chart,
:root[data-birch-theme] grampsjs-tree-chart::part(container) {
  background: transparent !important;
}

:root[data-birch-theme] body {
  background-image: none !important;
  background-attachment: fixed;
  background-size: auto, auto, auto, auto, cover;
}

/* Gramps Web places the pedigree inside a full-height application shell.
   Make that shell transparent so the bark can actually be seen. */
:root[data-birch-theme] body > *,
:root[data-birch-theme] gramps-js app-root,
:root[data-birch-theme] gramps-js gramps-app,
:root[data-birch-theme] gramps-js #app,
:root[data-birch-theme] gramps-js .app,
:root[data-birch-theme] gramps-js .application,
:root[data-birch-theme] gramps-js .layout,
:root[data-birch-theme] .main,
:root[data-birch-theme] .main-content,
:root[data-birch-theme] .page,
:root[data-birch-theme] .page-container,
:root[data-birch-theme] .router-outlet,
:root[data-birch-theme] main,
:root[data-birch-theme] main > *,
:root[data-birch-theme] svg,
:root[data-birch-theme] canvas {
  background-color: transparent !important;
}

:root[data-birch-theme],
:root[data-birch-theme] body,
:root[data-birch-theme] gramps-js #app,
:root[data-birch-theme] gramps-js app-root,
:root[data-birch-theme] gramps-js gramps-app,
:root[data-birch-theme] .app,
:root[data-birch-theme] .application,
:root[data-birch-theme] .layout,
:root[data-birch-theme] .main,
:root[data-birch-theme] .main-content,
:root[data-birch-theme] .page,
:root[data-birch-theme] .page-container,
:root[data-birch-theme] .router-outlet,
:root[data-birch-theme] main,
:root[data-birch-theme] main > *,
:root[data-birch-theme] [part="main"],
:root[data-birch-theme] [part="content"] {
  background: #fffaf2 !important;
  background-color: #fffaf2 !important;
}

/* A quiet manuscript-inspired ornament: fine ruled lines and a small
   geometric border motif along the application canvas edge. */
:root[data-birch-theme] body::before {
  display: none;
}

/* Keep the application readable above the bark texture. */
:root[data-birch-theme] body > *,
:root[data-birch-theme] gramps-js app-root,
:root[data-birch-theme] gramps-js gramps-app,
:root[data-birch-theme] main {
  --md-sys-color-surface: var(--birch-panel);
  --md-sys-color-surface-container: var(--birch-panel-soft);
  --md-sys-color-on-surface: var(--birch-ink);
  --md-sys-color-primary: var(--birch-accent);
  --mdc-theme-primary: var(--birch-accent);
  --mdc-theme-on-primary: #fff;
  --mdc-theme-secondary: var(--birch-accent);
}

:root[data-birch-theme] main,
:root[data-birch-theme] .content,
:root[data-birch-theme] .page-content,
:root[data-birch-theme] .card,
:root[data-birch-theme] .panel,
:root[data-birch-theme] md-card {
  background-color: rgba(255, 252, 243, 0.58);
}

/* Birch-bark cards: the canvas stays plain, while people look like small
   warm manuscript slips. The selectors cover the custom elements and the
   common class names used by Gramps Web releases. */
:root[data-birch-theme] gramps-person-card,
:root[data-birch-theme] pedigree-person-card,
:root[data-birch-theme] person-card,
:root[data-birch-theme] .person-card,
:root[data-birch-theme] .person-box,
:root[data-birch-theme] .pedigree-card,
:root[data-birch-theme] .individual-card,
:root[data-birch-theme] [data-person-id] {
  background-color: #ead9b9 !important;
  background-image:
    repeating-linear-gradient(2deg,
      rgba(124, 84, 45, 0.045) 0px,
      rgba(124, 84, 45, 0.045) 1px,
      transparent 1px,
      transparent 7px),
    linear-gradient(100deg, rgba(255, 250, 229, 0.28), rgba(190, 146, 91, 0.09));
  border: 1px solid rgba(123, 78, 45, 0.32) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 7px rgba(80, 51, 31, 0.16) !important;
  color: var(--birch-ink) !important;
}

:root[data-birch-theme] gramps-person-card *,
:root[data-birch-theme] pedigree-person-card *,
:root[data-birch-theme] person-card *,
:root[data-birch-theme] .person-card *,
:root[data-birch-theme] .person-box *,
:root[data-birch-theme] .pedigree-card *,
:root[data-birch-theme] .individual-card * {
  color: var(--birch-ink);
}

:root[data-birch-theme] header,
:root[data-birch-theme] nav,
:root[data-birch-theme] .toolbar,
:root[data-birch-theme] .sidebar,
:root[data-birch-theme] .drawer {
  background-color: rgba(247, 238, 219, 0.96);
}

:root[data-birch-theme] button,
:root[data-birch-theme] a,
:root[data-birch-theme] [role="button"] {
  --md-sys-color-primary: var(--birch-accent);
}

/* Thin warm separators echo the edge of a birch-bark sheet. */
:root[data-birch-theme] hr,
:root[data-birch-theme] .separator,
:root[data-birch-theme] .divider {
  border-color: rgba(154, 91, 61, 0.22) !important;
}

/* Old Russian manuscript colors used sparingly on selected controls. */
:root[data-birch-theme] [aria-selected="true"],
:root[data-birch-theme] [aria-current="page"] {
  box-shadow: inset 0 -2px 0 rgba(154, 91, 61, 0.5);
}