:root {
  /* Bolondrin identity layered on top of the shared Guvia theme. */
  --brand-primary: #2d8353;
  --brand-secondary: #7aa286;
  --brand-success: #2d8353;
  --brand-warning: #b87828;
  --brand-danger: #c54c4c;

  --secondary: #c6d9cd;
  --secondary-foreground: #21463b;
  --warning-foreground: #24190c;

  --background: #f4f7f1;
  --surface: #fffefb;
  --surface-subtle: #edf4ee;
  --surface-control: #fbfcf8;
  --surface-floating: rgba(255, 255, 252, 0.92);
  --foreground: #15372f;
  --muted-foreground: #697970;
  --icon-foreground: #73827b;
  --header-foreground: #20463b;
  --border: #d8e5dc;
  --border-faint: #e7eee9;
  --control-border: #cfdbd1;
  --control-placeholder: #66776e;
  --neutral-surface: #edf3ec;
  --icon-surface: #e4eee8;

  --sidebar: #0f2a24;
  --sidebar-foreground: #f6fbf8;
  --sidebar-primary: #4a9878;
  --sidebar-primary-foreground: #ffffff;
  --guvia-brand-icon-keyline-color: color-mix(
    in srgb,
    var(--sidebar-foreground) 24%,
    transparent
  );
  --mobile-tabs-border: #d8e4db;
  --mobile-tabs-shadow: 0 -14px 30px rgba(16, 47, 43, 0.08);

  --guvia-primary-rgb: 45, 131, 83;
  --guvia-primary-foreground-rgb: 255, 255, 255;
  --guvia-secondary-rgb: 198, 217, 205;
  --guvia-secondary-foreground-rgb: 33, 70, 59;
  --guvia-success-rgb: 45, 131, 83;
  --guvia-success-foreground-rgb: 255, 255, 255;
  --guvia-warning-rgb: 184, 120, 40;
  --guvia-warning-foreground-rgb: 36, 25, 12;
  --guvia-danger-rgb: 197, 76, 76;
  --guvia-danger-foreground-rgb: 255, 255, 255;
  --guvia-background-rgb: 244, 247, 241;
  --guvia-foreground-rgb: 21, 55, 47;
  --guvia-surface-rgb: 255, 254, 251;
  --guvia-muted-foreground-rgb: 105, 121, 112;
}

ion-app {
  --ion-color-step-850: var(--foreground);

  --guvia-brand-icon-keyline-color: color-mix(
    in srgb,
    var(--mobile-accent-primary, var(--primary)) 30%,
    transparent
  );

  --primary: #7ed8a3;
  --primary-foreground: #0b2419;
  --secondary: #f0b04d;
  --secondary-foreground: #2d2010;
  --success: #63c48a;
  --success-foreground: #071613;
  --warning: #f0b04d;
  --warning-foreground: #2d2010;
  --danger: #d9784e;
  --danger-foreground: #2d160f;

  --background: #071613;
  --splash-background: #071613;
  --surface: #0f241e;
  --surface-subtle: #14302a;
  --surface-control: #14302a;
  --surface-floating: rgba(15, 36, 30, 0.94);
  --foreground: #f3f7f4;
  --surface-foreground: var(--foreground);
  --muted-foreground: #b4c2bb;
  --icon-foreground: #8da196;
  --header-foreground: #f3f7f4;
  --border: rgba(195, 222, 207, 0.18);
  --border-faint: rgba(195, 222, 207, 0.1);
  --control-background: var(--surface-control);
  --control-background-hover: color-mix(in srgb, var(--surface-control) 82%, var(--surface-subtle));
  --control-background-disabled: color-mix(in srgb, var(--surface-control) 72%, var(--background));
  --control-background-readonly: color-mix(in srgb, var(--surface-control) 78%, var(--surface-subtle));
  --control-border: rgba(195, 222, 207, 0.24);
  --control-border-hover: rgba(195, 222, 207, 0.36);
  --control-placeholder: #91a39a;
  --neutral-surface: #19372f;
  --control-off-surface: color-mix(in srgb, var(--background) 84%, var(--muted-foreground) 16%);
  --icon-surface: #19372f;
  --text-soft: color-mix(in srgb, var(--foreground) 72%, transparent);
  --primary-soft: rgba(126, 216, 163, 0.16);
  --primary-border: rgba(126, 216, 163, 0.34);
  --primary-surface: color-mix(in srgb, var(--primary) 12%, var(--background));
  --primary-focus: rgba(126, 216, 163, 0.3);
  --primary-shadow-fab: 0 4px 20px rgba(126, 216, 163, 0.38);
  --primary-shadow-fab-active: 0 2px 10px rgba(126, 216, 163, 0.3);
  --category-accent: var(--secondary);
  --category-accent-soft: color-mix(in srgb, var(--background) 88%, var(--category-accent) 12%);
  --danger-soft: rgba(217, 120, 78, 0.16);
  --danger-surface-subtle: rgba(217, 120, 78, 0.12);
  --danger-text: #eea180;
  --text-muted: rgba(243, 247, 244, 0.64);
  --text-faint: rgba(243, 247, 244, 0.48);
  --overlay-scrim: rgba(2, 10, 7, 0.58);
  --mobile-tabs-foreground: var(--muted-foreground);
  --mobile-tabs-active: var(--primary);
  --mobile-tabs-border: rgba(195, 222, 207, 0.14);
  --mobile-tabs-shadow: 0 -14px 30px rgba(0, 0, 0, 0.22);
  --loading-shimmer-background: linear-gradient(90deg, var(--neutral-surface), var(--surface), var(--neutral-surface));
  --map-empty-background: var(--surface-subtle);
  --toast-accent: var(--primary);
  --map-popup-foreground: var(--foreground);
  --map-control-foreground: var(--foreground);

  --guvia-primary-rgb: 126, 216, 163;
  --guvia-primary-foreground-rgb: 11, 36, 25;
  --guvia-secondary-rgb: 240, 176, 77;
  --guvia-secondary-foreground-rgb: 45, 32, 16;
  --guvia-success-rgb: 99, 196, 138;
  --guvia-success-foreground-rgb: 7, 22, 19;
  --guvia-warning-rgb: 240, 176, 77;
  --guvia-warning-foreground-rgb: 45, 32, 16;
  --guvia-danger-rgb: 217, 120, 78;
  --guvia-danger-foreground-rgb: 45, 22, 15;
  --guvia-background-rgb: 7, 22, 19;
  --guvia-foreground-rgb: 243, 247, 244;
  --guvia-surface-rgb: 15, 36, 30;
  --guvia-muted-foreground-rgb: 180, 194, 187;
}


  body.maps-mobile ion-app .mobile-collection-hero::before {
    background: url("./assets/sidebar-landscape.png") right bottom / cover no-repeat;
    opacity: 0.5;
    mask-image: linear-gradient(90deg, transparent 12%, rgba(0, 0, 0, 0.36) 48%, black 100%);
  }

  body.maps-mobile ion-app :is(.mobile-media-card__media--fallback, .mobile-media-card__placeholder) {
    background:
      linear-gradient(180deg, rgba(7, 22, 19, 0.02), rgba(7, 22, 19, 0.24)),
      url("./assets/sidebar-landscape.png") center bottom / cover no-repeat,
      linear-gradient(135deg, var(--surface-subtle), var(--surface));
  }

  body.maps-mobile ion-app :is(.mobile-identity-hero__media--fallback, .mobile-identity-hero__placeholder) {
    background:
      linear-gradient(180deg, rgba(7, 22, 19, 0.04), rgba(7, 22, 19, 0.28)),
      url("./assets/sidebar-landscape.png") right bottom / cover no-repeat,
      linear-gradient(135deg, var(--surface-subtle), var(--surface));
  }

  body.maps-mobile ion-app :is(.mobile-identity-hero__thumbnail--fallback, .mobile-identity-hero__thumbnail-placeholder) {
    background:
      linear-gradient(180deg, rgba(7, 22, 19, 0.04), rgba(7, 22, 19, 0.28)),
      url("./assets/sidebar-landscape.png") center bottom / cover no-repeat,
      linear-gradient(135deg, var(--surface-subtle), var(--surface));
  }

  body.maps-mobile ion-app :is(.map-edit-cover, .marker-edit-hero-card__placeholder) {
    background:
      linear-gradient(90deg, rgba(5, 19, 17, 0.14), rgba(5, 19, 17, 0.02) 58%, rgba(5, 19, 17, 0.28)),
      url("./assets/sidebar-landscape.png") right bottom / cover no-repeat,
      linear-gradient(135deg, var(--surface-subtle), var(--surface));
  }

  body.maps-mobile ion-app .profile-photo__preview {
    background:
      url("./assets/sidebar-landscape.png") center / cover no-repeat,
      var(--mobile-surface-3);
  }

  body.maps-mobile ion-app .mobile-empty-state-panel__art {
    background:
      radial-gradient(circle at center 34%, var(--primary-soft), transparent 34%),
      url("./assets/sidebar-landscape.png") center 75% / cover no-repeat,
      linear-gradient(135deg, var(--surface-subtle), var(--surface));
  }

  .sidebar-shell {
    position: relative;
    overflow: hidden;
  }

  .sidebar-shell::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 36%;
    background:
      linear-gradient(180deg, transparent, rgba(8, 22, 18, 0.82)),
      url("./assets/sidebar-landscape.png") center bottom / cover no-repeat;
    opacity: 0.42;
    pointer-events: none;
  }

  .sidebar-shell > * {
    position: relative;
    z-index: 1;
  }

  app-map-card > div > div:first-child > div[style]:first-child {
    background:
      url("./assets/sidebar-landscape.png") center 80% / cover no-repeat,
      linear-gradient(135deg, #2d7359, #3b8a67) !important;
  }

  .map-card {
    position: relative;
  }

  .map-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6.35rem;
    border-radius: 1rem 1rem 0 0;
    background:
      url("./assets/sidebar-landscape.png") center 80% / cover no-repeat,
      linear-gradient(135deg, #2d7359, #3b8a67);
    pointer-events: none;
  }

  .map-cover + .map-card::before {
    content: none;
  }